一個例子讓你徹底明白原型對象和原型鏈

開篇

之前對js中的原型鏈和原型對象有所了解,每當(dāng)別人問我什么是原型鏈和原型對象時致稀,我總是用很官方(其實自己不懂)的解釋去描述澡匪。有一句話說的好:如果你不能把一個很復(fù)雜的東西用最簡單的話語描述出來,那就說明你沒有真正的理解硫嘶。最近正在讀《Javascript高級程序設(shè)計》,書中對原型對象和原型鏈的描述讓我受益匪淺拭抬,下面僅用一個對比性的例子來說明部默。

我們經(jīng)常會這么寫

    function Person () {
        this.name = 'John';
    }
    var person = new Person();
    Person.prototype.say = function() {
        console.log('Hello,' + this.name);
    };
    person.say();//Hello,John

上述代碼非常簡單,Person原型對象定義了公共的say方法造虎,雖然此舉在構(gòu)造實例之后出現(xiàn)傅蹂,但因為原型方法在調(diào)用之前已經(jīng)聲明,因此之后的每個實例將都擁有該方法算凿。從這個簡單的例子里份蝴,我們可以得出:
原型對象的用途是為每個實例對象存儲共享的方法和屬性,它僅僅是一個普通對象而已氓轰。并且所有的實例是共享同一個原型對象婚夫,因此有別于實例方法或?qū)傩裕蛯ο髢H有一份署鸡。所有就會有如下等式成立:

                            person.say == new Person().say

可能我們也會這么寫

    function Person () {
        this.name = 'John';
    }
    var person = new Person();
    Person.prototype = {
        say: function() {
            console.log('Hello,' + this.name);
        }
    };
    person.say();//person.say is not a function

很不幸案糙,person.say方法沒有找到,所以報錯了靴庆。其實這樣寫的初衷是好的:因為如果想在原型對象上添加更多的屬性和方法时捌,我們不得不每次都要寫一行Person.prototype,還不如提煉成一個Object來的直接。但是此例子巧就巧在構(gòu)造實例對象操作是在添加原型方法之前炉抒,這樣就會造成一個問題:
當(dāng)var person = new Person()時奢讨,Person.prototype為:Person {}(當(dāng)然了,內(nèi)部還有constructor屬性),即Person.prototype指向一個空的對象{}焰薄。而對于實例person而言拿诸,其內(nèi)部有一個原型鏈指針proto,該指針指向了Person.prototype指向的對象,即{}塞茅。接下來重置了Person的原型對象佳镜,使其指向了另外一個對象,即
Object {say: function}
這時person.proto的指向還是沒有變凡桥,它指向的{}對象里面是沒有say方法的,因為報錯蚀同。
從這個現(xiàn)象我們可以得出:
在js中缅刽,對象在調(diào)用一個方法時會首先在自身里尋找是否有該方法,若沒有蠢络,則去原型鏈上去尋找衰猛,依次層層遞進(jìn),這里的原型鏈就是實例對象的__proto__屬性刹孔。

若想讓上述例子成功運(yùn)行啡省,最簡單有效的方法就是交換構(gòu)造對象和重置原型對象的順序,即:

    function Person () {
        this.name = 'John';
    }
    Person.prototype = {
        say: function() {
            console.log('Hello,' + this.name);
        }
    };
    var person = new Person();
    person.say();//person.say is not a function

一張圖讓你秒懂原型鏈

其實,只需要明白原型對象的結(jié)構(gòu)即可:

    Function.prototype = {
        constructor : Function,
        __proto__ : parent prototype,
        some prototype properties: ...
    };

總結(jié):函數(shù)的原型對象constructor默認(rèn)指向函數(shù)本身卦睹,原型對象除了有原型屬性外畦戒,為了實現(xiàn)繼承,還有一個原型鏈指針__proto__结序,該指針指向上一層的原型對象障斋,而上一層的原型對象的結(jié)構(gòu)依然類似,這樣利用__proto__一直指向Object的原型對象上徐鹤,而Object的原型對象用Object.prototype.__proto__ = null表示原型鏈的最頂端垃环,如此變形成了javascript的原型鏈繼承,同時也解釋了為什么所有的javascript對象都具有Object的基本方法返敬。

注:本文與Github同步GIthub文章請戳

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末遂庄,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子劲赠,更是在濱河造成了極大的恐慌涛目,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,311評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件经磅,死亡現(xiàn)場離奇詭異泌绣,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)预厌,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,339評論 2 382
  • 文/潘曉璐 我一進(jìn)店門阿迈,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人轧叽,你說我怎么就攤上這事苗沧。” “怎么了炭晒?”我有些...
    開封第一講書人閱讀 152,671評論 0 342
  • 文/不壞的土叔 我叫張陵待逞,是天一觀的道長。 經(jīng)常有香客問我网严,道長识樱,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,252評論 1 279
  • 正文 為了忘掉前任震束,我火速辦了婚禮怜庸,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘垢村。我一直安慰自己割疾,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 64,253評論 5 371
  • 文/花漫 我一把揭開白布嘉栓。 她就那樣靜靜地躺著宏榕,像睡著了一般拓诸。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上麻昼,一...
    開封第一講書人閱讀 49,031評論 1 285
  • 那天奠支,我揣著相機(jī)與錄音,去河邊找鬼涌献。 笑死胚宦,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的燕垃。 我是一名探鬼主播枢劝,決...
    沈念sama閱讀 38,340評論 3 399
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼卜壕!你這毒婦竟也來了您旁?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 36,973評論 0 259
  • 序言:老撾萬榮一對情侶失蹤轴捎,失蹤者是張志新(化名)和其女友劉穎鹤盒,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體侦副,經(jīng)...
    沈念sama閱讀 43,466評論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡侦锯,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,937評論 2 323
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了秦驯。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片尺碰。...
    茶點故事閱讀 38,039評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖译隘,靈堂內(nèi)的尸體忽然破棺而出亲桥,到底是詐尸還是另有隱情,我是刑警寧澤固耘,帶...
    沈念sama閱讀 33,701評論 4 323
  • 正文 年R本政府宣布题篷,位于F島的核電站,受9級特大地震影響厅目,放射性物質(zhì)發(fā)生泄漏番枚。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,254評論 3 307
  • 文/蒙蒙 一损敷、第九天 我趴在偏房一處隱蔽的房頂上張望户辫。 院中可真熱鬧,春花似錦嗤锉、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,259評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽奥额。三九已至,卻和暖如春访诱,著一層夾襖步出監(jiān)牢的瞬間垫挨,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,485評論 1 262
  • 我被黑心中介騙來泰國打工触菜, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留九榔,地道東北人。 一個月前我還...
    沈念sama閱讀 45,497評論 2 354
  • 正文 我出身青樓涡相,卻偏偏與公主長得像哲泊,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子催蝗,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 42,786評論 2 345

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