對(duì)原型與原型鏈的理解

原型對(duì)象

javascript語言是一種面向?qū)ο蟮恼Z言钉鸯,它沒有"子類"和"父類"的概念,里面所有的數(shù)據(jù)類型都是對(duì)象邮辽,如何將這些對(duì)象聯(lián)系起來呢唠雕?

Brendan Eich在考慮設(shè)計(jì)繼承機(jī)制的時(shí)候,參考了C++和JAVA使用new命令吨述,通過調(diào)用類的構(gòu)造函數(shù)生成實(shí)例的方式岩睁,將new命令引入javascript。

C++的寫法是:

ClassName *object = new ClassName(param);

Java的寫法是:

Person person = new Person();

但是揣云,javascript里面沒有“類”這個(gè)概念捕儒,那么,Brendan Eich決定直接在new后面跟一個(gè)構(gòu)造函數(shù)灵再,來生成實(shí)例肋层。

構(gòu)造函數(shù)是什么?構(gòu)造函數(shù)與其他函數(shù)唯一的區(qū)別在于調(diào)用方式不同翎迁。任何函數(shù)只要通過new來調(diào)用就可以作為構(gòu)造函數(shù)栋猖,它是用來創(chuàng)建特定類型的對(duì)象。

下面定義一個(gè)構(gòu)造函數(shù)Female:

 1    function Female(name){
2           this.name = name;
3           this.sex = 'female';  
4    }

通過new命令來生成一個(gè)person實(shí)例:

var person1 = new Female("Summer")

這里汪榔,構(gòu)造函數(shù)Female就是實(shí)例對(duì)象person1的原型F牙!痴腌!Female里的this關(guān)鍵字就指的是person1這個(gè)對(duì)象雌团!

new出來的person1對(duì)象此時(shí)已經(jīng)和Female再無聯(lián)系了!也就是說每一個(gè)new出來的實(shí)例都有自己的屬性和方法的副本士聪,是獨(dú)立的的锦援!修改其中一個(gè)不會(huì)影響另一個(gè)!

var person1 = new Female("Summer");
var person2 = new Female("Lily");

person2.sex = 'male';

console.log(person1.sex)      // female
console.log(person2.sex)      // male

但是剥悟,我們希望構(gòu)造函數(shù)中的sex屬性是一個(gè)共有屬性灵寺,那么此時(shí)用這樣的方法曼库,每個(gè)實(shí)例中都有一個(gè)相同的sex屬性,會(huì)造成資源極大的浪費(fèi)略板!

那么原型對(duì)象就即將登場(chǎng)了毁枯!Brendan Eich決定給每一個(gè)構(gòu)造函數(shù)都設(shè)置一個(gè)prototype屬性,這個(gè)屬性就指向原型對(duì)象叮称。其實(shí)原型對(duì)象就只是個(gè)普通對(duì)象种玛,里面存放著所有實(shí)例對(duì)象需要共享的屬性和方法!所以瓤檐,我們把需要共享的放到原型對(duì)象里赂韵,把那些不需要共享的屬性和方法存在在構(gòu)造函數(shù)里!

那么上面的代碼可改寫如下:

  function Person(name,age){
            this.name = name;
        }
        Person.prototype.sex = 'female';

        var person1 = new Person("Summer");
        var person2 = new Person("Lily");
        
        console.log(person1.sex)      // female
        console.log(person2.sex)      // female

        Person.prototype.sex = 'male';

        console.log(person1.sex)      // male
        console.log(person2.sex)      // male

可以看出距帅,修改prototype屬性會(huì)影響它的所有實(shí)例的sex的值S蚁恰!

實(shí)例一旦創(chuàng)建出來就會(huì)自動(dòng)引用prototype對(duì)象的屬性和方法碌秸!所以實(shí)例對(duì)象的屬性和方法一般分為兩種:一種是自身的,一種是引用自prototype的悄窃。

具體實(shí)現(xiàn)是這樣的:

  每當(dāng)代碼讀取某個(gè)對(duì)象的某個(gè)屬性的時(shí)候讥电,都會(huì)執(zhí)行一次搜索刃泡。首先從對(duì)象實(shí)例本身開始馋贤,如果在實(shí)例中找到了該屬性,則返回該屬性的值乔外,如果沒有找到横媚,則順著**原型鏈指針**向上纠炮,到原型對(duì)象中去找,如果如果找到就返回該屬性值灯蝴。

這里要提一點(diǎn)恢口,如果為對(duì)象實(shí)例添加了一個(gè)屬性與原型中同名,則該屬性會(huì)屏蔽掉原型中的同名屬性穷躁,不會(huì)去修改它耕肩!使用delete可以刪除實(shí)例中的屬性(提到delete那要插一句delete只能刪除對(duì)象下的屬性,不能刪除變量和參數(shù)问潭!)

原型鏈

事實(shí)上猿诸,js里完全依靠"原型鏈"(prototype chain)模式來實(shí)現(xiàn)繼承。

上面說完原型對(duì)象狡忙。下面要扒一扒proto梳虽、prototype、constructor

proto:事實(shí)上就是原型鏈指針T肿隆窜觉!

