五句話幫你輕松搞定js原型鏈
原型鏈?zhǔn)且环N機(jī)制,指的是JavaScript每個(gè)對(duì)象包括原型對(duì)象都有一個(gè)內(nèi)置的[[proto]]屬性指向創(chuàng)建它的函數(shù)對(duì)象的原型對(duì)象,即prototype屬性。 作用:原型鏈的存在,主要是為了實(shí)現(xiàn)對(duì)象的繼承。
一、 記住以下5句話,輕松搞定js原型鏈
- Function 和 Object 都是構(gòu)造函數(shù)
- 所有的構(gòu)造函數(shù)都是Function new出來的(Function自己new了自己);所有的原型對(duì)象都是Object new出來的(Object new了自己的原型對(duì)象)
- 每一個(gè)構(gòu)造函數(shù)都有一個(gè)prototype屬性指向其原型對(duì)象;每一個(gè)實(shí)例對(duì)象都有一個(gè)_ _ proto _ _ 屬性;實(shí)例對(duì)象的_ _ proto _ _ 等于其構(gòu)造函數(shù)的prototype
- 每一個(gè)原型對(duì)象都有一個(gè)天生屬性constructor,指向其對(duì)應(yīng)的構(gòu)造函數(shù)
- 底層規(guī)定Object.prototype._ _ proto _ _ 等于null
二、下邊我們結(jié)合一小段代碼來詳細(xì)說明原型鏈的畫圖過程
function Game(brand,name,price) {
this.price= price;
this.brand = brand;
this.name = name;
}
var g1 = new Game('EA','彩虹六號(hào)','200rmb');
1.根據(jù)上邊的代碼我們先定義了一個(gè)構(gòu)造函數(shù)叫做Game,假設(shè)Game在堆內(nèi)存中的地址為0x100;并通過它new出了一個(gè)實(shí)例對(duì)象g1,g1在堆內(nèi)存中的地址為0x200。構(gòu)造函數(shù)Game有天生屬性prototype,并指向其原型對(duì)象(在堆內(nèi)存中的地址為0x300)),實(shí)例對(duì)象g1具有天生屬性_ _ proto _ _ ,并指向其構(gòu)造函數(shù)的原型對(duì)象;原型對(duì)象具有天生屬性constructor指向其對(duì)應(yīng)的構(gòu)造函數(shù)。然后我們得到如下圖:

2.由于所有的原型對(duì)象都是Object(0x400) new 出來的,所以0x300這個(gè)原型對(duì)象同時(shí)也是Object的一個(gè)實(shí)例對(duì)象,既然是實(shí)例對(duì)象就具有天生屬性_ _ proto _ _ ,并指向其構(gòu)造函數(shù)的原型對(duì)象(0x500);因?yàn)镺bject自身也是一個(gè)構(gòu)造函數(shù),所以其也有天生屬性prototype,并指向其原型對(duì)象(0x500);又因?yàn)樗械脑蛯?duì)象都是Object(0x400) new 出來的,所以0x500這個(gè)原型對(duì)象也是Object new出來的,因?yàn)?x500是Object的原型對(duì)象,所以0x500的天生屬性constructor指向Object;由于底層規(guī)定Object.prototype._ _ proto _ _ 等于null,然后我們得到如下圖:
3.
我們?cè)賮砜礃?gòu)造函數(shù),由于所有的構(gòu)造函數(shù)都是Function new出來的,所以Function(0x600) new出了自己、Object、Game這三個(gè)構(gòu)造函數(shù),那么這三個(gè)構(gòu)造函數(shù)都是Function的實(shí)例對(duì)象,它們的_ _ proto _ _ 都指向Function的prototype(0x700),0x700的天生屬性constructor又指向0x600;由于0x700是Object new 出來的,所以0x700的_ _ proto _ _ 指向Object 的原型對(duì)象0x500,最終我們得到如下終極原型鏈圖:

到此這篇關(guān)于js原型鏈的文章就介紹到這了,更多相關(guān)js原型鏈內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript中本地存儲(chǔ)(LocalStorage)和會(huì)話存儲(chǔ)(SessionStorage)的使用
本地存儲(chǔ)和會(huì)話存儲(chǔ)是比較常用的方法,你知道兩者的區(qū)別嗎,本文詳細(xì)的介紹了JavaScript中本地存儲(chǔ)(LocalStorage)和會(huì)話存儲(chǔ)(SessionStorage)的使用,具有一定的參考價(jià)值,感興趣的可以了解一下2022-03-03
如何基于filter實(shí)現(xiàn)網(wǎng)站整體變灰功能
這篇文章主要介紹了如何基于filter實(shí)現(xiàn)網(wǎng)站整體變灰功能,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-04-04
Typescript協(xié)變與逆變簡(jiǎn)單理解
深入學(xué)習(xí)TypeScript類型系統(tǒng)的話,逆變、協(xié)變、雙向協(xié)變、不變是繞不過去的概念。這些概念看起來挺高大上的,其實(shí)并不復(fù)雜,這篇文章我們就來學(xué)習(xí)下協(xié)變和逆變吧2022-10-10
JS request函數(shù) 用來獲取url參數(shù)
項(xiàng)目中經(jīng)常會(huì)遇到這種問題 下面代碼解決問題!2010-05-05
js實(shí)現(xiàn)基于正則表達(dá)式的輕量提示插件
這篇文章主要介紹了基于正則表達(dá)式的輕量提示插件,兼容性強(qiáng)卻文件輕巧的文本框檢測(cè)插件,推薦給大家,有需要的小伙伴可以參考下。2015-08-08

