JavaScript之圖解原型鏈

根據(jù)自己手繪的簡圖更進一步理解JavaScript的原型鏈機制

原型與隱式原型

概念

  1. 原型:所有的 函數(shù) 都有一個屬性名叫做prototype的屬性但绕;這個屬性的值是一個對象喻喳;這個屬性就是原型。
  2. 隱式原型:所有的 對象 都有一個叫做__proto__的屬性已维;它的屬性值又是一個普通的對象杈笔;這就是隱式原型代乃。

談到隱式原型耻涛,它是以雙下劃線開頭和結尾的烘绽,表示它是私有的,不公開的。 它原本不是 ES 的標準终佛,無奈眾多瀏覽器早早地都實現(xiàn)了這個屬性俊嗽,而且應用得還挺廣泛的。ES 為了向下兼容性只好接納它成為標準的一部分铃彰,是一個典型的現(xiàn)實倒逼標準的例子乌询。

函數(shù)的特殊性

函數(shù)既有prototype又有__proto__

原型與隱式原型之間的關系

如果對象 f1 是由構造器 F 所創(chuàng)建的,那么如下關系成立:
f1.__proto__===F.prototype
對象的隱式原型 指向創(chuàng)建這個對象的構造器的 原型對象豌研。

原型鏈

JavaScript 是基于原型的語言。當我們調用一個對象的屬性時唬党,如果對象沒有該屬性鹃共,JavaScript 解釋器就會從對象的原型對象上去找該屬性,如果原型上也沒有該屬性驶拱,那就去找原型的原型霜浴。這種屬性查找的方式被稱為原型鏈(prototype chain)。

JavaScript中的兩條鏈

  • 作用域鏈:作用是確定函數(shù)中變量的值蓝纲。
  • 原型鏈:作用是確定對象的屬性的值阴孟。

當然屬性的本質上也是變量,之所以稱為屬性是因為它屬于某一個對象

在JavaScript設計之初是沒有類的概念的(ES6之前)税迷,原型系統(tǒng)確是最初就有的語言設計永丝。原型鏈的設計就是為了能夠讓多個實例對象可以共享一些相同的屬性和方法,模擬繼承的方式箭养。
原型繼承經(jīng)常被視為JavaScript的一個弱點慕嚷,但事實上原型繼承模型比經(jīng)典的繼承模型可能更強大。從某種程度上說毕泌,它是更加純粹的面向對象設計(區(qū)別于其他編程語言的面向類的設計)喝检,畢竟在JavaScript中一切皆是對象。

圖解原型鏈

話不多說上圖先
PrototypeChain

概述

以f1為例撼泛,假設現(xiàn)在要訪問對象 f1 的 a 屬性挠说,即通過 f1.a 或者是 f1[a]來訪問這個屬性。它會按如下步驟去找這個 a 屬性:

第一步:在 f1 對象的自有屬性中找愿题,如果找到 a损俭,則返回 f1.a,如果找不到抠忘,則進入第二步撩炊。

第二步:通過 f1 對象的隱式原型指向構造 f1 的函數(shù) Fun 的原型對象即Fun.prototype,如果在這里找到了屬性 a 崎脉,則返回 f1.__proto__.a, 如果找不到骆膝,則繼續(xù)下一步阅签。

第三步: f1.__proto__Fun.prototype這個對象本身是一個對象,它應該是由內置對象構造器Object構造的路克,那么它的隱式原型指向的就是這個對象構造器的原型即Object.protoype养交,在這里要繼續(xù)查詢屬性 a 碎连,如果找到了則返回f1.__proto__.__proto__.a,如果找不到廉嚼,則繼續(xù):

第四步:f1.__proto__.__proto__Object.protoype 這個對象的隱式原型指向的這個對象本身的構造器的原型對象即Object.protoype.__proto__去找怠噪,發(fā)現(xiàn)為null峭梳,即到達了原型鏈的頂部葱椭,而且還沒有找到屬性 a 捂寿,則返回 undefined孵运。

整個查找 a 屬性的過程治笨,是按一個鏈式結構在找,這個鏈就是原型鏈旷赖。
由于原型鏈的存在,它的查找是自發(fā)的過程稚照,中間的__proto__可以都省略掉。

代碼驗證

測試代碼

同理可得另外兩個例子的代碼驗證:

