面試 | JS高級---原型到原型鏈(一看就懂)

文中關(guān)于一些概念說了可能三到四邊求豫,或者更多熄云,希望是加深大家的印象膨更,希望理解,重要的概念說三遍缴允,只要你能理解荚守,我啰嗦五次都愿意。

構(gòu)造函數(shù)創(chuàng)建對象

==========咱們先來一個栗子=======

function Person(name){    //構(gòu)造函數(shù)           this.name=name; } Person.prototype.printName=function( ){   //原型對象            alert(this.name); } var person1=new Person('ming');  //實例化對象 console.log(person1.__proto__);  //這里自己打印一下练般,印象更深刻 console.log(person1.constructor);// console.log(Person.prototype);//var person2=new Person('Frank');
   (注意這里的大小寫)Person的實例person1中包含了name屬性矗漾,同時也自動生成一個__proto__屬性,該屬性指向Person的prototype薄料,可以訪問到prototype內(nèi)定義的printName方法敞贡,大概就  是這個樣子的:每個JavaScript函數(shù)都有prototype屬性,這個屬性引用了一個對象摄职,這個對象就是**原型對象**誊役。**原型對象初始化的時候是空的**,我們可以在里面自定義任何屬性和方法谷市,這些方法和屬性都將被該**構(gòu)造函數(shù)**所創(chuàng)建的對象**繼承**势木。(下一篇我會更詳細的介紹原型,很暴力的)

實例是通過構(gòu)造函數(shù)創(chuàng)建的歌懒。實例一創(chuàng)造出來就具有constructor屬性(指向構(gòu)造函數(shù))和proto屬性(指向原型對象),

構(gòu)造函數(shù)中有一個prototype屬性溯壶,這個屬性是一個指針及皂,指向它的原型對象甫男。

原型對象內(nèi)部也有一個指針(constructor屬性)指向構(gòu)造函數(shù):Person.prototype.constructor = Person;

實例可以訪問原型對象上定義的屬性和方法。

在這里person1和person2就是實例验烧,prototype是他們的原型對象板驳。

//========再來一個栗子===========

function Animal(name){ //構(gòu)造函數(shù)

    this.name = name; //設(shè)置對象屬性

}

Animal.prototype.behavior = function() {  

    console.log("this is a "+this.name);

}

var Dog = new Animal("dog");

var Cat = new Animal("cat");

Dog.behavior();//通過Dog對象直接調(diào)用behavior方法

Cat.behavior(); //"this is a cat"

console.log(Dog.behavior==Cat.behavior);// true;

//總結(jié):構(gòu)造函數(shù)的prototype上定義的方法確實可以通過對象直接調(diào)用到,而且代碼是共享的碍拆。prototype屬性指向Animal對象若治。

================= 開始正題 ==================

-1-Prototype:

每個函數(shù)都有一個prototype屬性,也只有函數(shù)有該屬性感混。

function Person(){ }

Person.prototype.name = 'name';

var person1 = new Person();

var person2 = new Person();

console.log(person1.name) // name

console.log(person2.name) //name

問:那這個函數(shù)的prototype屬性到底指向的是什么呢端幼?是這個函數(shù)的原型嗎?

| |
| |

總結(jié):函數(shù)的prototype屬性指向了一個對象弧满,這個對象正是調(diào)用該構(gòu)造函數(shù)而創(chuàng)建的實例的原型,也就是這個例子中的person1和person2的原型婆跑。

問:什么是原型?每一個JavaScript對象(null除外)在創(chuàng)建的時候就會與之關(guān)聯(lián)另一個對象庭呜,這個對象就是我們所說的原型滑进,每一個對象都會從原型”繼承”屬性。

-2-proto

怎么表示實例與實例原型募谎,也就是person和Person.prototype之間的關(guān)系呢扶关,這時候我們就要講到第二個屬性:

proto。每一個JavaScript對象(除了null)都具有的一個屬性数冬,叫proto节槐,這個屬性會指向該對象的原型。

function Person( ){

}

var person = new Person();

console.log(person.proto === Person.prototype); //true

問:既然實例對象和構(gòu)造函數(shù)都可以指向原型吉执,那么原型是否有屬性指向構(gòu)造函數(shù)或者實例呢疯淫?

-3- constructor

沒有指向?qū)嵗模驗橐粋€構(gòu)造函數(shù)可以生成多個實例戳玫,但是原型指向構(gòu)造函數(shù)是有的熙掺,這就要講到第三個屬性:construcotr,每個原型都有一個constructor屬性指向關(guān)聯(lián)的構(gòu)造函數(shù)

為了驗證這一點咕宿,我們可以嘗試:

function Person() {

}

console.log(Person === Person.prototype.constructor); //true

精華----綜上總結(jié):(看清大下寫)

function Person() { //構(gòu)造函數(shù)

}

var person = new Person(); //實例對象

console.log(person.proto == Person.prototype) //true

console.log(Person.prototype.constructor == Person) // true// 順便學(xué)習(xí)一個ES5的方法,可以獲得對象的原型console.log(Object.getPrototypeOf(person) === Person.prototype) //true

