为什么需要prototype

2024年5月9日 299次阅读 来源: Enm

首先，上一篇文章详细分析了原型属性和自身属性的区别，但为了让大家更明白一点，所以这里讲一下为什么需要原型。但要讲原型就必须讲构造函数，讲构造函数就必须讲对象。首先来看看对象。

新建一个对象的方法：

1.new Object:


var newObj = new Object;
newObj.name = "keti";
newObj.color = "red";
newObj.changeColor = function(color){
    newObj.color = color;
}

这种方法看上去很蠢，所以我们找到另一种方法：使用literal直接创建，看上去要优雅得多：

2.literal


var newObj = {
    name: "keti";
    color: "red";
    changeColor: function(color){
        newObj.color = color;
    }
}

使用literal来常见对象似乎很不错，比较直观，两个卷括号括起来就是个对象嘛，多清晰明了。但是如果你要创建一系列结构类似的对象，难道要这样一个个写吗？作为程序员我们的遵循的理念就是尽可能减少重复，也就是著名的DRY(Don’t Repeat Youself)。所以我们是无法容忍这么愚蠢的事情发生的，因此就有了构造函数，跟类有点相似，但我们这里不讨论类。构造函数就是建立一个模板，不绑定数据，只提供架构，你只需把相关数据填充到模板里就可以生成一个新的对象了：

3.构造函数

function NewObj(name,color){
    this.name = name;
    this.color = color;
    this.changeColor = function(c){
        this.color = c;
    }
}
var newObj1 = new NewObj("keti","red");

上面代码中，new是一个构造器，NewObj是我们创建好的模板，填入数据，赋给变量newObj1，ok，新的对象就这样生成了。

到此创建对象的方法似乎已经很不错了，但仔细观察我们还发现了新的问题：对于changeColor()这个方法事实上对所有instance来说是相同的，也就是说可以共享，不像name和color那样需要绑定给每个instance。而构造函数这种形式每次都会把自身的属性全部copy一份给每个instance，这就造成了不必要的浪费；并且，当我们想修改这个方法时，就必须重新生成所有的instance才能获得更新，比如说：


function NewObj(name,num){
    this.name = name;
    this.num = num;
    this.changNum = function(c){
        this.num = c;
    }
}
var newObj1 = new NewObj("kemi",10);
newObj1.changNum(100);
newObj1.num; //很明显是100

我现在想修改changNum()这个函数：


function NewObj(name,num){
    this.name = name;
    this.num = num;
    this.changNum = function(c){
        this.num = c*2;
    }
}
newObj1.changNum(100);
newObj1.num; //依然是100，也就是说这个对象并不受我们修改的模板影响到

怎么解决这个问题呢？有一个原型对象。原型对象里的属性和方法并不是像构造函数自身属性一样copy给每个instance，而是“引用”，也可以理解为给每个instance提供一个指向该原型对象的指针，这样每个instance就能找到原型对象里的属性，而很明显，这是一种共享，也就是说，当你修改了这个原型里的属性，那么所有共享该属性的instance都能获得这个修改。因此，原型恰好解决了上面提到的两个问题。


function NewObj(name,num){
    this.name = name;
    this.num = num;
}
NewObj.prototype.changNum = function(c){
        this.num = c;
        }
var newObj1 = new NewObj("kemi",10);
newObj1.changNum(100);
newObj1.num; //很明显是100
NewObj.prototype.changNum = function(c){
        this.num = c*2;
        }//我们重新修改一下这个方法
newObj1.changNum(100);
newObj1.num; //变成200了。

为什么一般情况下会把属性直接写在构造函数内，而方法通过prototype添加呢？这两种方式的区别上面其实已经有所展现了：大部分的instance的属性都是不同的，比如说name，因此在构造函数内通过this直接绑定给instance无疑是个好方案，而方法通常是通用的，使用prototype可以让每个instance共享同一个方法，而不用每个都copy一次，又能实现实时更新。

    原文作者：Enm
    原文地址: https://segmentfault.com/a/1190000000653327
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