JS-畫圖理解原型袜硫、原型鏈和原型實(shí)現(xiàn)的繼承

不啰嗦氯葬,畫圖有個(gè)直觀的印象挡篓。
吐槽:眾說紛紜。

寫幾個(gè)要點(diǎn):

prototype屬性是構(gòu)造函數(shù)才有的帚称。
[[Prototype]]屬性是所有對(duì)象都有的官研。(構(gòu)造函數(shù)是Function的實(shí)例對(duì)象)
constructor屬性是原型對(duì)象才有的。(這個(gè)真說法不同闯睹,以紅寶書為準(zhǔn)戏羽,chrome打印也印證了)
__proto__是定義在原型對(duì)象上的訪問器屬性!(需要提前知道構(gòu)造器屬性)
原型是一種對(duì)象和對(duì)象之間的關(guān)系楼吃,如A對(duì)象是B對(duì)象的原型始花。
字面量生成的對(duì)象,如let a={}孩锡,a的[[prototype]]指向Object相關(guān)的原型對(duì)象酷宵。經(jīng)常的,我們通過:類名.prototype={ ... } 生成的原型對(duì)象屬于字面量定義形式躬窜。

一浇垦、圖解原型,原型鏈和__proto__

如圖1荣挨,__proto__屬性實(shí)際上是定義在原型對(duì)象上的構(gòu)造器屬性男韧,當(dāng)調(diào)用 x_obj.__proto__ 時(shí),實(shí)際調(diào)用的是它原型對(duì)象的訪問器屬性__proto__中的get方法默垄,再通過規(guī)范調(diào)用Object.getPrototypeOf(this)返回 x_obj 的原型對(duì)象此虑。
最后Object相關(guān)的原型對(duì)象的[[prototype]]指向NULL,作為原型鏈的終止口锭。

綠色的箭頭組成的就是原型鏈寡壮。
1

自己敲代碼打印證明一下:


2

利用Object.definePrototype()方法在Person.prototype指向的原型對(duì)象中定義__proto__屬性(將原型對(duì)象中原有的__proto__屬性覆蓋),然后通過實(shí)例對(duì)象 p 調(diào)用__proto__屬性,可以根據(jù)打印出來的結(jié)果確定:實(shí)例對(duì)象所調(diào)用的__proto__是定義在原型對(duì)象上的况既。


二这溅、利用原型實(shí)現(xiàn)繼承

先看兩個(gè)類的圖示:老朋友 X 和新來的 A
3
1、讓X的prototype指向一個(gè)A的實(shí)例對(duì)象
X.prototype = new A();
X.prototype.constructor = X;

對(duì)比圖三可以看到棒仍,通過構(gòu)造函數(shù)A new 出來的實(shí)例對(duì)象 a_obj 的原型的constructor屬性是指向A的構(gòu)造函數(shù)的(這句話好繞悲靴,但是看圖就很清楚)。
所以圖四中莫其,若將A的一個(gè)實(shí)例對(duì)象 a_obj 作為 X構(gòu)造的實(shí)例對(duì)象的原型癞尚,必須在 a_obj 對(duì)象中添加一個(gè) constructor屬性,讓它指向 X 構(gòu)造函數(shù)乱陡,以覆蓋 a_obj 的原型中的constructor浇揩。找一個(gè)屬性會(huì)先查找該對(duì)象本身,找不到才會(huì)順著原型鏈去找憨颠, x_obj 的原型鏈包括A實(shí)例對(duì)象的原型胳徽,也就實(shí)現(xiàn)了繼承。(看圖的綠色線路)


4
2爽彤、讓X的prototype指向一個(gè)A相關(guān)的原型對(duì)象
X.prototype = A.prototype;

其實(shí)就是所有X的實(shí)例對(duì)象养盗,所有A的實(shí)例對(duì)象,共享一個(gè)原型對(duì)象适篙。

一看就明白這個(gè)方法很不好往核,任何一方修改原型對(duì)象的內(nèi)容,另一方都會(huì)被影響嚷节。而且原型的constructor屬性只指向A聂儒!
5

三、不同寫法有區(qū)別

寫法一
X.prototype.屬性名=值;

X.prototype已經(jīng)先為我們分配一個(gè)對(duì)象了硫痰,并且為我們?cè)谶@個(gè)原型對(duì)象中加入了constructor屬性衩婚。

