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('弟弟');//第一个实例修改后引用类型，保持了共享，会影响box2alert(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：以上为动态原型模式，注意，不可以再使用字面量的方式重写原型，因为会切断实例和新原型之间的联系，之前上文已经说明了！