原型鏈

對象

JavaScript中伞梯,萬物皆對象!分為普通對象帚屉、函數(shù)對象谜诫。

  • 普通對象:
    1、最普通的對象攻旦,有proto屬性(指向其原型)喻旷,沒有prototype屬性。
    2牢屋、原型對象(Person.prototype) 原型對象還有constructor屬性指向構(gòu)造函數(shù)對象且预。

  • 函數(shù)對象
    凡是通過new Function()創(chuàng)建的都是函數(shù)對象。
    Function烙无、Object锋谐、Array、Date皱炉、String厘肮、自定義函數(shù)
    特例:Function.prototype(原型對象岛请,卻也是函數(shù)對象)钮莲;

新建對象:用new Object或者{}建的對象是普通對象凉唐。它沒有prototype屬性,只有__ proto __屬性肘习,它指向Object.prototype。
Object:Object是一個函數(shù)對象,Object的原型就是一個Object對象惯退,它里面存在著一些對象的方法和屬性,例如常見的toString方法从藤。
Array:也是一個函數(shù)對象催跪,它的原型就是Array.prototype。它里面存在一些數(shù)組的方法和屬性夷野,例如常見的push懊蒸,pop等方法。
Function:Function也是一個函數(shù)對象悯搔,但它有點特殊骑丸,它的原型就是一個function空函數(shù)。
自定義函數(shù):它的原型就是你給它指定的東西妒貌。如果你不指定通危,那它的原型就是一個Object.prototype。

prototype

原型的概念:每一個JavaScript對象(除null外)創(chuàng)建的時候灌曙,就會與之關(guān)聯(lián)另一個對象菊碟,這個對象就是我們所說的原型,每個對象都會從原型中“繼承”屬性在刺。

在JavaScript中逆害,每個函數(shù)都有一個prototype屬性,這個屬性指向函數(shù)的原型對象增炭。

function Person (age) {
    this.age = age
}
Person.prototype.name = "kavin";
var p1 = new Person();
var p2 = new Person();
console.log(p1.name); // kavin
console.log(p2.name); // kavin

上述例子中忍燥,函數(shù)的prototype指向了一個對象,而這個對象正是調(diào)用構(gòu)造函數(shù)時創(chuàng)建的實例的原型隙姿,也就是p1和p2的原型梅垄。

構(gòu)造函數(shù)和原型之間的關(guān)系:

Person(構(gòu)造函數(shù))  →→→→ prototype →→→→  Person.prototype(原型)
proto

每個對象(除null外)都會有的屬性,叫做proto输玷,這個屬性會指向該對象的原型队丝。

function Person() {
    // 同上
}
var p3 = new Person();
console.log(person.__proto__ === Person.prototype); // true

補充說明:
絕大部分瀏覽器都支持這個非標準的方法訪問原型,然而它并不存在于Person.prototype中欲鹏,實際上机久,它來自于Object.prototype。與其說是一個屬性赔嚎,不如說是一個getter/setter膘盖,當使用Obj.__ proto __時胧弛,可以理解返回了Object.getPrototypeOf(obj)。

實例對象與原型的關(guān)系:

Person(構(gòu)造函數(shù))  →→→→ prototype →→→→  Person.prototype(原型)
    ↓                                        ↑  
    ↓                                        ↑
  p3(實例) →→→→→→→→→→→→→→→→→→→→→→→→→→→→→  __proto__
constructor

每個原型都有一個constructor屬性侠畔,指向該關(guān)聯(lián)的構(gòu)造函數(shù)结缚。

function Person() {
   // ... 同上
}
console.log(Person === Person.prototype.constructor); // true

PPS:

function Person() {
   // ... 同上
}
var p4 = new Person();
console.log(p4.__proto__ === Person.prototype); // true
console.log(Person === Person.prototype.constructor); // true
console.log(Object.getPrototypeOf(person) === Person.prototype); // true
console.log(p4.constructor === Person); // true

最后一條,當獲取p4.constructor時软棺,其實p4中并沒有constructor屬性红竭,當不能讀取到constructor屬性時,會從p4的原型也就是Peson.prototype中讀取喘落,正好原型中有該屬性茵宪,所以:p4.constructor === Person.prototype.constructor (即:p4.constructor === Person.prototype.constructor === Person)

補充原型指向構(gòu)造函數(shù)指針后的關(guān)系圖:

                  →→→→ prototype →→→→
Person(構(gòu)造函數(shù))                        Person.prototype(原型)
     ↓            ←←←← constructor ←←←←       ↑                               
     ↓                                        ↑
  p3(實例) →→→→→→→→→→→→→→→→→→→→→→→→→→→→→→  __proto__
實例與原型

讀取實例的某一項屬性時,如果自身沒有瘦棋,就會查找與自身對象關(guān)聯(lián)的原型中的是否含有這一項屬性稀火,若還無,則遞歸的查找原型的原型赌朋,直至找到最頂層(ps:原型也是一個對象憾股,Object)。
eg:

function Person() {
    // ...
}
Person.prototype.sex = "Alpha";
var p5 = new Person;

p5.sex= "Omage";
console.log(p5.sex); // Omage