要點1:對象是由函數(shù)創(chuàng)造的 - 構造器

  • 在JavaScript中,函數(shù) 可以用來創(chuàng)建對象(區(qū)別于其他面向對象的程序設計中辨萍,能夠創(chuàng)建對象的叫锈玉,ES6之前JS還沒有類的概念)义起,用于創(chuàng)建創(chuàng)建對象的 函數(shù) 就稱為 構造器(constructor)并扇。
  • 函數(shù) 如果希望當做構造器來用穷蛹,需要在前面加 new 關鍵字昼汗;不加new就是普通函數(shù)調用顷窒。
  • 任何函數(shù)都可以當做構造器使用,前面加 new 即可
  • 一般約定打算作為構造器用的函數(shù)鞋吉,首字母大寫
  • 獲取創(chuàng)建對象的構造器的方法:
    對象.__proto__.constructor

要點2:構造函數(shù)的原型對象中有個屬性指向構造函數(shù)本身

構造函數(shù).prototype.constructor === 構造函數(shù)

要點3:原型鏈終點

根據(jù)定義,null 沒有 prototype谓着,并作為這個原型鏈的最后一個環(huán)節(jié)泼诱。根據(jù)驗證Object.prototype的隱式原型指向的就是null;所以說JavaScript中幾乎所有的對象都是位于原型鏈頂端的Object的實例赊锚。

以上就是我對JavaScript中原型鏈的理解以及小結如有錯誤望告知!不勝感激??

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末舷蒲,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子牲平,更是在濱河造成了極大的恐慌堤框,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,402評論 6 499
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異骗绕,居然都是意外死亡,警方通過查閱死者的電腦和手機资昧,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,377評論 3 392
  • 文/潘曉璐 我一進店門酬土,熙熙樓的掌柜王于貴愁眉苦臉地迎上來格带,“玉大人撤缴,你說我怎么就攤上這事。” “怎么了棺亭?”我有些...
    開封第一講書人閱讀 162,483評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長凄敢。 經(jīng)常有香客問我碌冶,道長,這世上最難降的妖魔是什么拒逮? 我笑而不...
    開封第一講書人閱讀 58,165評論 1 292
  • 正文 為了忘掉前任罐氨,我火速辦了婚禮,結果婚禮上滩援,老公的妹妹穿的比我還像新娘岂昭。我一直安慰自己,他們只是感情好狠怨,可當我...
    茶點故事閱讀 67,176評論 6 388
  • 文/花漫 我一把揭開白布约啊。 她就那樣靜靜地躺著,像睡著了一般佣赖。 火紅的嫁衣襯著肌膚如雪恰矩。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,146評論 1 297
  • 那天憎蛤,我揣著相機與錄音外傅,去河邊找鬼纪吮。 笑死,一個胖子當著我的面吹牛萎胰,可吹牛的內容都是我干的碾盟。 我是一名探鬼主播,決...
    沈念sama閱讀 40,032評論 3 417
  • 文/蒼蘭香墨 我猛地睜開眼技竟,長吁一口氣:“原來是場噩夢啊……” “哼冰肴!你這毒婦竟也來了?” 一聲冷哼從身側響起榔组,我...
    開封第一講書人閱讀 38,896評論 0 274
  • 序言:老撾萬榮一對情侶失蹤熙尉,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后搓扯,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體检痰,經(jīng)...
    沈念sama閱讀 45,311評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,536評論 2 332
  • 正文 我和宋清朗相戀三年锨推,在試婚紗的時候發(fā)現(xiàn)自己被綠了铅歼。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,696評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡换可,死狀恐怖谭贪,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情锦担,我是刑警寧澤,帶...
    沈念sama閱讀 35,413評論 5 343
  • 正文 年R本政府宣布慨削,位于F島的核電站洞渔,受9級特大地震影響,放射性物質發(fā)生泄漏缚态。R本人自食惡果不足惜磁椒,卻給世界環(huán)境...
    茶點故事閱讀 41,008評論 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望玫芦。 院中可真熱鬧浆熔,春花似錦、人聲如沸桥帆。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,659評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽老虫。三九已至叶骨,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間祈匙,已是汗流浹背忽刽。 一陣腳步聲響...
    開封第一講書人閱讀 32,815評論 1 269
  • 我被黑心中介騙來泰國打工天揖, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人跪帝。 一個月前我還...
    沈念sama閱讀 47,698評論 2 368
  • 正文 我出身青樓今膊,卻偏偏與公主長得像,于是被迫代替她去往敵國和親伞剑。 傳聞我的和親對象是個殘疾皇子斑唬,可洞房花燭夜當晚...
    茶點故事閱讀 44,592評論 2 353

推薦閱讀更多精彩內容