寫法二
X.prototype ={
    屬性名:值
};

這種寫法相當(dāng)于給構(gòu)造函數(shù)的prototype屬性重新指定一個(gè)原型對(duì)象碍论,這個(gè)我們自己定義的原型對(duì)象是沒有constructor屬性的谅猾。

用Object.getOwnPropertyNames()方法打印原型對(duì)象的所有屬性(不包括符號(hào)),看對(duì)比:


6

如有必要鳍悠,constructor需要自己指定税娜,同時(shí)注意constructor是不可枚舉的屬性。

Object.defineProperty(X.prototype,'constructor',{
        enumerable:false,
        value:X
});

另外藏研,
實(shí)例對(duì)象的[[prototype]]是在創(chuàng)建實(shí)例時(shí)敬矩,由構(gòu)造函數(shù)的prototype屬性指定的。

如果在創(chuàng)建實(shí)例對(duì)象后蠢挡,給構(gòu)造函數(shù)重新指定原型對(duì)象弧岳,以前創(chuàng)建的實(shí)例對(duì)象的[[prototype]]還是指向舊的原型對(duì)象凳忙。這點(diǎn)要特別注意。
7

反復(fù)推翻好幾次筆記禽炬,目前認(rèn)為這是最可靠的涧卵。
下次畫Function和Object。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末腹尖,一起剝皮案震驚了整個(gè)濱河市柳恐,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌热幔,老刑警劉巖乐设,帶你破解...
    沈念sama閱讀 212,454評(píng)論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異绎巨,居然都是意外死亡近尚,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,553評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門场勤,熙熙樓的掌柜王于貴愁眉苦臉地迎上來戈锻,“玉大人,你說我怎么就攤上這事却嗡〔芭妫” “怎么了嘹承?”我有些...
    開封第一講書人閱讀 157,921評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵窗价,是天一觀的道長。 經(jīng)常有香客問我叹卷,道長撼港,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,648評(píng)論 1 284
  • 正文 為了忘掉前任骤竹,我火速辦了婚禮帝牡,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘蒙揣。我一直安慰自己靶溜,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,770評(píng)論 6 386
  • 文/花漫 我一把揭開白布懒震。 她就那樣靜靜地躺著罩息,像睡著了一般。 火紅的嫁衣襯著肌膚如雪个扰。 梳的紋絲不亂的頭發(fā)上瓷炮,一...
    開封第一講書人閱讀 49,950評(píng)論 1 291
  • 那天,我揣著相機(jī)與錄音递宅,去河邊找鬼娘香。 笑死苍狰,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的烘绽。 我是一名探鬼主播淋昭,決...
    沈念sama閱讀 39,090評(píng)論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢(mèng)啊……” “哼安接!你這毒婦竟也來了响牛?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,817評(píng)論 0 268
  • 序言:老撾萬榮一對(duì)情侶失蹤赫段,失蹤者是張志新(化名)和其女友劉穎呀打,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體糯笙,經(jīng)...
    沈念sama閱讀 44,275評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡贬丛,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,592評(píng)論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了给涕。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片豺憔。...
    茶點(diǎn)故事閱讀 38,724評(píng)論 1 341
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖够庙,靈堂內(nèi)的尸體忽然破棺而出恭应,到底是詐尸還是另有隱情,我是刑警寧澤耘眨,帶...
    沈念sama閱讀 34,409評(píng)論 4 333
  • 正文 年R本政府宣布昼榛,位于F島的核電站,受9級(jí)特大地震影響剔难,放射性物質(zhì)發(fā)生泄漏胆屿。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 40,052評(píng)論 3 316
  • 文/蒙蒙 一偶宫、第九天 我趴在偏房一處隱蔽的房頂上張望非迹。 院中可真熱鬧,春花似錦纯趋、人聲如沸憎兽。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,815評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽纯命。三九已至,卻和暖如春桦锄,著一層夾襖步出監(jiān)牢的瞬間扎附,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,043評(píng)論 1 266
  • 我被黑心中介騙來泰國打工结耀, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留留夜,地道東北人匙铡。 一個(gè)月前我還...
    沈念sama閱讀 46,503評(píng)論 2 361
  • 正文 我出身青樓,卻偏偏與公主長得像碍粥,于是被迫代替她去往敵國和親鳖眼。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,627評(píng)論 2 350

推薦閱讀更多精彩內(nèi)容