之前對js原型和原型鏈的理解一直覺得很繞,繞來繞來的,在看了《JavaScript高級程序設計》和各種文章之後,終於對原型和原型鏈有了初步的瞭解,可是還是沒有很深入的瞭解,今次通過以前段時間遇到的一道題,分析一下,用自己的想法進行解讀,加深自己對原型和原型鏈的理解。
一、題目
下面程序運行結果是什麼?
function Animal() {
this.name = 'Animal';
}
Animal.prototype.changeName = function (name) {
this.name = name;
}
function Cat() {
this.name = 'Cat';
}
var animal = new Animal();
Cat.prototype = animal;
Cat.prototype.constructor = Cat;
var cat = new Cat();
animal.changeName('Tiger');
console.log(cat.name)
A. Animal
B. Cat
C. Tiger
D. 都不是
答案是 B Cat
二、解讀
1. 原型對象
無論什麼時候,只要創建了一個新函數,就會根據一組特定的規則爲該函數創建一個prototype
屬性,這個屬性指向函數的原型對象。在默認情況下,所有的原型對象都會自動獲得一個constructor
(構造函數)屬性,這個屬性是一個指向prototype
屬性所在函數的指針。
下面用圖來說明
function Animal() {
this.name = 'Animal';
}
Animal.prototype.changeName = function (name) {
this.name = name;
}
首先創建了一個Animal函數,Animal中含有一個prototype
屬性,指向Animal Prototype,而Animal.prototype.constructor
指向Animal。這個時候由於name
屬性是在函數中定義的,所以不在Animal Prototype中,而changeName
函數是通過Animal.prototype.changeName
定義的,所以我們可以通過這種方式,在實例化多個對象時,共享原型所保存的方法。
同理,當創建了Cat函數時,也是一樣。
function Cat() {
this.name = 'Cat';
}
2. 創建實例
當調用構造函數創建一個新實例後,該實例的內部將包含一個指針(內部屬性),指向構造函數的原型對象。在ECMA-262第5版中管這個指針叫[[Prototype]]
。雖然在腳本中沒有標準的方式訪問[[Prototype]]
,但Firefox、Safari和Chrome在每個對象上都支持一個屬性__proto__
。明確重要的一點,這個連接存在於實例與構造函數的原型對象之間,而不是存在於實例與構造函數之間。
// 將Cat的原型對象指向animal實例,獲得animal中的屬性,原有的屬性丟失
Cat.prototype = animal;
這一部分相當於是把Cat的原型對象的指針指向了animal
實例,所以原來Cat原型對象中的constructor
屬性丟失,替換成了animal
實例中的屬性,包括name
屬性以及__proto__
內部屬性,同時__proto__
屬性也指向Animal.prototype
,因此Cat也可以通過原型鏈查找調用到Animal中的屬性和方法。
// 相當於重新創建了constructor,指向Cat構造函數
Cat.prototype.constructor = Cat;
這一部分相當於是重新在原型對象中創建了一個constructor
屬性,同時指向Cat構造函數。
var cat = new Cat(); // 實例化一個Cat對象,跟實例化Animal相似
3. 調用方法
animal.changeName('Tiger');
當var animal = new Animal();
實例化了一個Animal對象後,animal
都包含一個內部屬性,該屬性指向了Animal.prototype
;換句話說,animal
與構造函數Animal沒有直接的關係。可是,可以看到雖然在實例中不含changeName
,但我們卻可以調用animal.changeName(name)
,這是通過查找對象屬性的過程來實現的,即:
首先查找實例中實例中animal
是否有changeName
方法,如果沒有則繼續尋找,去到Animal.prototype
尋找是否有changeName
方法,如果有則調用,沒有則繼續尋找,到Object.prototype
中尋找,最後沒找到則會返回一個null
。
很明顯,在這裏實例animal
中沒有changeName
方法,所以需要到Animal.prototype
尋找changeName
方法,並調用成功修改了實例animal
中的name
屬性,爲Tiger
。
這個時候由於Cat.prototype
是指向實例animal
的,因此Cat.prototype
中的name
屬性也變爲Tiger
。
console.log(cat.name) // Cat
最後,獲取cat.name
,與查找方法同樣,也是先去實例中cat
查找是否含有name
屬性,在這裏很明顯是存在的,因此直接結束尋找,此時cat.name = 'Cat'
。
三、總結
通過這道題,加深了我對原型和原型鏈的理解,其實這道題也可以擴展到關於繼承的知識點,在JavaScript中實現繼承主要是依靠原型鏈來實現。之後等我再搞的更清楚一點再繼續寫吧。
此文章是本人自己對於原型和原型鏈的一點小小的理解,中間可能存在偏差或者錯誤的,請多多指點!!!