原型鏈

原型鏈的概念

? ECMAScript 中描述了原型鏈的概念，并將原型鏈作為實作繼承的主要方法，其基本思想是利用原型讓一個參考型別繼承另一個參考型別的屬性和方法，簡單回顧以下建構式、原型和實體的關系：每個建構式都有一個原型物件，原型物件都包含一個指向建構式的指標，而實體都包含一個指向原型物件的內部指標，那么，加入我們讓原型物件等于另一個型別的實體，結果會怎么樣呢？顯然，此時的原型物件將包含一個指向另一個原型的指標，相應的，另一個原型中也包含著一個指向另一個建構式的指標，假如另一個原型又是另一個型別的實體，那么上述關系依然成立，如此層層遞進，就構成了實體與原型的鏈條，這就是所謂的原型鏈的基本概念，

? 實作原型鏈有一種基本模式，代碼如下：

function Person() {}
Person.prototype.type = '人類'

function Student() {}
Student.prototype = new Person()
Student.prototype.job = '學生'

var student = new Student()

console.log(student.type)	// 人類
console.log(student.job)	// 學生

console.log(student)

? 以上代碼定義了兩個型別：Person 和 Student，它們的主要區別是 Student 繼承了 Person，而繼承是通過創建 Person 的實體，并將該實體替換為 Student.prototype，實作的本質是重寫了 Student 的原型物件，取而代之的是一個新型別的實體，換句話說，原來存在于 Person 的實體中的所有屬性或方法，現在也同樣存在于 Student.prototype 中了，在確立了繼承關系之后，我們給 Student.prototype 添加了一個新的屬性： job，這樣就在繼承了 Person 的屬性和方法的基礎上又添加了一個新的屬性，打開控制臺可以看到以下資訊：

? 我們知道，在創建一個函式時，系統會自動幫我們創建屬于它的原型物件，在這個原型物件有一個默認屬性 constructor 的指標，它指向了新創建的函式，但是在這里，由于 Student 中系統幫我們創建的原始原型物件被我們替換成了 Person 的實體，所以它的 constructor 也就被我們覆寫掉了，這時訪問 Student.constructor 會出現這樣的結果：

console.log(student.constructor)	// ? Person() {}

? 在執行這句代碼的時候，其內部經過 3 次搜索，

搜索 student 實體本身的屬性 constructor，找不到
搜索 student 的原型物件（Person實體）的屬性 constructor，找不到
搜索 student 的原型物件的（Person實體）的原型物件（本身是 Object 的實體）的屬性 constructor，找到了！

最侄訓傳的結果指向了 Person 函式，這明顯是不符合邏輯的，需要我們手動為它矯正：

function Person() {}
Person.prototype.type = '人類'

function Student() {}
Student.prototype = new Person()
Student.prototype.constructor = Student		// 為它的原型物件添加 constructor 屬性
Student.prototype.job = '學生'

var student = new Student()
console.log(student)

? 在上面的代碼的第 6 行中，為 Student 的原型物件添加了屬性 constructor，并讓其指向了 Student 函式，這樣，在訪問實體 student 的 constructor 屬性時，它會進行以下操作：

搜索 student 實體本身的屬性 constructor，找不到
搜索 student 的原型物件的屬性 constructor，找到了！

? 再找不到屬性或方法的情況下，搜索程序總是要一環一環地向前行到原型鏈末端才會停下來，如果以上第二步沒有找到屬性 construcotr （下圖畫紅線的地方），它會再沿著原型鏈繼續搜索，找到 student 的原型物件（Person的實體）的原型物件的屬性 constructor（下圖畫藍線的地方），

? 打開控制臺：

默認的原型——Object

? 我們知道，所有參考型別默認都繼承了 Object 的實體，因此默認原型都會包含一個內部指標，指向 Object.prototype，這也正是所有i自定義型別都會繼承 to.String()、valueOf() 等默認方法的根本原因，所以，上面例子展示的原型鏈中，student 實體原型物件是 Person 的實體，而這個 Person 實體的原型指標還指向了 Object 的實體，

? 一句話， Student 繼承了 Person，而 Person 又繼承了 Object，當呼叫 student.toString() 的時候，實際上就是在呼叫 Object.prototype 中的那個方法，

