【5】JavaScript 函數高級——原型與原型鏈深刻理解（圖解）

原型與原型鏈深刻理解（圖解）

原型（prototype）

函數的 prototype 屬性（圖）

• 每一個函數都有一個prototype屬性，它默認指向一個Object空對象（即稱爲：原型對象）
• 原型對象中有一個屬性constructor，它指向函數對象

給原型對象添加屬性（通常都是添加方法）

• 做用：函數的全部實例對象自動擁有原型中的屬性（方法）

顯式原型與隱式原型

• 每一個函數 function 都有一個prototype屬性，即 顯式原型
• 每一個實例對象都有一個__proto__，可稱爲隱式原型
• 實例對象的隱式原型的值 === 其對應構造函數的顯示原型的值
• 內存結構（圖）

• 總結：

  • 函數的 prototype 屬性：在定義函數時自動添加的，默認值是一個空的Object對象
  • 對象的__proto__屬性：建立對象時自動添加的，默認值爲構造函數的prototype屬性值
  • 程序員能直接操做顯示原型，但不能直接操做隱式原型（ES6以前）

原型鏈

原型鏈（圖解）

• 訪問一個對象的屬性時，

  • 先在自身屬性中查找，找到返回
  • 若是自身屬性中沒有，再沿着__proto__這條鏈向上查找，找到返回
  • 若是最終沒有找到，返回undefined
• 原型鏈的別名：隱式原型連
• 原型鏈的做用：查找對象的屬性（方法）

構造函數/原型/實例對象的關係（圖解）

var o1 = new Object()

var o2 = {}

構造函數/原型/實例對象的關係2（圖解）

下面這個圖須要仔細理解。

原型繼承

• 構造函數的實例對象自動擁有構造函數原型對象的屬性（方法）
• 利用的就是原型鏈

原型鏈——屬性問題

• 讀取對象的屬性值時：會自動到原型鏈中查找
• 設置對象的屬性值時：不會查找原型鏈，若是當前對象中沒有此屬性，直接添加此屬性並設置其值
• 方法通常定義在原型中，屬性通常經過構造函數定義在對象自己上。

探索 instanceof

instanceof是如何判斷的？

• 表達式：A instanceof B
• 若是B函數的顯式原型對象在A對象的(隱式)原型鏈上，返回true，不然返回false

Function是經過new本身產生的實例

案例1

function Foo() {  }
var f1 = new Foo();
console.log(f1 instanceof Foo); // true
console.log(f1 instanceof Object); // true

案例2(重要)

console.log(Object instanceof Function); // true 
console.log(Object instanceof Object); // true
console.log(Function instanceof Function); // true
console.log(Function instanceof Object); // true

function Foo() {}
console.log(Object instanceof  Foo); // false

注意：Function的顯示原型和隱式原型是同樣的。

面試題

測試題1

var A = function() { }
A.prototype.n = 1
var b = new A()
A.prototype = {
  n: 2,
  m: 3
}
var c = new A()
console.log(b.n, b.m, c.n, c.m) // 1 undefined 2 3

測試題2

var F = function(){};
Object.prototype.a = function(){
  console.log('a()')
};
Function.prototype.b = function(){
  console.log('b()')
};
var f = new F();
f.a() // a()
f.b() // 報錯  f.b is not a function
F.a() // a()
F.b() // b()

對照下圖理解：