原型與原型鏈

原型(prototype)

在JavaScript中,原型(prototype)也是一個對象,通過原型可以實現(xiàn)對象的屬性繼承,JavaScript的對象中都包含了一個prototype內(nèi)部屬性染坯,這個屬性所對應(yīng)的就是該對象的原型羹应。
prototype作為對象的內(nèi)部屬性掀鹅,是不能被直接訪問的散休。所以為了方便查看一個對象的原型,F(xiàn)irefox和Chrome中提供了 __ proto__ 這個非標(biāo)準(zhǔn)(不是所有瀏覽器都支持)的訪問器(ECMA引入了標(biāo)準(zhǔn)對象原型訪問器 Object.getPrototype(object))乐尊。在JavaScript的原型對象中戚丸,還包含了一個constructior屬性,這個屬性對應(yīng)創(chuàng)建所有指向改原型的實例的構(gòu)造函數(shù)扔嵌。

原型(prototype)作用

通過構(gòu)造函數(shù)為實例對象定義屬性限府,雖然很方便,但是有一個缺點痢缎。同一個構(gòu)造函數(shù)的多個實例之間胁勺,無法共享屬性,從而造成對系統(tǒng)資源的浪費(fèi)独旷。
JavaScript 繼承機(jī)制的設(shè)計思想就是署穗,原型對象的所有屬性和方法,都能被實例對象共享嵌洼。也就是說案疲,如果屬性和方法定義在原型上,那么所有實例對象就能共享咱台,不僅節(jié)省了內(nèi)存络拌,還體現(xiàn)了實例對象之間的聯(lián)系俭驮。

JavaScript規(guī)定回溺,每個函數(shù)都有一個prototype屬性,指向一個對象混萝。

function f() {}
typeof f.prototype  // "object"

上面代碼中遗遵,函數(shù)f默認(rèn)具有prototype屬性,指向一個對象逸嘀。

對于普通函數(shù)來說车要,該屬性基本無用。但是崭倘,對于構(gòu)造函數(shù)來說翼岁,生成實例的時候,該屬性會自動成為實例對象的原型司光。

function Animal(name){
  this.name = name;
}
Animal.prototype.color = 'white';

var cat1 = new Animal('大貓')琅坡;
var cat2 = new Animal('二貓');

cat1.color   // 'white'
cat2.color  // 'white'

上面代碼中残家,構(gòu)造函數(shù)Animal的prototype屬性榆俺,就是實例對象cat1和cat2的原型對象。
原型對象上天驕一個color屬性,結(jié)果實例對象都共享了該屬性。

原型對象的屬性不是實例對象自身的屬性茴晋。只要修改原型對象陪捷,變動就立刻會體現(xiàn)在所有實例對象上。

Animal.prototype.color = 'yellow';

cat1.color   // 'yellow'
cat2.color  // 'yellow'

上面代碼中诺擅,原型對象的color屬性的值變?yōu)閥ellow市袖,兩個實例對象的color屬性立刻跟著變了。
這是因為實例對象其實沒有color屬性掀虎,都是讀取原型對象的color屬性凌盯。
也就是說,當(dāng)實例對象本身沒有某個屬性或方法的時候烹玉,它會到原型對象去尋找該屬性或方法驰怎。這就是原型對象的特殊之處。

如果實例對象自身就有某個屬性或方法二打,它就不會再去原型對象尋找這個屬性或方法县忌。

cat1.color = 'black';
cat1.color  //'black'
cat2.color  // 'yellow'
Animal.prototype.color  //'yellow'
上面代碼中,實例對象cat1的color屬性改為black继效,就使得它不再去原型對象讀取color屬性症杏,后者的值依然為yellow。

原型對象的作用瑞信,就是定義所有實例對象共享的屬性和方法厉颤。這也是它被稱為原型對象的原因,而實例對象可以視作從原型對象衍生出來的子對象凡简。

原型鏈

原型鏈的基本思想是利用原型讓一個引用類型繼承另一個引用類型的屬性和方法逼友。因為每個對象和原型都有原型,對象的原型指向原型對象秤涩,而父的原型又指向父的父帜乞,這種原型層層連接起來的就構(gòu)成了原型鏈(prototype chain)。

  • 構(gòu)造函數(shù)筐眷、原型和實例的關(guān)系:
    每個構(gòu)造函數(shù)都有一個原型對象黎烈,原型對象包含一個指向構(gòu)造函數(shù)的指針(prototype),而實例則包含一個指向原型對象的內(nèi)部指針(__ proto __)匀谣。
