JavaScript中原型與原型鏈
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
圖6-1展示了Person建構函式、Person的原型屬性以及Person現有的兩個例項之間的關係
2、建構函式、原型物件和例項的關係
每個建構函式都有一個原型物件,原型物件都包含一個指向建構函式的指標,而例項都包含一個指向原型物件的內部指標。
這個關係圖形象直觀的表示了三者間指標的指向。我覺得理解並牢記這張圖非常重要。
額外補充一點:我們可以在程式碼中通過例項.constructor拿到建構函式,這樣看起來圖裡缺少一個由例項直接指向建構函式的.constructor指標箭頭,分析本質後發現實際不需要加一個例項到建構函式的箭頭。因為例項物件本身並沒有.constructor指標,例項物件實際還是呼叫的原型物件的.constructor指標獲取到建構函式。
3、原型鏈
原型鏈是實現整合的主要方法。通過讓原型物件等於另一個型別的例項。顯然,此時的原型物件將包含一個指向另一個原型的指標,相應地,另一個原型中也包含著一個指向另一個建構函式的指標。假如另一個原型又是另一個型別的例項,那麼上述關係依然成立,如此層層遞進,就構成了實力與原型的鏈條。這就是所謂原型鏈的基本概念。
相關文章
- JavaScript原型與原型鏈JavaScript原型
- JavaScript 原型 與 原型鏈JavaScript原型
- javascript——原型與原型鏈JavaScript原型
- javascript之原型與原型鏈JavaScript原型
- 7. JavaScript 原型與原型鏈JavaScript原型
- JavaScript系列之原型與原型鏈JavaScript原型
- 再解 JavaScript 原型與原型鏈JavaScript原型
- JavaScript中的原型、原型鏈、原型模式JavaScript原型模式
- 深入JavaScript系列(六):原型與原型鏈JavaScript原型
- JavaScript 原型及原型鏈JavaScript原型
- JS中的原型與原型鏈JS原型
- 原型與原型鏈原型
- javascript - 繼承與原型鏈JavaScript繼承原型
- JavaScript 原型鏈JavaScript原型
- [JavaScript]原型、原型鏈、建構函式與繼承JavaScript原型函式繼承
- 原型物件與原型鏈原型物件
- JS 原型與原型鏈JS原型
- 如何理解JavaScript的原型和原型鏈?JavaScript原型
- 徹底搞懂JavaScript原型和原型鏈JavaScript原型
- JavaScript之原型鏈JavaScript原型
- 原型、原型鏈與繼承原型繼承
- 從問題入手,深入瞭解JavaScript中原型與原型鏈JavaScript原型
- 理解js中的原型,原型物件,原型鏈JS原型物件
- JavaScript教程全套影片合集:原型及原型鏈JavaScript原型
- 【機制】JavaScript的原型、原型鏈、繼承JavaScript原型繼承
- JS原型與原型鏈圖解JS原型圖解
- javascript基礎-原型鏈與繼承JavaScript原型繼承
- 由一張圖來理解javascript中的原型和原型鏈JavaScript原型
- 【Javascript 基礎】原型鏈JavaScript原型
- JavaScript從原型到原型鏈,細緻講解JavaScript原型
- 深入理解JS原型與原型鏈JS原型
- 深入理解JavaScript原型鏈與繼承JavaScript原型繼承
- 徹底搞清楚 JavaScript 的原型和原型鏈JavaScript原型
- 原型和原型鏈原型
- JavaScript進階之原型鏈JavaScript原型
- javascript原型鏈及繼承JavaScript原型繼承
- JavaScript原型鏈汙染探討JavaScript原型
- 面試之JS篇 - 原型與原型鏈面試JS原型