prototype:上面說到這個(gè)是指向原型對(duì)象的

constructor:每一個(gè)原型對(duì)象都包含一個(gè)指向構(gòu)造函數(shù)的指針谷炸,就是constructor

繼承實(shí)現(xiàn)方式:

為了實(shí)現(xiàn)繼承,proto會(huì)指向上一層的原型對(duì)象竖螃,而上一層的結(jié)構(gòu)依然類似淑廊,那么就利用proto一直指向Object的原型對(duì)象上!Object.prototype.proto = null;表示到達(dá)最頂端特咆。如此形成了原型鏈繼承季惩。

下面有個(gè)圖解非常經(jīng)典,我自己也手畫了一遍去理解腻格,真的非常有效~

image

大致總結(jié)一下就是:

Object是作為眾多new出來的實(shí)例的基類 function Object(){ [ native code ] }

Function是作為眾多function出來的函數(shù)的基類 function Function(){ [ native code ] }

構(gòu)造函數(shù)的proto(包括Function.prototype和Object.prototype)都指向Function.prototype

原型對(duì)象的proto都指向Object.prototype

Object.prototype.proto指向null

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末画拾,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子菜职,更是在濱河造成了極大的恐慌青抛,老刑警劉巖,帶你破解...
    沈念sama閱讀 217,509評(píng)論 6 504
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件酬核,死亡現(xiàn)場(chǎng)離奇詭異蜜另,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)嫡意,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,806評(píng)論 3 394
  • 文/潘曉璐 我一進(jìn)店門举瑰,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人蔬螟,你說我怎么就攤上這事此迅。” “怎么了旧巾?”我有些...
    開封第一講書人閱讀 163,875評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵耸序,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我鲁猩,道長(zhǎng)坎怪,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,441評(píng)論 1 293
  • 正文 為了忘掉前任绳匀,我火速辦了婚禮芋忿,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘疾棵。我一直安慰自己戈钢,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,488評(píng)論 6 392
  • 文/花漫 我一把揭開白布是尔。 她就那樣靜靜地躺著殉了,像睡著了一般。 火紅的嫁衣襯著肌膚如雪拟枚。 梳的紋絲不亂的頭發(fā)上薪铜,一...
    開封第一講書人閱讀 51,365評(píng)論 1 302
  • 那天众弓,我揣著相機(jī)與錄音,去河邊找鬼隔箍。 笑死谓娃,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的蜒滩。 我是一名探鬼主播滨达,決...
    沈念sama閱讀 40,190評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼俯艰!你這毒婦竟也來了捡遍?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,062評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤竹握,失蹤者是張志新(化名)和其女友劉穎画株,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體啦辐,經(jīng)...
    沈念sama閱讀 45,500評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡谓传,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,706評(píng)論 3 335
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了芹关。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片良拼。...
    茶點(diǎn)故事閱讀 39,834評(píng)論 1 347
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖充边,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情常侦,我是刑警寧澤浇冰,帶...
    沈念sama閱讀 35,559評(píng)論 5 345
  • 正文 年R本政府宣布,位于F島的核電站聋亡,受9級(jí)特大地震影響肘习,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜坡倔,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,167評(píng)論 3 328
  • 文/蒙蒙 一漂佩、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧罪塔,春花似錦投蝉、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,779評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至佃蚜,卻和暖如春庸娱,著一層夾襖步出監(jiān)牢的瞬間着绊,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,912評(píng)論 1 269
  • 我被黑心中介騙來泰國(guó)打工熟尉, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留归露,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 47,958評(píng)論 2 370
  • 正文 我出身青樓斤儿,卻偏偏與公主長(zhǎng)得像剧包,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子雇毫,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,779評(píng)論 2 354

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

  • JS中原型鏈玄捕,說簡(jiǎn)單也簡(jiǎn)單。 首先明確: 函數(shù)(Function)才有prototype屬性棚放,對(duì)象(除Object...
    前小白閱讀 3,928評(píng)論 0 9
  • ??面向?qū)ο螅∣bject-Oriented飘蚯,OO)的語言有一個(gè)標(biāo)志馍迄,那就是它們都有類的概念,而通過類可以創(chuàng)建任意...
    霜天曉閱讀 2,107評(píng)論 0 6
  • 理解 javascript 的原型鏈及繼承 以上所有的運(yùn)行結(jié)果都是 true; 三種構(gòu)造對(duì)象的方法: 通過對(duì)象字面...
    你期待的花開閱讀 1,515評(píng)論 0 3
  • 文/李菁 有人是喜歡冬天的 可以穿著裘皮 圍著火爐 隔著厚厚的窗櫳 眺望 白頭的西嶺 我是不喜歡冬天的 困頓于陰冷...
    李菁的簡(jiǎn)書閱讀 129評(píng)論 1 4
  • 出差3天局骤,鞍前馬后的服務(wù)別人攀圈,人家一句話,午睡都沒有了峦甩,人家一句話赘来,喝茶陪聊到凌晨,給我累的腦袋轟轟響凯傲。 到家了之...
    你熱愛生活嗎閱讀 170評(píng)論 0 0