確定原型和實體的關系

? 可以通過兩種方式來確定原型和實體之間的關系，第一種方式是使用 instanceof 運算子，只要用這個運算子來測驗實體與原型鏈中出現過的建構式，結果就會回傳 true，以下幾行代碼就說明了這一點，

console.log(student instanceof Object)	// true
console.log(student instanceof Person)	// true
console.log(student instanceof Student)	// true

? 由于原型鏈的關系，可以說 instanceof 是 Object、Person、Student 中任何一個型別的實體，因此，測驗這三個建構式的結果都回傳了 true，

? 第二種方式是使用 isPrototypeOf() 方法，同樣，只要是原型鏈中出現過的原型，都可以說是該原型鏈所派生的實體的原型，因此 isPrototypeOf() 方法也會回傳 true ，如下所示：

console.log(Object.prototype.isPrototypeOf(student))	//true
console.log(Person.prototype.isPrototypeOf(student))	//true
console.log(Student.prototype.isPrototypeOf(student))	//true

謹慎地定義方法

? 子型別有時候有時候需要重寫超類（父型別）地某個方法，或者需要添加超型別中不存在的某個方法，但不管怎么樣，給原型添加方法的代碼一定要放在一環原型的陳述句之后，

function Person() {}
Person.prototype.type = '人類'

function Student() {}
Student.prototype.job = '學生'		// 一定要放在替換原型的代碼之后
Student.prototype = new Person()	// 會覆寫掉上面添加的 job 屬性

var student = new Student()

console.log(student.job)		// undefined

? 還有一點，不能通過物件字面量創建原型方法來添加新的屬性，因為字面量賦值實際上就是創建了一個全新的物件，然后再進行賦值，

function Person() {}
Person.prototype.type = '人類'

function Student() {}
Student.prototype = new Person()
Student.prototype = {
	job: '學生'
}

var student = new Student()

console.log(student.type)		// undefined

? 上面代碼中，在使用字面量的方式為 Student 的 prototype 賦值時，實際上經過了下面的程序

創建新物件 { job: '學生' }
為 Student.prototype 賦值為 { job: '學生' }

? 然而，這實際上是讓 Student.prototype 的指標指向了全新的物件，所以原型鏈就在這兒被切斷了，自然也就訪問不到 Person的屬性 type，

原型鏈的問題

? 原型鏈雖然很強大，可以用它來實作繼承，但它也存在一些問題，其中，最主要的問題來自包含參考類性值得原型，原型物件中的參考型型別值會被所有實體共享，而這也正是為什么要在建構式中，而不是再原型物件中定義屬性的原因，在通過原型來實作繼承時，原型實際上會編程另一個型別的實體，于是，原先的實體屬性也就順理成章地變成了現在的原型屬性了，看下面代碼：

function Person() {
	this.family = ['father', 'mother']
}
Person.type = '人類'

function Student() {}
Student.prototype = new Person()

const student1 = new Student()
student1.family.push('brother')
console.log(student1.family)	// ["father", "mother", "brother"]

const student2 = new Student()
console.log(student2.family)	// ["father", "mother", "brother"]

? 這個例子中的 Person 建構式定義了一個 family 屬性，該屬性包含了一個（參考型別值），Person 的每個實體都會有各自包含自己陣列的 family 屬性，當 Student 通過原型鏈繼承了 Person 之后，Student.prototype 就變成了 Person 的一個實體，因此它也擁有了自己的 family 屬性——就跟專門創建了一個 Student.prototype.family 屬性一樣，但結果是什么呢？結果是 Student 的所有實體都會共享這一個 family 屬性，而我們對 student1.family 的修改能通過 student2.family 反映出來，就已經充分證實了這一點，

? 原型鏈的第二個問題是：在創建子型別的實體時，不能向超型別的建構式中傳遞引數，實際上，應該說是沒辦法在不影響所有物件實體下的情況下，給超型別的建構式傳遞引數，有鑒于此，再加上之前說的由于原型中包含參考型別所帶來的問題，實踐中很少會單獨使用原型鏈，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/255106.html

標籤：JavaScript

上一篇：Node.js 安全指南

下一篇：Node.js 安全指南