02------JS函數高級之原型與原型鏈

原型和原型鏈

1.原型

函數的prototype屬性

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

//每個函數都有一個prototype屬性，它默認指向一個Object空對象（即原型對象）
console.log(Date.prototype)
console.log(typeof Date.prototype) //object
// 原型對象中都有一個construtor，它指向函數對象
console.log(Date.prototype.construtor === Date)

給原型對象增加屬性（一般都是方法）
作用：函數的所有實例對象自動擁有原型中的屬性（方法）

//給原型對象增加屬性（一般都是方法）,實例對象可以訪問
Fun.prototype.test = function () {
	console.log('test()')
}
var fun = new Fun()
fun.test()

2.顯示原型與隱式原型

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

function Fn() { //內部語句：this.prototype = {}

}
//顯示原型
console.log(Fn.prototype)
//隱式原型
var fn = new Fn() // 內部語句：this.__proto__ = Fn.prototype
console.log(fn.__proto__)
//對象的隱式原型的值對應其構造函數的顯示原型的值
console.log(Fn.prototype === fn.__proto__) // true

可以參考結構圖理解：

總結：

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

3.原型鏈

原型鏈

• 訪問一個對象屬性時
  • 先在自身屬性中查找，找到返回
  • 如果沒有，再沿着__proro__這個鏈向上查找，找到返回
  • 如果最終沒有找到，返回undefined
• 別名：隱式原型鏈
• 作用：查找對象的屬性（方法）

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

• 函數的顯示原型指向的對象默認是空Object實例對象（Object除外）

console.log(Fn.prototype instanceof Object) //true
console.log(Object.prototype instanceof Object) //false
console.log(Function.prototype instanceof Object) //true

• 所有函數都是Function的實例（包含Function）

console.log(Function.__proto__ === Function.prototype) //true

• Object的原型對象是原型鏈盡頭

console.log(Object.prototype.__proto__) // null

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

4.instanceof

instanceof操作符用來在運行時檢測一個對象的類型

instanceof是如何判斷的？

• 表達式：A instanceof B
• 如果B函數的顯示原型對象在A對象的原型鏈上，返回true，否則返回false

注意：Object和Function既是對象，又是函數，兩者內部同時含有__proto__和prototype屬性

console.log(Object.__proto__ === Function.prototype) //true
console.log(Object.__proto__ === Function.__proto__ ) //true
console.log(Object.prototype === Function.prototype.__proto__) //true

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

圖解：

5.面試題
1).

function A () {
}
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

function F() {}
Object.prototype.a = function() {
	console.log('a()')
}
Function.prototype.b = function() {
	console.log('b()')
}
var f = new F()
f.a() // a()
f.b() // undefined
F.a() // a()
F.b() // b()