為什么需要prototype

0xE7A38A 發(fā)布于2019-08-21 12:27 / 1411人閱讀

摘要：但要講原型就必須講構(gòu)造函數(shù)，講構(gòu)造函數(shù)就必須講對象。所以我們是無法容忍這么愚蠢的事情發(fā)生的，因此就有了構(gòu)造函數(shù)，跟類有點相似，但我們這里不討論類。

首先，上一篇文章詳細分析了原型屬性和自身屬性的區(qū)別，但為了讓大家更明白一點，所以這里講一下為什么需要原型。但要講原型就必須講構(gòu)造函數(shù)，講構(gòu)造函數(shù)就必須講對象。首先來看看對象。

新建一個對象的方法： 1.new Object:


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

這種方法看上去很蠢，所以我們找到另一種方法：使用literal直接創(chuàng)建，看上去要優(yōu)雅得多：

2.literal


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

使用literal來常見對象似乎很不錯，比較直觀，兩個卷括號括起來就是個對象嘛，多清晰明了。但是如果你要創(chuàng)建一系列結(jié)構(gòu)類似的對象，難道要這樣一個個寫嗎？作為程序員我們的遵循的理念就是盡可能減少重復(fù)，也就是著名的DRY(Don"t Repeat Youself)。所以我們是無法容忍這么愚蠢的事情發(fā)生的，因此就有了構(gòu)造函數(shù)，跟類有點相似，但我們這里不討論類。構(gòu)造函數(shù)就是建立一個模板，不綁定數(shù)據(jù)，只提供架構(gòu)，你只需把相關(guān)數(shù)據(jù)填充到模板里就可以生成一個新的對象了：

3.構(gòu)造函數(shù)

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

上面代碼中，new是一個構(gòu)造器，NewObj是我們創(chuàng)建好的模板，填入數(shù)據(jù)，賦給變量newObj1，ok，新的對象就這樣生成了。

到此創(chuàng)建對象的方法似乎已經(jīng)很不錯了，但仔細觀察我們還發(fā)現(xiàn)了新的問題：對于changeColor()這個方法事實上對所有instance來說是相同的，也就是說可以共享，不像name和color那樣需要綁定給每個instance。而構(gòu)造函數(shù)這種形式每次都會把自身的屬性全部copy一份給每個instance，這就造成了不必要的浪費；并且，當(dāng)我們想修改這個方法時，就必須重新生成所有的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

我現(xiàn)在想修改changNum()這個函數(shù)：


function NewObj(name,num){
    this.name = name;
    this.num = num;
    this.changNum = function(c){
        this.num = c*2;
    }
}
newObj1.changNum(100);
newObj1.num; //依然是100，也就是說這個對象并不受我們修改的模板影響到

怎么解決這個問題呢？有一個原型對象。原型對象里的屬性和方法并不是像構(gòu)造函數(shù)自身屬性一樣copy給每個instance，而是“引用”，也可以理解為給每個instance提供一個指向該原型對象的指針，這樣每個instance就能找到原型對象里的屬性，而很明顯，這是一種共享，也就是說，當(dāng)你修改了這個原型里的屬性，那么所有共享該屬性的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了。

為什么一般情況下會把屬性直接寫在構(gòu)造函數(shù)內(nèi)，而方法通過prototype添加呢？這兩種方式的區(qū)別上面其實已經(jīng)有所展現(xiàn)了：大部分的instance的屬性都是不同的，比如說name，因此在構(gòu)造函數(shù)內(nèi)通過this直接綁定給instance無疑是個好方案，而方法通常是通用的，使用prototype可以讓每個instance共享同一個方法，而不用每個都copy一次，又能實現(xiàn)實時更新。