JavaScript原型、原型鏈和constructor屬性實(shí)例分析

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

成都創(chuàng)新互聯(lián)主要從事網(wǎng)站制作、成都網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)冠縣,十載網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):18982081108

Prototype 原型對(duì)象

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

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

at: ƒ at（）

concat: ƒ concat（）

constructor: ƒ Array（）

copyWithin: ƒ copyWithin（）

entries: ƒ entries（）

every: ƒ every（）

fill: ƒ fill（）

filter: ƒ filter（）

find: ƒ find（）

// … 省略

[[Prototype]]: Object

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

1

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

原型鏈

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

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

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

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)造出來的對(duì)象， a.__proto__ 指向它的構(gòu)造函數(shù)的原型對(duì)象 A.prototype， A.prototype.__proto__ 指向它的原型對(duì)象 Object.prototype，Object.prototype.__proto__ 指向 null。

下面這段話摘自MDN文檔：

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

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

[[Prototype]] 只是在控制臺(tái)里這樣顯示，實(shí)際上它是就是 __proto__。可以得知，A.prototype.__proto__ 指向了 Object.prototype，也就是 a.__proto__.__proto__ 指向 Object.prototype。一個(gè)原型對(duì)象指向上層的一個(gè)原型對(duì)象，上層的原型對(duì)象一個(gè)又指向上上層的一直指到最后為 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屬性實(shí)例分析”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

分享文章：JavaScript原型、原型鏈和constructor屬性實(shí)例分析
本文網(wǎng)址：http://muchs.cn/article38/pphhsp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營銷推廣、手機(jī)網(wǎng)站建設(shè)、網(wǎng)站制作、做網(wǎng)站、響應(yīng)式網(wǎng)站、網(wǎng)站收錄

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)