理解 JavaScript 中的原型鏈

JavaScript 作為一門面對對象語言,但是卻不支持接口繼承课竣,只支持實現(xiàn)繼承嘉赎。JavaScript 中實現(xiàn)繼承就是通過原型鏈來實現(xiàn)。

簡介

首先了解構造函數(shù)于樟、原型對象和實例之間的關系公条。

  • 通過 new 操作符加構造函數(shù)的方式可以創(chuàng)建實例。
  • 構造函數(shù)具有相應的原型對象迂曲。
  • 在原型對象中定義的原型方法在所有實例中都能夠訪問到靶橱。

原理

接下來了解它們之間的關系是如何構建的。

構造函數(shù)

在 JavaScript 中聲明構造函數(shù)的時候路捧,都會為這個函數(shù)創(chuàng)建一個 prototype 屬性关霸。

//聲明構造函數(shù)
function Person(name) {
    this.name = name;
}
Person 構造函數(shù)的內(nèi)容
Person 構造函數(shù)的內(nèi)容

在瀏覽器下看 Person 構造函數(shù)函數(shù)就是以上這樣,prototype 屬性指向了這個構造函數(shù)的原型對象杰扫。
(實際上聲明任何函數(shù)都會有這個屬性队寇,只不過在構造函數(shù)中這個屬性才能夠發(fā)揮作用)

原型對象

聲明構造函數(shù)之后會為這個構造函數(shù)創(chuàng)建一個原型對象,為這個原型對象寫入屬性就可以在實例中訪問到章姓。

//聲明構造函數(shù)
function Person(name) {
    this.name = name;
}
//為原型對象寫入屬性和方法
Person.prototype.age = 18;
Person.prototype.sayName = function() {
    console.log(this.name);
};

在瀏覽器中展示如下


Person.prototype 原型對象的內(nèi)容
Person.prototype 原型對象的內(nèi)容

在瀏覽器中可以清楚地看到它的內(nèi)容佳遣,其中 constructor 屬性指回了構造函數(shù)本身。constructor 屬性和 prototype 屬性構建起了構造函數(shù)和原型對象之間的相互關系啤覆。

實例

用 new 操作符可以進行實例化苍日,創(chuàng)建這個構造函數(shù)的一個實例惭聂。

//聲明構造函數(shù)
function Person(name) {
    this.name = name;
}
//為原型對象寫入屬性和方法
Person.prototype.age = 18;
Person.prototype.sayName = function() {
    console.log(this.name);
};
//實例化
var person1 = new Person("demonly");

new 操作符的作用就是首先新建一個對象窗声,然后在這個對象中執(zhí)行構造函數(shù)中的代碼,最終返回這個對象辜纲。

依然還是在瀏覽器中看這個對象笨觅。


person1實例的內(nèi)容
person1實例的內(nèi)容

其中包含有構造函數(shù)寫入的 name 屬性和一個 _proto_ 屬性。 _proto_ 屬性指向這個實例的構造函數(shù)的原型對象耕腾,這是由瀏覽器生成的一個內(nèi)部屬性见剩,無法被訪問也無法修改。


person1._proto_ 屬性指向原型對象
person1._proto_ 屬性指向原型對象

由實例訪問原型對象中的屬性和方法就是通過 _proto_ 屬性扫俺。當訪問一個屬性或者方法時苍苞,首先會尋找實例中是否存在這個屬性,如果沒有的話就會到 _proto_ 指向的原型對象中尋找狼纬。因此只需要在原型對象中添加屬性和方法就讓這個構造函數(shù)創(chuàng)建的所有實例都能訪問到羹呵,包括在添加屬性之前實例化的實例。

為了更加直觀地表現(xiàn)它們的關系畫了這樣一張圖疗琉。


構造函數(shù)冈欢、實例和原型對象之間的關系
構造函數(shù)、實例和原型對象之間的關系

原型鏈

原型鏈的實現(xiàn)就是重寫構造函數(shù)的 prototype 屬性的指向盈简,從而使得瀏覽器在實例中訪問屬性的時候能夠在自定義的對象中找到凑耻。

我們現(xiàn)在再加入一個構造函數(shù)太示。

//聲明構造函數(shù)
function Person(name) {
    this.name = name;
}
//新建構造函數(shù)
function Animal() {};
//為新類型的原型對象寫入方法
Animal.prototype.breath = function() {
    console.log("i can breath");
}
//繼承
Person.prototype = new Animal();
//為原型對象寫入屬性和方法
Person.prototype.sayName = function() {
    console.log(this.name);
};
//實例化
var person1 = new Person("demonly");

