7. JavaScript 原型與原型鏈

LemonSea發表於2020-02-11
JavaScript原型

原型與原型鏈

  • 原型：JavaScript 中原型是一個 prototype 物件，用於表示型別間的關係。
  • 原型鏈：JavaScript 中萬物皆是物件，物件和物件之間也有關係，並不是孤立存在的。物件之間的繼承關係，在 JavaScript 中也是通過 prototype 物件指向父類物件，直到指向 Object 物件為止，這樣就形成了一個原型指向的鏈條，專業術語稱之為原型鏈。
var a = 【1，2，3】
a._proto_ = Array.prototype；  //ture
複製程式碼

原型有顯示原型與隱式原型：

  • 顯式原型：prototype
  • 隱式原型：__ptoto__
  • 通過判斷下級的 __proto__ 是否等於上級的 prototype 來進行繼承的判斷
var Person = function() {
  this.age = 18
  this.name = '匿名'
}
var Student = function() {}
//建立繼承關係,父類例項作為子類原型
Student.prototype = new Person()
var s1 = new Student()
console.log(s1)
複製程式碼

81223760

當試圖得到一個物件的某個屬性時，如果這個物件本身沒有這個屬性，那麼會去它的 proto（即它的建構函式的 prototype）中尋找。如果一直找到最上層都沒有找到，返回 undefined。

最上層：Object.prototype.__proto__ === null

81223761

prototype 和 proto 和 constructor

81223762

prototype 類中包含的方法是所有例項共享的方法（繼承的原理）。

首先，要明確幾個點：

1.在JS裡，萬物皆物件。方法（Function）是物件，方法的原型(Function.prototype)是物件。因此，它們都會具有物件共有的特點。

即：物件具有屬性__proto__，可稱為隱式原型，一個物件的隱式原型指向構造該物件的建構函式的原型，這也保證了例項能夠訪問在建構函式原型中定義的屬性和方法。

2.方法(Function)

方法這個特殊的物件，除了和其他物件一樣有上述__proto__屬性之外，還有自己特有的屬性——原型屬性（prototype，可稱為顯示原型），這個屬性是一個指標，指向一個物件，這個物件的用途就是包含所有例項共享的屬性和方法（我們把這個物件叫做原型物件）。原型物件也有一個屬性，叫做 constructor，這個屬性包含了一個指標，指回原建構函式。

81223763

1.建構函式 Foo()

建構函式的原型屬性 Foo.prototype 指向了原型物件，在原型物件裡有共有的方法，所有建構函式宣告的例項（這裡是f1，f2）都可以共享這個方法。

2.原型物件 Foo.prototype

Foo.prototype（是一個指標指向一個物件）儲存著例項共享的方法，有一個指標 constructor 指回建構函式。

3.例項

f1和f2是Foo這個物件的兩個例項，這兩個物件也有屬性__proto__，指向它的建構函式的原型物件唄。函式的建構函式不就是Function嘛，因此這裡的__proto__指向了Function.prototype。

另外：

建構函式Foo()除了是方法，也是物件啊，它也有__proto__屬性，指向誰呢？指向它的建構函式的原型物件唄。函式的建構函式不就是 Function 嘛，因此這裡的__proto__指向了 Function.prototype。

總結

1.物件有屬性**__proto__,指向該物件的建構函式的原型物件。**

2.方法除了有屬性__proto__,還有屬性prototype，prototype指向該方法的原型物件。

相關文章