學(xué)習(xí)JavaScript中的原型鏈?zhǔn)嚼^承

最近在學(xué)習(xí)JavaScript的面向?qū)ο?,被constructor,prototype和_proto_搞到頭大,但還好,磕磕絆碰碰,終于了解了一點原型繼承。接下來我們來看看這個原型繼承是怎么回事

一、關(guān)于原型的幾個概念

  1. prototype屬性
  2. _proto_屬性
  3. constructor屬性

他們直觀的關(guān)系是:

function/
    |——prototype/
              |—— constructor
              |—— __proto__
prototype屬性

任何一個函數(shù)都存在著這樣的一個prototype屬性,這個屬性是一個對象,稱為原型對象。這個原型對象里有自函數(shù)一創(chuàng)建就生成的兩個屬性一個是constructor和 _proto_,除此之外我們可以給這個對象添加屬性和方法,就像給一個普通對象動態(tài)添加屬性和方法那樣

example:
    //創(chuàng)建基類(或叫超類或叫父類)
    function Person(){};
    Person.prototype.name = 'kuohao';
    Person.prototype.age = 21;
    Person.prototype.method = function (){
        return this.name +':'+ this.age;
    }
    //給Person構(gòu)造函數(shù)的原型對象添加一些屬性和方法
    //(為什么說它是構(gòu)造函數(shù)呢,因為需要用來構(gòu)造對象,實際上跟普通函數(shù)一樣)

現(xiàn)在原型對象就多了兩個屬性和一個方法

Person/
    |——prototype/
              |—— constructor
              |—— __proto__
              |——name:'kuhao'
              |——age:21
              |——method:function(){
                      return……
                     ?。?

這個原型對象有啥用???
請看——

//實例化
var guy1 = new Person();
var guy2 = new Person();

console.log(guy1.name);    //'kuohao'
console.log(guy2.name);    //'kuohao'  

guy1.method()    //'kuohao':21
guy2.method()    //'kuohao':21

我們沒有給他們定義屬性和方法,他們繼承了Person構(gòu)造函數(shù)原型對象里面的屬性和方法,注意我們也沒給Person構(gòu)造函數(shù)定義屬性和方法噢

咋一看,跟構(gòu)造函數(shù)和工廠模式差不多,他們都生成擁有相同屬性和方法的對象。但是原型對象生成的對象有一個很重要的特點就是他們共用一個原型對象的屬性和方法。

為什么這么說呢?
使用布爾運算來驗證一下就知道了

guy1.method()===guy2.method;    //true

如果是構(gòu)造函數(shù)生成的對象,他們的方法都不相等,原因就是構(gòu)造函數(shù)生成的對象有不同的引用的地址,而構(gòu)造函數(shù)的原型繼承方法生成的對象指向了同一個引用地址,他們的對象都使用這個引用地址的屬性和方法,所以他們的方法是相等的,對于生成的對象的new方法,在另外一篇文章會講到。


_proto_屬性

這是相當(dāng)重要的一個屬性,但是它不是標(biāo)準(zhǔn)屬性,在標(biāo)準(zhǔn)中,它是不對外開放的,當(dāng)時chrome和Firefox的私有屬性中對外暴露了它,使得我們可以比較清楚了了解原型繼承的過程。

__proto__

_proto_這個屬性可以讓我們訪問創(chuàng)建當(dāng)前對象的構(gòu)造函數(shù)的prototype原型對象。那么當(dāng)我們調(diào)用guy1.method()方法的時候,其實是這樣的:

  1. 當(dāng)js解析器解析guy1.method()的時候,先看看guy1對象實例里有沒有method這個方法
    js解析器問:"喂,哥們,你的method方法呢?"
    guy1說:"這個方法是我老爸的,不在我這里"
    js解析器問:“怎么找到你老爸?”
    guy1指著_proto_說:“這里有道門,你進去就可以找到他了”

2.然后js解析器就又跑去找他老豆,找到他老豆后
問:“喂喂,你兒子叫我來找method方法,在哪?”
guy1的老豆Person就拿出一個箱子(prototype),說:“method方法就在里面,你拿去吧!”

如果Person父類還是沒找到method方法的話,實際上它的prototype對象也有一個_proto_屬性,可以訪問guy1的爺爺類的prototype對象,找到method方法。

所以,這個查找是一環(huán)接一環(huán)的,就像遞歸一樣。

![原型鏈,圖片來自慕課網(wǎng)].PNG](http://upload-images.jianshu.io/upload_images/1577855-21c757167154f75a.PNG?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

constructor屬性

constructor屬性指向的是創(chuàng)建此對象的構(gòu)造函數(shù)的引用,這個屬性存在prototype原型對象中,構(gòu)造函數(shù)的對象實例也可以通過constructor屬性來訪問構(gòu)造它的那個函數(shù)。

構(gòu)造與原型

這個屬性對于原型繼承的實現(xiàn)來說,不是很重要。

二、原型繼承的實現(xiàn)

    //父類
    function Person(){};
    Person.prototype.method = function (){
        return 'hello';
    }

    //子類
    function Child(){};
    Child.prototype = Object.create(Person.prototype);
    Child.prototype.constructor = Child;
    Child.prototype.say = function (){
        return 'hello world';
    }
    
    var c1 = new Child();
    c1.method();    //'hello'
    c1.say();       //'hello world'
    //由此可見子類繼承了父類的方法,也擁有自己的方法
Object.create()方法

Object.create()方法是ES5的一個用來創(chuàng)建一個指定原型和若干指定屬性的對象的方法。
定義來自 Mozilla開發(fā)者文檔

Child.prototype = Object.create(Person.prototye);

這句話的含義就是創(chuàng)建一個以Person原型對象為原型的空對象,賦值給Child的prototype原型對象.

Object.create(Person.prototye),相當(dāng)與創(chuàng)建了這樣一個對象:

{
    constructor
    //指向Person構(gòu)造函數(shù),這就是為什么上面要把這個屬性指回Child的原因
    __proto__
    //指向Person.prototype,上面說到原型鏈繼承正是通過這個屬性層層查找實現(xiàn)的
}

將這個對象去覆蓋Child子類的prototype,這就成功與Person父類搭上了關(guān)系再此之前,Person與Child沒任何關(guān)系。


但是Object.create()這個方法是新方法,低級的瀏覽器,如IE9以下不支持,需要做一下兼容處理

examle:
    
        function createObejct(o){
            if(!Object.create){
                //新建一個構(gòu)造函數(shù),用來做臨時對象
                function a(){};
                //把原型對象參數(shù)賦給這個空對象的原型對象
                a.prototype = o;
                return new a();
                //實例化一個出來一個原型對象指向原型對象參數(shù)的空對象,返回給上下文
            }else{
                return Object.create(o);
                //直接使用
            }
        }
Object.create的一些替代方法
  1. 直接將Person.prototype賦值給Child.prototype

Child.prototype = Person.prototype

這樣Person和Child就共用一個原型對象,他們的屬性和方法都是一樣的,但是這個就有問題了,如果Child類想擴展自己的屬性和方法,那么Person類也會受到影響。

這里要注意的是賦一個原型對象為Person.prototype的空對象(上面的方法)跟賦一個Person.prototype是不一樣的。

前者Child.prototype指向空對象的引用再由空對象中的_proto_\指向Person.prototype,后者Child.prototype直接指向Person.prototype引用,后續(xù)的修改在都Person.prototype上,因為他們共用一個原型對象。

前者
后者

所以這個方法是非常不可取的,跟面向?qū)ο蟮亩鄳B(tài)特性相悖

