畫一個原型鏈的圖示，並配合程式碼進行講解原型鏈。

我們先給出用於講解原型鏈的class案例：

//父類
class People {
  constructor(name) {
    this.name = name
  }
  eat(){
    console.log(`${this.name} eat something`)
  }
}

//子類
class Student extends People {
  constructor(name, number) {
    super(name)
    this.number = number
  }
  sayHi(){
    console.log(`姓名 ${this.name} 學號 ${this.number}`)
  }
}
//通過類宣告物件/例項
const xialuo = new Student('夏洛', 100)
 

首先，我們先分析一下上面建立的class的型別：

// class 實際上是函式，可見是語法糖
typeof People // 'function'
typeof Student // 'function'

語法糖的解釋

（一）在瞭解了class其實是函式後，我們再瞭解一下隱式原型和顯示原型：

// 隱式原型和顯示原型
console.log(xialuo.__proto__) //xialuo是Student的例項
console.log(Student.prototype)
console.log(xialuo.__proto__ === Student.prototype)

檢視列印結果：

可以得到一個初步的圖示：

（二）接著，我們再次列印：

console.log(Student.prototype.__proto__)
console.log(People.prototype) //People是Student的父類
console.log(Student.prototype.__proto__ === People.prototype)

因此我們可以得到如下的原型關係：

• 子類的prototype的__proto__指向其父類的prototype

可以得到下圖：

（三）之後，我們再進一步：

console.log(People.prototype.__proto__)
console.log(Object.prototype)
console.log(People.prototype.__proto__ === Object.prototype)
 

列印結果如下：

可以得到下圖：

總結

原型關係：

• 每個class都有顯式原型 prototype
• 每個例項都有隱式原型__proto__
• 例項的__proto__指向對應class的 prototype

基於原型的執行規則：

• 獲取屬性xialuo.name或執行方法xialuo.sayHI()時
• 先在自身屬性和方法尋找
• 如果找不到則自動去__proto__尋找