delete p5.sex;
console.log(p5.name); // Alpha
原型鏈

Ps:上方的“原型”就是對“原型對象”的簡述箕慧。
構(gòu)造函數(shù)、原型茴恰、實例的關(guān)系總結(jié):每個構(gòu)造函數(shù)都有一個原型對象颠焦,原型對象都包含一個指向構(gòu)造函數(shù)的指針,而實例都包含一個指向原型對象的內(nèi)部指針往枣。
每個對象都有一個指向它的原型對象(prototype)的內(nèi)部鏈接伐庭。這個原型對象又有自己的原型,直到某個對象的原型為null為null為止(也就是不再有原型指向)分冈,組成這條鏈的最后一環(huán)圾另。這種一級一級的鏈結(jié)構(gòu)就稱為原型鏈(prototype chain)
PPS:

Object.prototype.__proto__ === null; // true;
// null 表示“沒有對象”雕沉,即該處不應(yīng)該有值集乔。所以O(shè)bject.prototype.__proto__的值為null,表達的意思就是Object.prototype沒有原型坡椒。
// 當查找屬性查到Object.prototype就可以停止繼續(xù)查找了扰路。

最終的原型鏈關(guān)系圖:

                  →→→→ prototype →→→→
Person(構(gòu)造函數(shù))                        Person.prototype(原型)  →→→→
     ↓            ←←←← constructor ←←←←      ↑                     ↓  
     ↓                                       ↑                     ↓  
  p3(實例) →→→→→→→→→→→→→→→→→→→→→→→→→→→→→→  __proto__           __proto__ 
                                                                   ↓ 
                                                                   ↓
                                                     ←←←←←←←←←←←←← ↓
                  →→→→ prototype →→→→                ↓
Object(構(gòu)造函數(shù))                        Object.prototype(原型)
                 ←←←← constructor ←←←←               ↓  
                                                     ↓
                                                 __proto__ 
                                                     ↓
                                                     ↓
                                                   null            

上方相互關(guān)聯(lián)的原型組成的鏈狀結(jié)構(gòu)就是原型鏈,也就是:p3(實例) --> Person.prototype(原型) --> Object.prototype(原型) --> null

參考地址_1 參考地址_2 參考地址_3
參考地址_4 參考地址_5

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末倔叼,一起剝皮案震驚了整個濱河市汗唱,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌丈攒,老刑警劉巖哩罪,帶你破解...
    沈念sama閱讀 219,110評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件授霸,死亡現(xiàn)場離奇詭異,居然都是意外死亡际插,警方通過查閱死者的電腦和手機碘耳,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,443評論 3 395
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來腹鹉,“玉大人藏畅,你說我怎么就攤上這事」χ洌” “怎么了愉阎?”我有些...
    開封第一講書人閱讀 165,474評論 0 356
  • 文/不壞的土叔 我叫張陵,是天一觀的道長力奋。 經(jīng)常有香客問我榜旦,道長,這世上最難降的妖魔是什么景殷? 我笑而不...
    開封第一講書人閱讀 58,881評論 1 295
  • 正文 為了忘掉前任溅呢,我火速辦了婚禮,結(jié)果婚禮上猿挚,老公的妹妹穿的比我還像新娘咐旧。我一直安慰自己,他們只是感情好绩蜻,可當我...
    茶點故事閱讀 67,902評論 6 392
  • 文/花漫 我一把揭開白布铣墨。 她就那樣靜靜地躺著,像睡著了一般办绝。 火紅的嫁衣襯著肌膚如雪伊约。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,698評論 1 305
  • 那天孕蝉,我揣著相機與錄音屡律,去河邊找鬼。 笑死降淮,一個胖子當著我的面吹牛超埋,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播佳鳖,決...
    沈念sama閱讀 40,418評論 3 419
  • 文/蒼蘭香墨 我猛地睜開眼纳本,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了腋颠?” 一聲冷哼從身側(cè)響起繁成,我...
    開封第一講書人閱讀 39,332評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎淑玫,沒想到半個月后巾腕,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體面睛,經(jīng)...
    沈念sama閱讀 45,796評論 1 316
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,968評論 3 337
  • 正文 我和宋清朗相戀三年尊搬,在試婚紗的時候發(fā)現(xiàn)自己被綠了叁鉴。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,110評論 1 351
  • 序言:一個原本活蹦亂跳的男人離奇死亡佛寿,死狀恐怖幌墓,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情冀泻,我是刑警寧澤常侣,帶...
    沈念sama閱讀 35,792評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站弹渔,受9級特大地震影響胳施,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜肢专,卻給世界環(huán)境...
    茶點故事閱讀 41,455評論 3 331
  • 文/蒙蒙 一舞肆、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧博杖,春花似錦椿胯、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,003評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至跟继,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間镣丑,已是汗流浹背舔糖。 一陣腳步聲響...
    開封第一講書人閱讀 33,130評論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留莺匠,地道東北人金吗。 一個月前我還...
    沈念sama閱讀 48,348評論 3 373
  • 正文 我出身青樓,卻偏偏與公主長得像趣竣,于是被迫代替她去往敵國和親摇庙。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,047評論 2 355

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