JavaScript原型的缺点及改进

原型的缺点

function Box() {}
Box.prototype = {
    constructor:Box,
    name: 'GuoYu',
    age: 20,
    family: ['哥哥','姐姐','妹妹'],
    run: function() {
        return this.name + this.age + 'is running...';
    }
};
var box1 =  new Box();
alert(box1.name);

数落以上代码的缺点：

1. 在原型里都赋值了，不可能每个人都叫guoyu，都是20岁
2. box1.family.push(‘弟弟’);之后后面的box2也有了弟弟，这显然是不对的
3. 构造函数不能传参，因为单独写在prototype中

function Box() {}
Box.prototype = {
    constructor:Box,
    name: 'GuoYu',
    age: 20,
    family: ['哥哥','姐姐','妹妹'],
    run: function() {
        return this.name + this.age + 'is running...';
    }
};
var box1 =  new Box();
box1.family.push('弟弟');//第一个实例修改后引用类型，保持了共享，会影响box2
alert(box1.family);//'哥哥','姐姐','妹妹','弟弟'
var box2 = new Box();
alert(box2.family);//'哥哥','姐姐','妹妹','弟弟' ，共享了box1添加后的引用类型的原型

为了解决构造传参合共享问题，组合采用：构造函数 + 原型 模式，需要独立的部分用构造函数，需要共享的部分用原型。

function Box() {}
//保持共享的用原型
Box.prototype = {
    constructor:Box,
    run: function() {
        return this.name + this.age + 'is running...';
    }
};
var box1 = new Box('guoyu', 28);
box1.family.push('弟弟');
alert(box1.family);//'哥哥','姐姐','妹妹','弟弟'

var box2 = new Box('Jack', 30);
alert(box2.family);//'哥哥','姐姐','妹妹' 引用类型没有使用共享，所以没有共享

以上虽然解决了传参和共享带来的一些问题，但是，构造函数 + 原型部分很怪异，最好是把构造函数和原型封装在一起，为了达到这个效果，使用动态原型模式。我们知道：原型的初始化，只要第一次初始化就可以了，没有必要每次new出一个新实例都要重新初始化，比如，new出box1的时候，第一次嘛，可以初始化一次，但是再new 出box2的时候，原型又初始化一次，事实上是不允许这样的，太浪费资源了，效率太差，如下：

function Box(name, age) {
    this.name = name;
    this.age = age;
    this.family = ['哥哥','姐姐','妹妹'];
    alert('原型初始化开始');
    Box.prototype.run = function() {
        return this.name + this.age + 'is running...';
    };
    alert('原型初始化结束');
}

var box1 = new Box('guoyu', 28);//弹出 开始  结束
var box2 = new Box('Jack', 30);//弹出 开始  结束 ，这一次其实已经没必要了

解决方案，仅在第一次调用构造函数的时候初始化

function Box(name, age) {
    this.name = name;
    this.age = age;
    this.family = ['哥哥','姐姐','妹妹'];

    //判断this.run是否存在，第一次肯定不存在，以后就存在了，因为后面新new的实例会继续调用构造函数
    if (typeof this.run != 'function') {
        alert('原型初始化开始');
        Box.prototype.run = function() {
            return this.name + this.age + 'is running...';
        };
        alert('原型初始化结束');
    }
}

var box1 = new Box('guoyu', 28);//弹出 开始  结束
var box2 = new Box('Jack', 30);//不再弹出 开始  结束 ，这一次其实已经没必要了

PS：以上为动态原型模式，注意，不可以再使用字面量的方式重写原型，因为会切断实例和新原型之间的联系，之前上文已经说明了！