一次性搞懂js中的原型與原型鏈

YiHzo發表於2018-11-28
JS原型

Xnip2018-11-19_15-57-40.jpg | center | 747x479

建構函式：function Foo ( ) { };

例項物件：let f1=new Foo;
複製程式碼
  1. 談到繼承時，JavaScript 只有一種結構：物件
  2. 每個函式都有 prototype 屬性，除了 Function.prototype.bind()，該屬性指向原型。

prototype

每一個JavaScript物件(null除外)在建立的時候就會與之關聯另一個物件，這個物件就是我們所說的原型，每一個物件都會從原型"繼承"屬性。

函式的 prototype 屬性指向了一個物件，這個物件正是呼叫該建構函式而建立的例項的原型，也就是這個例子中的 f1 的原型。prototype帶有__proto__和constructor

proto

每一個JavaScript物件(除了 null )都具有的一個屬性，叫__proto__，這個屬性會指向了建立該物件的建構函式的原型。

console.log(f1._proto_ === Foo.prototype) // true
複製程式碼

constructor

每個原型都有一個 constructor 屬性指向關聯的建構函式

由於例項物件可以繼承原型物件的屬性，所以例項物件也擁有constructor屬性，同樣指向原型物件對應的建構函式。

console.log(Foo.prototype.constructor === Foo);//true
console.log(f1.constructor === Foo);//true
console.log(f1.hasOwnProperty('constructor'));//false
複製程式碼

原型鏈

JS在建立物件（不論是普通物件還是函式物件）的時候，都有一個叫做__proto__的內建屬性，用於指向建立它的函式物件的原型物件prototype。以上面的例子為例：

console.log(fo.__proto__  === Foo.prototype)  //true
複製程式碼

同樣Foo.prototype也有proto屬性

console.log(Foo.prototype.__proto__ === Object.prototype)  //true
複製程式碼

Object.prototype物件也有proto屬性，但它比較特殊，為null

console.log(Object.prototype.__proto__ === null)
複製程式碼

我們把這個有proto串起來的直到Object.prototype.proto為null的鏈叫做原型鏈。原型鏈的形成是真正是靠proto 而非prototype

總結

  • 每個建構函式都有一個原型物件

    Foo.prototype
複製程式碼

  • 原型物件都包含一個指向建構函式的指標

    Foo.prototype.constructor === Foo
複製程式碼

  • 例項都包含一個指向原型物件的內部指標

    fo.__proto__  === Foo.prototype
複製程式碼

更多文章請前往語雀

相關文章