從一道題解讀JS原型鏈

harryhappy 發布于2019-08-23 12:25 / 2173人閱讀

摘要：明確重要的一點，這個連接存在于實例與構造函數的原型對象之間，而不是存在于實例與構造函數之間。相當于重新創建了，指向構造函數這一部分相當于是重新在原型對象中創建了一個屬性，同時指向構造函數。

之前對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中實現繼承主要是依靠原型鏈來實現。之后等我再搞的更清楚一點再繼續寫吧。

此文章是本人自己對于原型和原型鏈的一點小小的理解，中間可能存在偏差或者錯誤的，請多多指點！??！

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/98489.html

從一道面試題，到“我可能看了假源碼”

摘要：返回的綁定函數也能使用操作符創建對象這種行為就像把原函數當成構造器。同時，將第一個參數以外的其他參數，作為提供給原函數的預設參數，這也是基本的顆?；A。今天想談談一道前端面試題，我做面試官的時候經常喜歡用它來考察面試者的基礎是否扎實，以及邏輯、思維能力和臨場表現，題目是：模擬實現ES5中原生bind函數。也許這道題目已經不再新鮮，部分讀者也會有思路來解答。社區上關于原生bind的研...

Carson 2019-08-20 14:23 評論0 收藏0
從一道面試題，到“我可能看了假源碼”

摘要：返回的綁定函數也能使用操作符創建對象這種行為就像把原函數當成構造器。同時，將第一個參數以外的其他參數，作為提供給原函數的預設參數，這也是基本的顆粒化基礎。今天想談談一道前端面試題，我做面試官的時候經常喜歡用它來考察面試者的基礎是否扎實，以及邏輯、思維能力和臨場表現，題目是：模擬實現ES5中原生bind函數。也許這道題目已經不再新鮮，部分讀者也會有思路來解答。社區上關于原生bind的研...

rockswang 2019-08-30 15:52 評論0 收藏0
從一道面試題，到“我可能看了假源碼”

摘要：返回的綁定函數也能使用操作符創建對象這種行為就像把原函數當成構造器。同時，將第一個參數以外的其他參數，作為提供給原函數的預設參數，這也是基本的顆粒化基礎。今天想談談一道前端面試題，我做面試官的時候經常喜歡用它來考察面試者的基礎是否扎實，以及邏輯、思維能力和臨場表現，題目是：模擬實現ES5中原生bind函數。也許這道題目已經不再新鮮，部分讀者也會有思路來解答。社區上關于原生bind的研...

jlanglang 2019-08-01 16:21 評論0 收藏0
ES規范解讀之賦值操作符&屬性訪問器

摘要：那么什么是基礎對象組件呢，舉兩個例子我們再來看看屬性訪問器，就是括號操作符及點號操作符都做了什么屬性訪問器也就是說括號跟點號對解釋器而言是一樣的。 ES規范解讀之賦值操作符&屬性訪問器原文:https://github.com/kuitos/kuitos.github.io/issues/24事情起源于某天某妹子同事在看angular文檔中關于Scope的說明Understandin...

funnyZhang 2019-08-21 10:41 評論0 收藏0
一道簡單的js繼承面試題來查考你是否真的透徹的了解繼承

摘要：但這兩個對象的原型指向了同一個實例對象，這個實例對象同樣是存在棧內存中的然后指向了一個對象。實際是在的實例對象增加一個屬性，并將屬性賦值為，但它并沒有修改原型鏈上的屬性。側重理解的指向問題直接先貼題目吧 function A() { this.name = a this.color = [green, yellow] } function B() { ...

jcc 2019-08-22 15:55 評論0 收藏0