JavaScript兩張圖搞懂原型鏈
前言:
我們上一篇文章介紹了JavaScript原型,為什么不將原型鏈一起介紹了呢?因?yàn)镴avaScript中的原型鏈?zhǔn)且粋€(gè)難點(diǎn),也是一個(gè)面試必問(wèn)的考點(diǎn),現(xiàn)在就來(lái)學(xué)習(xí)一下。
1.原型的關(guān)系
在JavaScript
中的每個(gè)函數(shù)都會(huì)有一個(gè)prototype屬性,這個(gè)屬性又會(huì)返回一個(gè)原型,原型又有一個(gè)constructor
屬性,這個(gè)屬性指向與之關(guān)聯(lián)的構(gòu)造函數(shù)。通過(guò)構(gòu)造函數(shù)實(shí)例化的對(duì)象會(huì)有一個(gè)__proto__
屬性,這個(gè)__proto__
屬性指向與構(gòu)造函數(shù)的prototype指向的是同一內(nèi)存。
值得注意的是__proto__
屬性已經(jīng)在標(biāo)準(zhǔn)中被刪除,這里使用Object.getPrototypeOf(object)和Object.setPrototypeOf(object, prototype)
代替。
現(xiàn)在來(lái)測(cè)試Object構(gòu)造函數(shù)與原型的關(guān)系,示例代碼如下所示:
// 首先 Object 是一個(gè)構(gòu)造函數(shù),就會(huì)有 prototype 屬性 var result = Object.prototype console.log(result) // 得到一個(gè)原型對(duì)象 /* * 原型對(duì)象的 constructor 屬性 -> 返回與之關(guān)聯(lián)的構(gòu)造函數(shù) * Object.getPrototypeOf(result) 返回指向構(gòu)造函數(shù)的 prototype */ var result2 = result.constructor console.log(result2) // [Function: Object] var result3 = Object.getPrototypeOf(result) console.log(result3) // null
圖解如下所示:
我們通過(guò)Object.getPrototypeOf(Object.prototype)
獲取Object.prototype
的原型時(shí),返回的值為null這就表示我們查找到Object.prototype
就可以停止查找了。
2.原型鏈
為了更方便我們來(lái)理解原型鏈?zhǔn)绞裁?,首先?lái)看一下下面這一段代碼:
function Person(name) { this.name = name } var PP = Person.prototype var PPC = PP.constructor // 驗(yàn)證與構(gòu)造函數(shù)是否相同 console.log(PPC === Person) // true // 實(shí)例化 Person var person = new Person('一碗周') // 獲取 Person 實(shí)例化后的對(duì)象的原型 var pP = Object.getPrototypeOf(person) // 驗(yàn)證 Person 實(shí)例化后的對(duì)象的原型是否指向構(gòu)造函數(shù)的 prototype console.log(pP === PP) // true
實(shí)際上所有的構(gòu)造函數(shù)默認(rèn)都是繼承于Object的,如下代碼測(cè)試:
// 獲取 Person.prototype 的原型 var PPP = Object.getPrototypeOf(PP) var OP = Object.prototype // 判斷兩者是否相等 console.log(PPP === OP) // true
上面的代碼表述的不是很清楚,我畫了一張圖來(lái)理解一下:
上圖中畫紅色線的部分就是原型鏈,原型鏈就是原型中的關(guān)系的指向,直到最終結(jié)果為null也就是Object.prototype
,原型鏈就結(jié)束了,也就是說(shuō)**Object.prototype**
是原型鏈中的終點(diǎn)。
我們可以通過(guò)Object.setPrototypeOf(obj, prototype)
方法來(lái)設(shè)置具體內(nèi)容的原型鏈,但是如果不是必要建議不要這樣做,因?yàn)檫@樣做是非常耗性能的。
3.結(jié)語(yǔ)
通過(guò)兩張圖來(lái)講解JavaScript中的原型中的關(guān)系以及原型鏈?zhǔn)鞘裁?,最后還介紹了原型鏈的終點(diǎn)。
到此這篇關(guān)于JavaScript兩張圖搞懂原型鏈的文章就介紹到這了,更多相關(guān)JavaScript原型鏈內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JS前端以輕量fabric.js實(shí)現(xiàn)示例理解canvas
這篇文章主要為大家介紹了JS前端以輕量fabric.js實(shí)現(xiàn)示例理解canvas可視化,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-08-08threeJs實(shí)現(xiàn)波紋擴(kuò)散及光標(biāo)浮動(dòng)效果詳解
這篇文章主要為大家介紹了threeJs實(shí)現(xiàn)波紋擴(kuò)散及光標(biāo)浮動(dòng)效果詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-03-03javascript Number 與 Math對(duì)象的介紹
這篇文章主要介紹了javascript Number 與 Math對(duì)象,文章圍繞 Number 與 Math對(duì)象的相關(guān)資料展開(kāi)內(nèi)容,需要的朋友可以參考一下,希望對(duì)你有所幫助2021-11-11gulp-font-spider實(shí)現(xiàn)中文字體包壓縮實(shí)踐
這篇文章主要為大家介紹了gulp-font-spider實(shí)現(xiàn)中文字體包壓縮實(shí)踐詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-03-03微信小程序 本地?cái)?shù)據(jù)存儲(chǔ)實(shí)例詳解
這篇文章主要介紹了微信小程序 本地?cái)?shù)據(jù)存儲(chǔ)實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2017-04-04微信小程序 實(shí)現(xiàn)拖拽事件監(jiān)聽(tīng)實(shí)例詳解
這篇文章主要介紹了微信小程序 實(shí)現(xiàn)拖拽事件監(jiān)聽(tīng)實(shí)例詳解的相關(guān)資料,在開(kāi)發(fā)不少應(yīng)用或者軟件都要用到這樣的方法,這里就對(duì)微信小程序?qū)崿F(xiàn)該功能進(jìn)行介紹,需要的朋友可以參考下2016-11-11PerformanceObserver自動(dòng)獲取首屏?xí)r間實(shí)現(xiàn)示例
今天給大家介紹一個(gè)非常好用的瀏覽器api:?PerformanceObserver?,?我們可以用它來(lái)獲取首屏、白屏的時(shí)間,就不用再麻煩地手動(dòng)去計(jì)算了2022-07-07微信小程序 五星評(píng)分的實(shí)現(xiàn)實(shí)例
這篇文章主要介紹了微信小程序 五星評(píng)分的實(shí)現(xiàn)實(shí)例的相關(guān)資料,這里提供實(shí)現(xiàn)實(shí)例幫助大家實(shí)現(xiàn)改功能,需要的朋友可以參考下2017-08-08