一張圖徹底理解Javascript原型鏈

代碼

講解用到的代碼很簡單,如下

function Foo(){
    //屬性和方法
}
var f1 = new Foo();
var f2 = new Foo(); 
var o1 = new Object();
var o2 = new Object();

基礎了解

一切皆對象,對象又可以分為兩類:

  1. 普通對象 蛛淋,除了函數(shù)對象之外的對象都是,包括new函數(shù)對象()產(chǎn)生的實例篡腌,普通對象沒有prototype褐荷,也就沒有繼承和原型鏈一說。
  2. 函數(shù)對象 嘹悼,包括兩種:
  • 由function創(chuàng)造出來的函數(shù):

          function f1() {
          } // 匿名函數(shù)
          var f2 = function() {
          }
          var f3 = new Function('x','console.log(x)');
          // 以上都是函數(shù)對象
    
  • 系統(tǒng)內置的函數(shù)對象:
    Function叛甫、Object、Array杨伙、String其监、Number ,Function其實充當了函數(shù)對象的構造器限匣,比如Object對象的構造源碼其實是Function Object() {[native code]}的形式抖苦,這一點對于理解原型鏈很重要。

進入正題

image

上圖從結構上分為實例對象米死、Functions函數(shù)對象锌历、prototype原型對象三部分,圖中f1峦筒、f2的原型鏈我特意標成了紅色究西,F(xiàn)oo的原型鏈為紫色。

每個對象都有__proto__屬性物喷,用于儲存繼承得來的方法和屬性卤材;每個函數(shù)對象都有prototype屬性,用于繼承峦失,將其中定義的屬性和方法傳遞給‘后代’(比如實例化)坯认。

如何實現(xiàn)原型繼承

f1為何有Foo昔善、Object的原型方法骂蓖,其實就是通過原型鏈繼承萝风。繼承的過程可以表示為f1.__proto__ = Foo.prototype,即對象.__proto__ = 構造器.prototype

new實例實現(xiàn)繼承的過程其實與上面原理相同实幕,new的過程可以拆解為下面幾個步驟:

var temp = {};
temp.__proto__ = Foo.prototype; // 原型繼承
var f1 = Foo.call(temp);
return f1;

找出原型鏈

1) f1的原型鏈(紅色虛線)吝镣。

  1. f1為普通對象,它的構造器為Foo昆庇,以Foo為原型末贾,原型鏈第一鏈為f1.__proto__ == Foo.prototype
  2. Foo.prototype(注意這邊不是Foo)為json對象整吆,即普通對象拱撵,構造器為Object,以Object為原型表蝙,得出原型鏈第二鏈Foo.prototype.__proto__ == Object.prototype;
  3. Object.prototype以Null為原型拴测,原型鏈第三鏈為Object.prototype.__proto__ == null

f1的原型鏈可以用圖形表示:

image

可以在瀏覽器console打印驗證:

image

2) Foo的原型鏈(紫色虛線)

  1. Foo為函數(shù)對象府蛇,它的構造器為Function集索,以Function為原型,原型鏈第一鏈為Foo.__proto__ == Function.prototype;
  2. Function.prototype為json對象汇跨,即普通對象务荆,構造器為Object,以Object為原型穷遂,原型鏈第二鏈為Function.prototype.__proto__ == Object.prototype;
  3. 最后Object.prototype以Null為原型函匕,原型鏈第三鏈為Object.prototype.__proto__ == null;

Foo的原型鏈可以用圖形表示為:

image

 可以在瀏覽器console打印驗證:

image

3)小結

列出兩種原型鏈的目的是:

當js引擎執(zhí)行對象的屬性或方法時,先查找對象本身是否存在該方法蚪黑,如果不存在則會在原型鏈上查找盅惜。

因而f1擁有Foo、Object的原型方法忌穿,F(xiàn)oo擁有Function抒寂、Object的原型方法。

注意伴网,雖然f1原型鏈其中有一鏈是涉及到函數(shù)對象Foo,但f1并不擁有Function的原型方法妆棒,因為原型鏈并沒有延伸到Function澡腾。

比如下圖中bind是Function的原型方法,f1并沒有擁有糕珊。


image

總結

如何找出一個對象的原型鏈动分,只需要兩步

  1. 判斷對象是普通對象還是函數(shù)對象,得出對象的構造器
  2. 對象.proto = 構造器.prototype

關于最上面的圖形红选,只剩Object和Function的特殊關系和構造函數(shù)constructor沒有講到澜公,如果有講不清和講錯了的地方,請幫我指出來,我也跟大家一起在學習中坟乾,請輕噴(●ˇ?ˇ●)

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末迹辐,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子甚侣,更是在濱河造成了極大的恐慌明吩,老刑警劉巖,帶你破解...
    沈念sama閱讀 217,826評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件殷费,死亡現(xiàn)場離奇詭異印荔,居然都是意外死亡,警方通過查閱死者的電腦和手機详羡,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,968評論 3 395
  • 文/潘曉璐 我一進店門仍律,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人实柠,你說我怎么就攤上這事水泉。” “怎么了主到?”我有些...
    開封第一講書人閱讀 164,234評論 0 354
  • 文/不壞的土叔 我叫張陵茶行,是天一觀的道長。 經(jīng)常有香客問我登钥,道長畔师,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,562評論 1 293
  • 正文 為了忘掉前任牧牢,我火速辦了婚禮看锉,結果婚禮上,老公的妹妹穿的比我還像新娘塔鳍。我一直安慰自己伯铣,他們只是感情好,可當我...
    茶點故事閱讀 67,611評論 6 392
  • 文/花漫 我一把揭開白布轮纫。 她就那樣靜靜地躺著腔寡,像睡著了一般。 火紅的嫁衣襯著肌膚如雪掌唾。 梳的紋絲不亂的頭發(fā)上放前,一...
    開封第一講書人閱讀 51,482評論 1 302
  • 那天,我揣著相機與錄音糯彬,去河邊找鬼凭语。 笑死,一個胖子當著我的面吹牛撩扒,可吹牛的內容都是我干的似扔。 我是一名探鬼主播,決...
    沈念sama閱讀 40,271評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼炒辉!你這毒婦竟也來了豪墅?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 39,166評論 0 276
  • 序言:老撾萬榮一對情侶失蹤辆脸,失蹤者是張志新(化名)和其女友劉穎但校,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體啡氢,經(jīng)...
    沈念sama閱讀 45,608評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡状囱,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,814評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了倘是。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片亭枷。...
    茶點故事閱讀 39,926評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖搀崭,靈堂內的尸體忽然破棺而出叨粘,到底是詐尸還是另有隱情,我是刑警寧澤瘤睹,帶...
    沈念sama閱讀 35,644評論 5 346
  • 正文 年R本政府宣布升敲,位于F島的核電站,受9級特大地震影響轰传,放射性物質發(fā)生泄漏驴党。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,249評論 3 329
  • 文/蒙蒙 一获茬、第九天 我趴在偏房一處隱蔽的房頂上張望港庄。 院中可真熱鬧,春花似錦恕曲、人聲如沸鹏氧。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,866評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽把还。三九已至,卻和暖如春茸俭,著一層夾襖步出監(jiān)牢的瞬間吊履,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,991評論 1 269
  • 我被黑心中介騙來泰國打工瓣履, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留率翅,地道東北人练俐。 一個月前我還...
    沈念sama閱讀 48,063評論 3 370
  • 正文 我出身青樓袖迎,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子燕锥,可洞房花燭夜當晚...
    茶點故事閱讀 44,871評論 2 354

推薦閱讀更多精彩內容