深入理解JS原型與原型鏈

風中告退發表於2020-04-19

函式的prototype

1.函式的prototype屬性

*每個函式都有一個prototype屬性,它預設指向一個Object空物件(即稱為原型對 )

* 原型物件中都有一個屬性constructor,它指向函式物件。

 

2.給原型物件新增屬性(一般是方法)

* 作用: 函式的所有例項物件自動擁有原型中的屬性(方法)

 

 

顯式原型與隱式原型

1. 每個函式function都有一個prototype,即顯式原型(屬性)

2. 每個例項物件都有一個__proto__,可稱為隱式原型(屬性)

3. 物件隱式原型的值為其對應建構函式的顯式原型的值

 

 

4.記憶體結構圖

 

 

 

 

5.總結:

* 函式的prototype屬性:在定義函式時自動新增,預設值是一個空Object物件

* 物件的__proto__屬性: 建立物件時自動新增的,預設值為建構函式的prototype屬性值

* 程式設計師能直接操作顯示原型,但不能直接操作隱式原型(ES6之前)

 

 

原型鏈

 

 * 訪問一個物件的屬性時,

 * 先在自身屬性中查詢,找到返回

* 如果沒有,再沿著__proto__這條鏈向上查詢,找到返回

* 如果最終沒找到,返回undefined

* 別名:隱式原型鏈

* 作用:查詢物件的屬性(方法)  ps:查詢變數的屬性用 作用域鏈

 

 

1.原型鏈(圖解)

 

 

 

 

2.建構函式/原型/實體物件的關係(圖解)

 

 

 

 

function Foo(){ }的本質是 var Foo = new Function()

 Function = new Funtion()

(只有這樣  它自身的顯式原型和隱式原型才是相等的 別的函式沒有這個特點)

 

例項物件的隱式原型屬性=建構函式的顯式原型屬性

 

所有函式的隱式原型__proto__都應該相等。都等於Function.prototype

* 因為所有函式都是new Function() 產生的。

 

 

3.建構函式/原型/實體物件的關係2(圖解)

 

 

 

 

原型鏈補充

 

1. 函式的顯式原型指向的物件預設是空Object例項物件(Object不滿足)

 

 

 

 

2.所有函式都是Function的例項(包含Funtion)

 

 

 

 

 

 

原型鏈 屬性問題

1.(隱式)原型鏈是(物件)用來查詢屬性值的

  *讀取物件的屬性時:會自動到原型鏈中查詢

2.設定物件的屬性值時,不會查詢原型鏈,直接新增此屬性並設定值。

    3.方法一般定義在原型中,屬性一般通過建構函式定義在物件身上。   

 

相關文章