美文网首页
js面向对象(六)原型方式创建对象和类

js面向对象(六)原型方式创建对象和类

作者: bug喵 | 来源:发表于2018-07-01 17:00 被阅读0次

    3.原型方式

    该方式利用了对象的 prototype 属性,可以把它看成创建新对象所依赖的原型。

    这里,首先用空构造函数来设置类名。然后所有的属性和方法都被直接赋予 prototype 属性。我们重写了前面的例子,代码如下:

    function Car() {
    }
    Car.prototype.color = "blue";
    Car.prototype.doors = 4;
    Car.prototype.mpg = 25;
    Car.prototype.showColor = function() {
      alert(this.color);
    };
    var oCar1 = new Car();
    var oCar2 = new Car();
    

    在这段代码中,首先定义构造函数(Car),其中无任何代码。接下来的几行代码,通过给 Car 的 prototype 属性添加属性去定义 Car 对象的属性。调用 new Car() 时,原型的所有属性都被立即赋予要创建的对象,意味着所有 Car 实例存放的都是指向 showColor() 函数的指针。从语义上讲,所有属性看起来都属于一个对象,因此解决了前面两种方式存在的问题。

    此外,使用这种方式,还能用 instanceof 运算符检查给定变量指向的对象的类型。因此,下面的代码将输出 TRUE:

    alert(oCar1 instanceof Car);    //输出 "true"
    

    原型方式的问题

    原型方式看起来是个不错的解决方案。遗憾的是,它并不尽如人意。

    首先,这个构造函数没有参数。使用原型方式,不能通过给构造函数传递参数来初始化属性的值,因为 Car1 和 Car2 的 color 属性都等于 "blue",doors 属性都等于 4,mpg 属性都等于 25。这意味着必须在对象创建后才能改变属性的默认值,这点很令人讨厌,但还没完。真正的问题出现在属性指向的是对象,而不是函数时。函数共享不会造成问题,但对象却很少被多个实例共享。请思考下面的例子:

    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"。

    由于创建对象时有这么多问题,你一定会想,是否有种合理的创建对象的方法呢?答案是有,需要联合使用构造函数和原型方式。

    相关文章

      网友评论

          本文标题:js面向对象(六)原型方式创建对象和类

          本文链接:https://www.haomeiwen.com/subject/jufhuftx.html