JavaScript中原型與原型鏈

weixin_33728268發表於2018-09-25

1、原型模式建立物件

我們建立的每個函式都有一個prototype(原型)屬性,這個屬性是一個指標,指向一個物件,而這個物件的用途是包含可以有由特定型別的所有例項共享的屬性和方法。如果按照字面意思來理解,那麼prototype就是通過呼叫建構函式而建立的那個物件例項的原型物件。使用原型的好處是可以讓所有物件例項共享所包含的屬性和方法。換句話說,不必在建構函式中定義物件例項的資訊,二是可以將這些資訊直接新增到原型物件中,如下面的例子所示。

function Person(){

}

Person.prototype.name = "Nicholas";

Person.prototype.age = 29;

Person.prototype.job = "Software Engineer";

Person.prototype.sayName = function(){

    alert(this.name);

}

var person1 = new Person();

person1.sayName();       //"Nicholas"

var person2 = new Person();

person2.sayName();        //"Nicholas"

alert(person1.sayName == person2.sayName);        //true


4347888-26f73813b9bc855a.png
Person建構函式、Person的原型屬性以及Person現有的兩個例項之間的關係

圖6-1展示了Person建構函式、Person的原型屬性以及Person現有的兩個例項之間的關係

2、建構函式、原型物件和例項的關係

每個建構函式都有一個原型物件,原型物件都包含一個指向建構函式的指標,而例項都包含一個指向原型物件的內部指標。


4347888-510152b377f6dd1e.png
三者關係

這個關係圖形象直觀的表示了三者間指標的指向。我覺得理解並牢記這張圖非常重要。

額外補充一點:我們可以在程式碼中通過例項.constructor拿到建構函式,這樣看起來圖裡缺少一個由例項直接指向建構函式的.constructor指標箭頭,分析本質後發現實際不需要加一個例項到建構函式的箭頭。因為例項物件本身並沒有.constructor指標,例項物件實際還是呼叫的原型物件的.constructor指標獲取到建構函式。

3、原型鏈

原型鏈是實現整合的主要方法。通過讓原型物件等於另一個型別的例項。顯然,此時的原型物件將包含一個指向另一個原型的指標,相應地,另一個原型中也包含著一個指向另一個建構函式的指標。假如另一個原型又是另一個型別的例項,那麼上述關係依然成立,如此層層遞進,就構成了實力與原型的鏈條。這就是所謂原型鏈的基本概念。


4347888-6047ce46ee1b6941.png
SubType繼承了SuperType,而SuperType繼承了Object

相關文章