實例與原型

當讀取實例的屬性時币绩,如果找不到,就會查找與對象關(guān)聯(lián)的原型中的屬性府阀,如果還查不到缆镣,就去找原型的原型,一直找到最頂層為止试浙。

======舉個例子:=========

function Person() {

}

Person.prototype.name = 'name';

var person = new Person();

person.name = 'name of this person';

console.log(person.name) // name of this person

delete person.name;

console.log(person.name) // name

我設(shè)置了person的name屬性董瞻,所以我可以讀取到為’name of this person’,當我刪除了person的name屬性時,讀取person.name钠糊,從person中找不到就會從person的原型也就是person.proto == Person.prototype中查找挟秤,幸運的是我們找到了為’name’,但是萬一還沒有找到呢抄伍?哪原型的原型又是什么呢艘刚?

在前面,我說過原型也是一個對象截珍,既然是對象攀甚,我就可以用最原始的方式創(chuàng)建它,那就是

var obj = new Object();//字面兩創(chuàng)建對象new一個

obj.name = 'name'岗喉;

console.log(obj.name) // name

所以原型對象是通過Object構(gòu)造函數(shù)生成的秋度,結(jié)合之前所講,實例的proto指向構(gòu)造函數(shù)的prototype,

原型鏈

問:Object.prototype的原型是什么?

null沈堡,嗯静陈,對就是null,所以查到Object.prototype就可以停止查找了

補充,最后,補充和糾正本文中一些不嚴謹?shù)牡胤剑?/strong>

首先是constructor,

function Person() {

}

var person = new Person();

console.log(person.constructor === Person); // true

當獲取person.constructor時诞丽,其實person中并沒有constructor屬性,當不能讀取到constructor屬性時鲸拥,會先從person的原型也就是Person.prototype中讀取,正好原型中有該屬性僧免,所以

person.constructor === Person.prototype.constructor

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末刑赶,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子懂衩,更是在濱河造成了極大的恐慌撞叨,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,104評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件浊洞,死亡現(xiàn)場離奇詭異牵敷,居然都是意外死亡,警方通過查閱死者的電腦和手機法希,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,816評論 3 399
  • 文/潘曉璐 我一進店門枷餐,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人苫亦,你說我怎么就攤上這事毛肋。” “怎么了屋剑?”我有些...
    開封第一講書人閱讀 168,697評論 0 360
  • 文/不壞的土叔 我叫張陵润匙,是天一觀的道長。 經(jīng)常有香客問我唉匾,道長孕讳,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 59,836評論 1 298
  • 正文 為了忘掉前任,我火速辦了婚禮厂财,結(jié)果婚禮上油啤,老公的妹妹穿的比我還像新娘。我一直安慰自己蟀苛,他們只是感情好,可當我...
    茶點故事閱讀 68,851評論 6 397
  • 文/花漫 我一把揭開白布逮诲。 她就那樣靜靜地躺著帜平,像睡著了一般。 火紅的嫁衣襯著肌膚如雪梅鹦。 梳的紋絲不亂的頭發(fā)上裆甩,一...
    開封第一講書人閱讀 52,441評論 1 310
  • 那天,我揣著相機與錄音齐唆,去河邊找鬼嗤栓。 笑死,一個胖子當著我的面吹牛箍邮,可吹牛的內(nèi)容都是我干的茉帅。 我是一名探鬼主播,決...
    沈念sama閱讀 40,992評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼锭弊,長吁一口氣:“原來是場噩夢啊……” “哼堪澎!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起味滞,我...
    開封第一講書人閱讀 39,899評論 0 276
  • 序言:老撾萬榮一對情侶失蹤樱蛤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后剑鞍,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體昨凡,經(jīng)...
    沈念sama閱讀 46,457評論 1 318
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,529評論 3 341
  • 正文 我和宋清朗相戀三年蚁署,在試婚紗的時候發(fā)現(xiàn)自己被綠了踊赠。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,664評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡饲宛,死狀恐怖险掀,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情田度,我是刑警寧澤妒御,帶...
    沈念sama閱讀 36,346評論 5 350
  • 正文 年R本政府宣布,位于F島的核電站镇饺,受9級特大地震影響乎莉,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,025評論 3 334
  • 文/蒙蒙 一惋啃、第九天 我趴在偏房一處隱蔽的房頂上張望哼鬓。 院中可真熱鬧,春花似錦边灭、人聲如沸异希。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,511評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽称簿。三九已至,卻和暖如春惰帽,著一層夾襖步出監(jiān)牢的瞬間憨降,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,611評論 1 272
  • 我被黑心中介騙來泰國打工该酗, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留授药,地道東北人。 一個月前我還...
    沈念sama閱讀 49,081評論 3 377
  • 正文 我出身青樓呜魄,卻偏偏與公主長得像悔叽,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子耕赘,可洞房花燭夜當晚...
    茶點故事閱讀 45,675評論 2 359

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