2.new 一個Person的對象實例賦給Child的原型對象

Child.prototype = new Person()

這貌似是一個不錯的方法,但是它也有弊端,就是事實上我們常常不會使用一個空的構(gòu)造函數(shù),來實例化對象,我們往往會將構(gòu)造函數(shù)繼承和原型繼承結(jié)合在一起,所以我們的構(gòu)造函數(shù)往往會有一些實例屬性和實例方法,如果new Person()出來一個實例對象,對象里面還夾帶著一些實例屬性和方法,這看起來非常怪,雖然也是一個指向Person.prototype的對象。所以這種方法也不推薦使用,應(yīng)該使用 Object.create() 較為妥當(dāng).

總結(jié):

我個人覺得實現(xiàn)原型繼承最重要就是兩個屬性的理解,prototype原型對象和_proto_這個接口的概念的理解,再結(jié)合原型鏈層層查找這種繼承方式的直觀感知,就能比較好地掌握原型式繼承。我也是這兩天才理解的原型鏈?zhǔn)嚼^承,如果有所繆誤,請批評指正!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 229,908評論 6 541
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 99,324評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事?!?“怎么了?”我有些...
    開封第一講書人閱讀 178,018評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,675評論 1 317
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 72,417評論 6 412
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 55,783評論 1 329
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,779評論 3 446
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 42,960評論 0 290
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 49,522評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 41,267評論 3 358
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,471評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,009評論 5 363
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 44,698評論 3 348
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,099評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,386評論 1 294
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,204評論 3 398
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 48,436評論 2 378

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