JavaScript原型、原型鏈和constructor屬性實例分析

本文小編為大家詳細(xì)介紹“JavaScript原型、原型鏈和constructor屬性實例分析”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“JavaScript原型、原型鏈和constructor屬性實例分析”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識吧。

Prototype 原型對象

Prototype 翻譯過來叫“原型”，原型是一種在開發(fā)生命周期的早期顯示應(yīng)用程序或產(chǎn)品的外觀和行為的模型。Javascript 中的 prototype 叫原型對象，是每一個函數(shù)都有的屬性。

在控制臺中打印 Array.prototype，得到下面的輸出。發(fā)現(xiàn)它的 prototype 里有我們數(shù)組對象所有的函數(shù)，可以推知在使用構(gòu)造函數(shù)創(chuàng)建了對象之后，對象會“引用”構(gòu)造函數(shù)的prototype，從而自身可以訪問這些函數(shù)。實際上，當(dāng)使用一個對象來訪問一個函數(shù)時，如果這個對象沒有定義該函數(shù)，則會沿著原型鏈，一層一層的向上找，找對象的proto（簡稱一下），然后找對象proto的proto，然后找對象的proto的proto的proto，直到找到該函數(shù)并執(zhí)行或者到原型鏈最頂層了也沒有找到（報出undefined錯誤）。

at: ƒ at（）

concat: ƒ concat（）

constructor: ƒ Array（）

copyWithin: ƒ copyWithin（）

entries: ƒ entries（）

every: ƒ every（）

fill: ƒ fill（）

filter: ƒ filter（）

find: ƒ find（）

// … 省略

[[Prototype]]: Object

function A（）{} // 定義一個函數(shù) A

1

在 Javascript 中函數(shù)也是對象，可以自行驗證 A instanceof Object 或者 Array instanceof Object 或者 String instanceof Object 得到的結(jié)果都是 true。直觀地看一下，打印 typeof A.prototype，獲得以下結(jié)果?？梢?A.prototype 這個 prototype 就是個對象。

原型鏈

函數(shù)：存在 prototype 屬性，其中 prototype 屬性里又有一個 constructor 屬性。constructor 指向該函數(shù)本身。

對象：存在 __proto__ 屬性，它指向它的構(gòu)造函數(shù)的 prototype 。（一個函數(shù)，用它 new 出了對象，這個函數(shù)就叫構(gòu)造函數(shù)）

結(jié)合一個例子，來說明清楚。

function A（） {

  this.text = 'I am A.'

}

const a = new A（）;

console.log（a.__proto__ === A.prototype）; // true

console.log（a.__proto__.__proto__ === Object.prototype）; // true

console.log（Object.prototype.__proto__）; // null

console.log（a.__proto__.__proto__.__proto__）; // null

a 是函數(shù) A 構(gòu)造出來的對象， a.__proto__ 指向它的構(gòu)造函數(shù)的原型對象 A.prototype， A.prototype.__proto__ 指向它的原型對象 Object.prototype，Object.prototype.__proto__ 指向 null。

下面這段話摘自MDN文檔：

每個實例對象都有一個私有屬性（稱之為 __proto__ ）指向它的構(gòu)造函數(shù)的原型對象（prototype）。該原型對象也有一個自己的原型對象（__proto__），層層向上直到一個對象的原型對象為 null。根據(jù)定義，null 沒有原型，并作為這個原型鏈中的最后一個環(huán)節(jié)。

為了更清楚的看到原型對象和原型鏈到底是啥樣子的，在控制臺打印 A.prototype 和 Object.prototype，輸出如下：

[[Prototype]] 只是在控制臺里這樣顯示，實際上它是就是 __proto__。可以得知，A.prototype.__proto__ 指向了 Object.prototype，也就是 a.__proto__.__proto__ 指向 Object.prototype。一個原型對象指向上層的一個原型對象，上層的原型對象一個又指向上上層的一直指到最后為 null 的鏈，就是原型鏈。

constructor 屬性

constructor 是 prototype 的屬性，constructor 指向構(gòu)造函數(shù)本身。

A.prototype.constructor === A // true

（'some text'）。constructor === String // true

（[1,2]）。constructor === Array // true

讀到這里，這篇“JavaScript原型、原型鏈和constructor屬性實例分析”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。