1. 程式人生 > 程式設計 >詳解JavaScript中的原型和原型鏈

詳解JavaScript中的原型和原型鏈

目錄
  • 原型鏈圖
  • 原型必備知識
  • prototype屬性(顯示原型)
  • proto屬性(隱式原型)www.cppcns.com
  • constructor屬性
  • 總結

原型鏈圖

在這裡插入圖片描述

原型必備知識

要了解原型就必須搞清三個屬性:__proto__prototype constructor

1.__proto__、 constructor屬性是物件所獨有TRzyhwIcT的;

2.prototype屬性是函式獨有的;

3.中函式也是物件的一種,那麼函式同樣也有屬性__proto__、 constructor;

原型五大規則:

1.所有引用型別(物件,陣列,函式)都具有物件特性,即可以自由擴充套件屬性

2.所有引用型別(物件,陣列,函式)都具有一個__proto__(隱式原型)屬性,是一個普通物件

3.所有的函式都具有prototype(顯式原型)屬性,也是一個普通物件

4.所有引用型別(物件,陣列,函式)__proto__值指向它建構函式的prototype

5.當試圖得到一個物件的屬性時,如果變數本身沒有這個屬性,則會去他的__proto__中去找

prototype屬性(顯示原型)

首先建立一個建構函式

var Parent = function(){
}
//定義一個函式,那它只是一個普通的函式
var p1 = new Parent();
//通過關鍵字new,Parent成為建構函式
//建立了一個Parent建構函式的例項 p1

prototype是函式獨有的屬性,通過這個屬性就能訪問到原型;

prototype設計之初就是為了實現繼承,讓由特定函式建立的所有例項共享屬性和方法,也可以說是讓某一個建構函式例項化的所有物件可以找到公共的方法和屬性。有了prototype我們不需要為每一個例項建立重複的屬性方法,而是將屬性方法建立在建構函式的原型物件上(prototype)。那些不需要共享的才建立在建構函式中。

Parent是建構函式,Parent.prototype就是原型

在這裡插入圖片描述

Parent.prototype上新增的屬性和方法叫做原型屬性和原型方法,該建構函式的例項都可以訪問呼叫。

proto屬性(隱式原型)

__proto__屬性是物件(包括函式)獨有的。

每個物件都有__proto__屬性,該屬性指向的就是該物件的原型物件。

p1.__proto__ === Parent.prototype; // true

__proto__通常稱為隱式原型,prototype通常稱為顯式原型,可以說一個物件的隱式原型指向了該物件的建構函式的顯式原型。那麼在顯式原型上定義的屬性方法,通過隱式原型傳遞給了建構函式的例項。這樣一來例項就能很容易的訪問到建構函式原型上的方法和屬性了。

Parent.prototype的隱式原型指向了物件原型

Parent.prototype.__proto__ === Object.prototype; //true

在這裡插入圖片描述

這裡引出原型鏈的概念,當呼叫p1.toString()的時候,先在p1物件本身尋找,沒有找到則通過p1.__proto__找到了原型物件Parent.prototype,也沒有找到,又通過Parent.prototype.__proto__找到了上一層原型物件Object.prototype。在這一層找到了toStriwww.cppcns.comng方法。返回該方法供p1使用。

當然如果找到Object.prototype上也沒找到,就在Object.prototype.__proto__中尋找,但是Object.prototype.__proto__ === null所以就返回undefined。這就是為什麼當訪問物件中一個不存在的屬性時,返回undefined了。

constructor屬性

既然建構函式通過 prototype 來訪問到原型,那麼原型也應該能夠通過某種途徑訪問到建構函式,這就是 constructor。

如前面的例子p1就是一個物件,那p1的建構函式就是Parent()。Parent的建構函式是Funwww.cppcns.comction()

p1.constructor => f Parent{}
Parent.construtor => f Function() { [native code] }
Function.constructor =>  Function() { [native code] }

Function是所有函式的根建構函式。

通過例子可以看到,p1的constructor屬性指向了Parent,那麼Parent就是p1的建構函式。同樣Parent的constructor屬性指向了Function,那麼Function就是Parent的建構函式,然後又驗證了Function就是根建構函式。

在這裡插入圖片描述

總結

本篇文章就到這裡了,希望能夠給你帶來幫助,也希望您能夠http://www.cppcns.com多多關注我們的更多內容!