js難點精解-----原型和原型鏈的關係和應用

MrITzhongzi發表於2018-01-11

首先,要明確,在js中:

 1、每個函式物件都有一個 prototype屬性,我們稱之為原型屬性

 2、每個物件都有一個 __proto__ 屬性,(其實是指向他建構函式的原型)

 3、所有的原型物件都有constructor屬性,該屬性對應建立所有指向該原型的例項的建構函式

 4、函式物件和原型物件通過prototype和constructor屬性進行相互關聯.
複製程式碼

在js中,“萬物皆物件”,函式物件也是物件的一種。

對於新手來說,最難理解的就是prototype 和 proto 之間的關係。

先看區別:(盜個個人覺得還不錯的圖)

js難點精解-----原型和原型鏈的關係和應用

看如下demo:

functionPerson(){}

var will =newPerson()
複製程式碼

它所對應的的原型圖如下:

js難點精解-----原型和原型鏈的關係和應用

原型圖解析:

1、 我們建立了一個 函式物件 叫做 Person,這個物件有 proto 和 prototype屬性

2、 Person.prototype 是該函式的原型物件,該物件有 constructor 屬性指向原函式物件,和__proto__指向 他原函式物件的 “父” 函式的原型物件,即Object.Protytype.

3、 我們知道js中所有的物件都是繼承自 Object,就是圖中 的 function Object,該物件為 最頂級函式物件,所有的物件的__proto__屬性最終都指向了該物件的原型物件。即Object.prototype

4、 另外所有的函式物件都是繼承自 Function的原型,Object也是一個函式物件,所以Object.protu === Function.prototype. 也是指向了 Function的原型

5、 對於Function 函式物件,他和所有其他函式物件一樣有個__proto__指向了 Function.prototype, 而Function的原型中有constructor屬性指向 Function物件。即 Function.proto === Function.prototype. Function === Function.Prototype.constructor

6、 同樣在 頂級物件Object 的原型屬性中也有 constructor屬性指向 頂級物件本身。即 Object === Object.prototype.constructor.

7、 再看Persopn函式物件,Person有個一 __proto__指向 Function的原型,有個prototype屬性指向了 他自己的原型。在Person的原型中,有 constructor屬性指向 Person,有__proto__屬性指向了Object的原型,即 Person === Person.prototype.constructor。 Person.proto === Function.prototype

8、 最後看一下通過Person建立的will物件。這個物件 有一個 __proto__屬性指向它建構函式的原型。即will.proto === Person.prototype

(ps: 以上說的可能有點囉嗦,但是需要你每一句都精度完之後,就應該能理解物件的原型和原型鏈,以及js中的繼承關係)

原型鏈的行程原理我們已經分析完了,下面看一下一個示例demo:

varA=function(){};

var a =newA();

console.log(a.__proto__); //A {}(即構造器function A 的原型物件)

console.log(a.__proto__.__proto__);//Object {}(即構造器function Object 的原型物件)

console.log(a.__proto__.__proto__.__proto__);//null
複製程式碼

上述程式碼的繼承關係如下圖:

js難點精解-----原型和原型鏈的關係和應用

補充:

瀏覽器查詢js物件中的屬性的順序:

A、查詢本物件中可列舉的屬性,有的話就返回,沒有的話執行B

B、再去查詢父 proto,從父元素繼承的屬性中可列舉的屬性,有的話就返回,沒有的話執行C

C、父物件的原型中也沒有物件的屬性的話,繼續找找父元素的__proto__,查詢父元素從父父元素(父元素的父元素)的可列舉屬性,有的話就返回,沒有的話繼續按照繼承原型鏈向上查詢,直到頂級物件 Object

D、如果頂級物件Object中的可列舉屬性中有該屬性的話就返回,沒有的話就返回undefined

相關文章