zoukankan      html  css  js  c++  java
  • ES5:深入解析如何js定义类或对象。

    1.原始方式

    var oCar = new  Object;

    oCar.color = "blue";

    oCar.showColor = function(){alert(this.color)};

    缺点:需要创建多个oCar的实例;

    2.工厂方式

    解释:使用工厂函数(factory function)

    function carFactory(){

      var oCar = new Object;

      oCar.color = "blue";

      oCar.showColor = function(){alert(this.color)};

      return oCar;

    }

    var oCar1 = carFactory();

    var oCar2 = carFactory();

    此时,虽然解决了原始方式中,创建多个实例的缺点,但是两个对象oCar1与oCar2的属性一模一样;

    优化1:

    function carFactoty(col){

      var oCar = new Object;

      oCar.color  = col;

      oCar.showColor = function(){alert(this.color)}

    }

    var oCar1 = carFactoty("blue");

    var oCar2 = carFactoty("red");

    oCar1.showColor();

    oCar2.showColor();

    此时,通过向工厂函数传递参数的方法,改变了两个对象默认属性值一样的问题。

    缺点:每次调用carFactory方法,都要创建一次showColor方法,意味着每个对象有自己的showColor版本,其实,两个对象只需共享同一个函数就可以了。

    优化2:

    function showColor(){alert(this.color)};

    function carFactory(col){

      var oCar = new Object;

      oCar.color = col;

      oCar.showColor = showColor;

    }

    var oCar1 = carFactory("blue");

    var oCar2 = carFactory("red");

    oCar1.showColor();

    oCar2.showColor();

    此时,虽然解决了优化1中的showColor()在不同对象中不同版本的问题,然而,新定义的showColor()方法,却不像是对象的方法。

    3.构造函数方式

    解释:在构造函数内没有创建对象,而是使用this关键字,在使用new运算符执行构造函数时,会在执行代码之前创建一个对象,使用this访问该对象,通过this给对象赋予属性和方法。默认返回this。

    function consFactory(col){

      this.color = col;

      this.showColor = function(){alert(this.color)}

    }

    var oCar1 = new consFactory("red");

    var oCar2 = new consFactory("blue");

    此时,就像工厂函数,构造函数会重复生成函数,为每个对象都创建独立的函数版本

    4.原型方式

    解释:通过给proFunction的prototype属性添加属性,从而给proFunction添加属性。oCar1存放的实际上是指向showColor的指针,这样所有的属性,看起来都属于同一对象了。

    注意:在构造函数的原型中,是不能接受构造函数的参数的。也就是,不能通过参数来初始化属性的值。

    function proFunction(){};

    proFunction.prototype.color = “blue”;

    proFunction.prototype.showColor = function(){alert(this.color)}

    var oCar1 = new proFunction();

    var oCar2  = new proFunction();

    此时,在创建对象后才能真正改变属性的默认值,最痛点是,当属性指向的是对象时,对象不能被多个实例共享。

    如:

    function Car() {
    }
    
    Car.prototype.color = "blue";
    Car.prototype.doors = 4;
    Car.prototype.mpg = 25;
    Car.prototype.drivers = new Array("Mike","John");
    Car.prototype.showColor = function() {
      alert(this.color);
    };
    
    var oCar1 = new Car();
    var oCar2 = new Car();
    
    oCar1.drivers.push("Bill");
    
    alert(oCar1.drivers);	//输出 "Mike,John,Bill"
    alert(oCar2.drivers);	//输出 "Mike,John,Bill"
    解释:属性 drivers 是指向 Array 对象的指针,该数组中包含两个名字 "Mike" 和 "John"。由于 drivers 是引用值,Car 的两个实例都指向同一个数组。
    这意味着给 oCar1.drivers 添加值 "Bill",在 oCar2.drivers 中也能看到。输出这两个指针中的任何一个,结果都是显示字符串 "Mike,John,Bill"。
    5.构造函数/原型混合方式
  • 相关阅读:
    个人图床【Gitee+PicGo(+Typora)】
    java 对象序列化
    @RequestParam和@PathVariable
    restful架构
    数组跟切片的区别
    为什么java支持 一个类实现多个接口;但是只能继承一个类
    == 与equals区别
    static代码块是先加载的,不能用成员变量。可以new。
    @Configuration和 @Bean
    Thymeleaf 常用th标签基础整理
  • 原文地址:https://www.cnblogs.com/nnbw/p/7280140.html
Copyright © 2011-2022 走看看