原型鏈.png

如果一層層地上溯照棋,所有對象的原型最終都可以上溯到Object.prototype,即Object構(gòu)造函數(shù)的prototype屬性武翎。也就是說烈炭,所有對象都繼承了Object.prototype的屬性。這就是所有對象都有valueOf和toString方法的原因后频,因為這是從Object.prototype繼承的梳庆。

那么暖途,Object.prototype對象有沒有它的原型呢?回答是Object.prototype的原型是null膏执。null沒有任何屬性和方法驻售,也沒有自己的原型。因此更米,原型鏈的盡頭就是null欺栗。

注意,一級級向上征峦,在整個原型鏈上尋找某個屬性迟几,對性能是有影響的。所尋找的屬性在越上層的原型對象栏笆,對性能的影響越大类腮。如果尋找某個不存在的屬性,將會遍歷整個原型鏈蛉加。

_ proto_ 和 prototype的區(qū)別是蚜枢?

一句話:_ proto_是對象的屬性;prototype是函數(shù)的屬性

  1. 不能斷章取義针饥,_ proto_ 和 prototype只是兩個key而已
  2. 我們一般研究對象的__ proto__和函數(shù)的prototype
  3. 對象.__ proto__ === 某函數(shù).prototype
  4. 如果把函數(shù)看成對象厂抽,那么函數(shù).__ proto__ === Function.prototype
  5. 如果把 Function 看成對象,那么 Function.__ proto__ === Function.prototype
  6. Function.prototype._ proto_ == Object.prototype

文章著作權(quán)歸饑人谷_sunny和饑人谷所有丁眼,轉(zhuǎn)載須說明來源

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末筷凤,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子苞七,更是在濱河造成了極大的恐慌藐守,老刑警劉巖,帶你破解...
    沈念sama閱讀 217,734評論 6 505
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件莽鸭,死亡現(xiàn)場離奇詭異吗伤,居然都是意外死亡吃靠,警方通過查閱死者的電腦和手機(jī)硫眨,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,931評論 3 394
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來巢块,“玉大人礁阁,你說我怎么就攤上這事∽迳荩” “怎么了姥闭?”我有些...
    開封第一講書人閱讀 164,133評論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長越走。 經(jīng)常有香客問我棚品,道長靠欢,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,532評論 1 293
  • 正文 為了忘掉前任铜跑,我火速辦了婚禮门怪,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘锅纺。我一直安慰自己掷空,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 67,585評論 6 392
  • 文/花漫 我一把揭開白布囤锉。 她就那樣靜靜地躺著坦弟,像睡著了一般。 火紅的嫁衣襯著肌膚如雪官地。 梳的紋絲不亂的頭發(fā)上酿傍,一...
    開封第一講書人閱讀 51,462評論 1 302
  • 那天,我揣著相機(jī)與錄音驱入,去河邊找鬼拧粪。 笑死,一個胖子當(dāng)著我的面吹牛沧侥,可吹牛的內(nèi)容都是我干的可霎。 我是一名探鬼主播,決...
    沈念sama閱讀 40,262評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼宴杀,長吁一口氣:“原來是場噩夢啊……” “哼癣朗!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起旺罢,我...
    開封第一講書人閱讀 39,153評論 0 276
  • 序言:老撾萬榮一對情侶失蹤旷余,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后扁达,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體正卧,經(jīng)...
    沈念sama閱讀 45,587評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,792評論 3 336
  • 正文 我和宋清朗相戀三年跪解,在試婚紗的時候發(fā)現(xiàn)自己被綠了炉旷。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,919評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡叉讥,死狀恐怖窘行,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情图仓,我是刑警寧澤罐盔,帶...
    沈念sama閱讀 35,635評論 5 345
  • 正文 年R本政府宣布,位于F島的核電站救崔,受9級特大地震影響惶看,放射性物質(zhì)發(fā)生泄漏捏顺。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,237評論 3 329
  • 文/蒙蒙 一纬黎、第九天 我趴在偏房一處隱蔽的房頂上張望草丧。 院中可真熱鬧,春花似錦莹桅、人聲如沸昌执。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,855評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽懂拾。三九已至,卻和暖如春铐达,著一層夾襖步出監(jiān)牢的瞬間岖赋,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,983評論 1 269
  • 我被黑心中介騙來泰國打工瓮孙, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留唐断,地道東北人。 一個月前我還...
    沈念sama閱讀 48,048評論 3 370
  • 正文 我出身青樓杭抠,卻偏偏與公主長得像脸甘,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子偏灿,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,864評論 2 354

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