繼承的實現(xiàn)部分我們改寫了 Person 構造函數(shù)的 prototype 的指向,使它指向了 Animal 類型的一個實例香浩。在瀏覽器中我們也可以看到 _proto_ 屬性的指向變成了 Animal 的實例类缤。


改寫原型對象后 person1._proto_指向了 Animal 的實例
改寫原型對象后 person1._proto_指向了 Animal 的實例

我們在 Person 類型的實例中也可以訪問 Animal 類型的方法。


在 person1中能夠訪問到 Animal 類型的方法
在 person1中能夠訪問到 Animal 類型的方法

當我們調(diào)用 breath 方法的時候邻吭,瀏覽器會首先在這個實例本身中尋找 breath 方法呀非,沒有找到就轉(zhuǎn)為到 _proto_ 所指向的 Person 的原型對象(即 Animal 類型的實例)中尋找,依然沒有找到就轉(zhuǎn)為到 _proto_ 所指向的 Animal 的原型對象中尋找镜盯。

原型鏈就是這樣通過 _proto_ 屬性的逐級連接實現(xiàn)的岸裙。如果再改寫 Animal 的原型對象,那么就可以再增加原型鏈的長度速缆。


原型鏈中的相互關系
原型鏈中的相互關系

這里需要注意的是降允,重寫原型對象僅僅改變了 Person 的prototype 屬性的指向,而在這之前寫入的原型方法都還會留在原來的原型對象上艺糜,在這之前實例化的實例的 _proto_ 屬性也依然會指向原來的原型對象剧董。

最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市破停,隨后出現(xiàn)的幾起案子翅楼,更是在濱河造成了極大的恐慌,老刑警劉巖真慢,帶你破解...
    沈念sama閱讀 216,496評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件毅臊,死亡現(xiàn)場離奇詭異,居然都是意外死亡黑界,警方通過查閱死者的電腦和手機管嬉,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,407評論 3 392
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來朗鸠,“玉大人蚯撩,你說我怎么就攤上這事≈蛘迹” “怎么了胎挎?”我有些...
    開封第一講書人閱讀 162,632評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長忆家。 經(jīng)常有香客問我犹菇,道長,這世上最難降的妖魔是什么弦赖? 我笑而不...
    開封第一講書人閱讀 58,180評論 1 292
  • 正文 為了忘掉前任项栏,我火速辦了婚禮,結(jié)果婚禮上蹬竖,老公的妹妹穿的比我還像新娘沼沈。我一直安慰自己流酬,他們只是感情好,可當我...
    茶點故事閱讀 67,198評論 6 388
  • 文/花漫 我一把揭開白布列另。 她就那樣靜靜地躺著芽腾,像睡著了一般。 火紅的嫁衣襯著肌膚如雪页衙。 梳的紋絲不亂的頭發(fā)上摊滔,一...
    開封第一講書人閱讀 51,165評論 1 299
  • 那天,我揣著相機與錄音店乐,去河邊找鬼艰躺。 笑死,一個胖子當著我的面吹牛眨八,可吹牛的內(nèi)容都是我干的腺兴。 我是一名探鬼主播,決...
    沈念sama閱讀 40,052評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼廉侧,長吁一口氣:“原來是場噩夢啊……” “哼页响!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起段誊,我...
    開封第一講書人閱讀 38,910評論 0 274
  • 序言:老撾萬榮一對情侶失蹤闰蚕,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后连舍,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體没陡,經(jīng)...
    沈念sama閱讀 45,324評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,542評論 2 332
  • 正文 我和宋清朗相戀三年烟瞧,在試婚紗的時候發(fā)現(xiàn)自己被綠了诗鸭。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片染簇。...
    茶點故事閱讀 39,711評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡参滴,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出锻弓,到底是詐尸還是另有隱情砾赔,我是刑警寧澤,帶...
    沈念sama閱讀 35,424評論 5 343
  • 正文 年R本政府宣布青灼,位于F島的核電站暴心,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏杂拨。R本人自食惡果不足惜专普,卻給世界環(huán)境...
    茶點故事閱讀 41,017評論 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望弹沽。 院中可真熱鬧檀夹,春花似錦筋粗、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,668評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至蚌堵,卻和暖如春买决,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背吼畏。 一陣腳步聲響...
    開封第一講書人閱讀 32,823評論 1 269
  • 我被黑心中介騙來泰國打工督赤, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人泻蚊。 一個月前我還...
    沈念sama閱讀 47,722評論 2 368
  • 正文 我出身青樓够挂,卻偏偏與公主長得像,于是被迫代替她去往敵國和親藕夫。 傳聞我的和親對象是個殘疾皇子孽糖,可洞房花燭夜當晚...
    茶點故事閱讀 44,611評論 2 353

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