摘要：使用構(gòu)造函數(shù)的原型繼承相比使用原型的原型繼承更加復(fù)雜，我們先看看使用原型的原型繼承上面的代碼很容易理解。相反的，使用構(gòu)造函數(shù)的原型繼承像下面這樣當(dāng)然，構(gòu)造函數(shù)的方式更簡(jiǎn)單。

五天之前我寫了一個(gè)關(guān)于ES6標(biāo)準(zhǔn)中Class的文章。在里面我介紹了如何用現(xiàn)有的Javascript來模擬類并且介紹了ES6中類的用法，其實(shí)它只是一個(gè)語法糖。感謝Om Shakar以及Javascript Room中的各位，我的編程風(fēng)格從那時(shí)候開始發(fā)生了改變；就像Dougla Crockford2006年做的一樣，我也學(xué)習(xí)了很多來完全理解基于原型的編程方式。

Javascript是一個(gè)多樣化的編程語言。它擁有面向?qū)ο蠛秃瘮?shù)式的編程特點(diǎn)，你可以使用任何一種風(fēng)格來編寫代碼。然而這兩個(gè)編程風(fēng)格并不能很好的融合。例如，你不無法同時(shí)使用new(典型的面向?qū)ο蟮奶攸c(diǎn))和apply(函數(shù)式編程的特點(diǎn)).原型繼承一直都作為連接這兩種風(fēng)格的橋梁。

大部分Javascript程序員會(huì)告訴你基于類的繼承不好。然而它們中只有很少一部分知道其中的原因。事實(shí)實(shí)際上是基于類的基礎(chǔ)并沒有什么不好。Python是基于類繼承的，并且它是一門很好的編程語言。但是，基于類的繼承并不適合用于Javascript。Python正確的使用了類，它們只有簡(jiǎn)單的工廠方法不能當(dāng)成構(gòu)造函數(shù)使用。而在Javascript中任何函數(shù)都可以被當(dāng)成構(gòu)造函數(shù)使用。

Javascript中的問題是由于每個(gè)函數(shù)都可以被當(dāng)成構(gòu)造函數(shù)使用，所以我們需要區(qū)分普通的函數(shù)調(diào)用和構(gòu)造函數(shù)調(diào)用；我們一般使用new關(guān)鍵字來進(jìn)行區(qū)別。然而，這樣就破壞了Javascript中的函數(shù)式特點(diǎn)，因?yàn)?b>new是一個(gè)關(guān)鍵字而不是函數(shù)。因而函數(shù)式的特點(diǎn)無法和對(duì)象實(shí)例化一起使用。

function Person(firstname,lastname){
    this.firstname = firstname ;
    this.lastname = lastname ;
}

考慮上面這段程序。你可以通過new關(guān)鍵字來調(diào)用Person方法來創(chuàng)建一個(gè)函數(shù)Person的實(shí)例：

var author = new Person("Aadit","Shah") ;

然而，沒有任何辦法來使用apply方法來為構(gòu)造函數(shù)指定參數(shù)列表：

var author = new Person.apply(null,["Aadit","Shah"]);//error

但是，如果new是一個(gè)方法那么上面的需求就可以通過下面這種方式實(shí)現(xiàn)了：

var author = Person.new.apply(Person,["Aadit","Shah"]) ;

幸運(yùn)的是，因?yàn)镴avascript有原型繼承，所以我們可以實(shí)現(xiàn)一個(gè)new的函數(shù)：

Function.prototype.new = function () {
    function functor() { return constructor.apply(this, args); }
    var args = Array.prototype.slice.call(arguments);
    functor.prototype = this.prototype;
    var constructor = this;
    return new functor;
};

在像Java這樣對(duì)象只能通過new關(guān)鍵字來實(shí)例化的語言中，上面這種方式是不可能實(shí)現(xiàn)的。

下面這張表列出了原型繼承相比于基于類的基礎(chǔ)的優(yōu)點(diǎn)：

到現(xiàn)在你應(yīng)該知道為什么我覺得new關(guān)鍵字是不會(huì)的了吧---你不能把它和函數(shù)式特點(diǎn)混合使用。然后，這并不代表你應(yīng)該停止使用它。new關(guān)鍵字有合理的用處。但是我仍然建議你不要再使用它了。new關(guān)鍵字掩蓋了Javascript中真正的原型繼承，使得它更像是基于類的繼承。就像Raynos說的:

new是Javascript在為了獲得流行度而加入與Java類似的語法時(shí)期留下來的一個(gè)殘留物

Javascript是一個(gè)源于Self的基于原型的語言。然而，為了市場(chǎng)需求，Brendan Eich把它當(dāng)成Java的小兄弟推出：

并且我們當(dāng)時(shí)把Javascript當(dāng)成Java的一個(gè)小兄弟，就像在微軟語言家庭中Visual Basic相對(duì)于C++一樣。

這個(gè)設(shè)計(jì)決策導(dǎo)致了new的問題。當(dāng)人們看到Javascript中的new關(guān)鍵字，他們就想到類，然后當(dāng)他們使用繼承時(shí)就遇到了傻了。就像Douglas Crockford說的：

這個(gè)間接的行為是為了使傳統(tǒng)的程序員對(duì)這門語言更熟悉，但是卻失敗了，就像我們看到的很少Java程序員選擇了Javascript。Javascript的構(gòu)造模式并沒有吸引傳統(tǒng)的人群。它也掩蓋了Javascript基于原型的本質(zhì)。結(jié)果就是，很少的程序員知道如何高效的使用這門語言

因此我建議停止使用new關(guān)鍵字。Javascript在傳統(tǒng)面向?qū)ο蠹傧笙旅嬗兄訌?qiáng)大的原型系統(tǒng)。然大部分程序員并沒有看見這些還處于黑暗中。

原型繼承很簡(jiǎn)單。在基于原型的語言中你只有對(duì)象。沒有類。有兩種方式來創(chuàng)建一個(gè)新對(duì)象---“無中生有”對(duì)象創(chuàng)建法或者通過現(xiàn)有對(duì)象創(chuàng)建。在Javascript中Object.create方法用來創(chuàng)建新的對(duì)象。新的對(duì)象之后會(huì)通過新的屬性進(jìn)行擴(kuò)展。

Javascript中的Object.create方法用來從0開始創(chuàng)建一個(gè)對(duì)象，像下面這樣:

var object = Object.create(null) ;

上面例子中新創(chuàng)建的object沒有任何屬性。

Object.create方法也可以克隆一個(gè)現(xiàn)有的對(duì)象，像下面這樣:

var rectangle = {
    area : function(){
        return this.width * this.height ;
    }
} ;
var rect = Object.create(rectangle) ;

上面例子中rect從rectangle中繼承了area方法。同時(shí)注意到rectangle是一個(gè)對(duì)象字面量。對(duì)象字面量是一個(gè)簡(jiǎn)潔的方法用來創(chuàng)建一個(gè)Object.prototype的克隆然后用新的屬性來擴(kuò)展它。它等價(jià)于:

var rectangle = Object.create(Object.prototype) ;
rectangle.area = function(){
    return this.width * this.height ;
} ;

上面的例子中我們克隆了rectangle對(duì)象命名為rect，但是在我們使用rect的area方法之前我們需要擴(kuò)展它的width和height屬性，像下面這樣:

rect.width = 5 ;
rect.height = 10 ;
alert(rect.area()) ;

然而這種方式來創(chuàng)建一個(gè)對(duì)象的克隆然后擴(kuò)展它是一個(gè)非常傻缺的方法。我們需要在每個(gè)rectangle對(duì)象的克隆上手動(dòng)定義width和height屬性。如果有一個(gè)方法能夠?yàn)槲覀儊硗瓿蛇@些工作就很好了。是不是聽起來有點(diǎn)熟悉？確實(shí)是。我要來說說構(gòu)造函數(shù)。我們把這個(gè)函數(shù)叫做create然后在rectangle對(duì)象上定義它:

var rectangle = {
    create : function(width,height){
        var self = Object.create(this) ;
        self.height = height ;
        self.width = width ;
        return self ;
    } ,
    area : function(){
        return this.width * this.height ;
    }
} ;
var rect = rectangle.create(5,10) ;
alert(rect.area()) ;

等等。這看起來很像Javascript中的正常構(gòu)造模式:

function Rectangle(width, height) {
    this.height = height;
    this.width = width;
} ;

Rectangle.prototype.area = function () {
    return this.width * this.height;
};

var rect = new Rectangle(5, 10);
 
alert(rect.area());

是的，確實(shí)很像。為了使得Javascript看起來更像Java原型模式被迫屈服于構(gòu)造模式。因此每個(gè)Javascript中的函數(shù)都有一個(gè)prototype對(duì)象然后可以用來作為構(gòu)造器(這里構(gòu)造器的意思應(yīng)該是說新的對(duì)象是在prototype對(duì)象的基礎(chǔ)上進(jìn)行構(gòu)造的)。new關(guān)鍵字允許我們把函數(shù)當(dāng)做構(gòu)造函數(shù)使用。它會(huì)克隆構(gòu)造函數(shù)的prototype屬性然后把它綁定到this對(duì)象中，如果沒有顯式返回對(duì)象則會(huì)返回this。

原型模式和構(gòu)造模式都是平等的。因此你也許會(huì)懷疑為什么有人會(huì)困擾于是否應(yīng)該使用原型模式而不是構(gòu)造模式。畢竟構(gòu)造模式比原型模式更加簡(jiǎn)潔。但是原型模式相比構(gòu)造模式有許多優(yōu)勢(shì)。具體如下：

最后一點(diǎn)可能需要解釋一下。使用構(gòu)造函數(shù)的原型繼承相比使用原型的原型繼承更加復(fù)雜，我們先看看使用原型的原型繼承:

var square = Object.create(rectangle);
square.create = function (side) {
    return rectangle.create.call(this, side, side);
} ;
var sq = square.create(5) ;
alert(sq.area()) ;

上面的代碼很容易理解。首先我們創(chuàng)建一個(gè)rectangle的克隆然后命名為square。接著我們用新的create方法重寫square對(duì)象的create方法。最終我們從新的create方法中調(diào)用rectangle的create函數(shù)并且返回對(duì)象。相反的，使用構(gòu)造函數(shù)的原型繼承像下面這樣:

function Square(){
    Rectangle.call(this,side,side) ;
} ;

Square.prototype = Object.create(Rectangle.prototype) ;

Square.prototype.constructor = Square ;

var sq = new Square(5) ;

alert(sq.area()) ;

當(dāng)然，構(gòu)造函數(shù)的方式更簡(jiǎn)單。然后這樣的話，向一個(gè)不了解情況的人解釋原型繼承就變得非常困難。如果想一個(gè)了解類繼承的人解釋則會(huì)更加困難。

當(dāng)使用原型模式時(shí)一個(gè)對(duì)象繼承自另一個(gè)對(duì)象就變得很明顯。當(dāng)使用方法構(gòu)造模式時(shí)就沒有這么明顯，因?yàn)槟阈枰鶕?jù)其他構(gòu)造函數(shù)來考慮構(gòu)造繼承。

在上面的例子中我們創(chuàng)建一個(gè)rectangle的克隆然后命名為square。然后我們利用新的create屬性擴(kuò)展它，重寫繼承自rectangle對(duì)象的create方法。如果把這兩個(gè)操作合并成一個(gè)就很好了，就像對(duì)象字面量是用來創(chuàng)建Object.prototype的克隆然后用新的屬性擴(kuò)展它。這個(gè)操作叫做extend，可以像下面這樣實(shí)現(xiàn):

Object.prototype.extend = function(extension){
    var hasOwnProperty = Object.hasOwnProperty ;
    var object = Object.create(this) ;
    
    for(var property in extension){
        if(hasOwnProperty.call(extension,property) ||
            typeof obejct[property] === "undefined")
            //這段代碼有問題，按照文章意思，這里應(yīng)該使用深復(fù)制，而不是簡(jiǎn)單的淺復(fù)制,deepClone(extension[property],object[property]),deepClone的實(shí)現(xiàn)可以看我之前關(guān)于繼承的博客
            object[properyty] = extension[property] ;
    }
    return object ;
} ;

譯者注：我覺得博主這里的實(shí)現(xiàn)有點(diǎn)不符合邏輯，正常extend的實(shí)現(xiàn)應(yīng)該是可以配置當(dāng)被擴(kuò)展對(duì)象和用來擴(kuò)展的對(duì)象屬性重復(fù)時(shí)是否覆蓋原有屬性，而博主的實(shí)現(xiàn)就只是簡(jiǎn)單的覆蓋。同時(shí)博主的實(shí)現(xiàn)在if判斷中的做法個(gè)人覺得是值得學(xué)習(xí)的，首先判斷extension屬性是否是對(duì)象自身的，如果是就直接復(fù)制到object上，否則再判斷object上是否有這個(gè)屬性，如果沒有那么也會(huì)把屬性復(fù)制到object上，這種實(shí)現(xiàn)的結(jié)果就使得被擴(kuò)展的對(duì)象不僅僅只擴(kuò)展了extension中的屬性，還包括了extension原型中的屬性。不難理解，extension原型中的屬性會(huì)在extension中表現(xiàn)出來，所以它們也應(yīng)該作為extension所具有的特性而被用來擴(kuò)展object。所以我對(duì)這個(gè)方法進(jìn)行了改寫:

    Object.prototype.extend = function(extension,override){
    var hasOwnProperty = Object.hasOwnProperty ;
    var object = Object.create(this) ;
    for(var property in extension){
        if(hasOwnProperty.call(extension,property) || 
            typeof object[property] === "undefined"){
            if(object[property] !== "undefined"){
                if(override){
                    deepClone(extension[property],object[property]) ;
                }
            }else{
                deepClone(extension[property],object[property]) ;
            }    
        }
    }
}; 

利用上面的extend方法，我們可以重寫square的代碼:

var square = rectangle.extend({
    create : function(side){
        return rectangle.create.call(this,side,side) ;
    }
}) ;

var sq = square.create(5) ;
alert(sq.area()) ;

extend方法是原型繼承中唯一需要的操作。它是Object.create函數(shù)的超集，因此它可以用在對(duì)象的創(chuàng)建和擴(kuò)展上。因此我們可以用extend來重寫rectangle，使得create函數(shù)更加結(jié)構(gòu)化看起來就像模塊模式。

var rectangle = {
    create : function(width,height){
        return this.extend({
            height : height ,
            width : width
        }) ;
    }
} ;

var rect = rectangle.create(5,10) ;
alert(rect.area()) ;

一些人可能已經(jīng)注意到extend函數(shù)返回的對(duì)象實(shí)際上是繼承了兩個(gè)對(duì)象的屬性，一個(gè)是被擴(kuò)展的對(duì)象，另一個(gè)是用來擴(kuò)展的對(duì)象。另外從兩個(gè)對(duì)象繼承屬性的方式也不一樣。第一種情況下是通過委派來繼承屬性(也就是使用Object.create()來繼承屬性)，第二種情況下使用合并屬性的方式來繼承屬性。

很多Javascript程序員對(duì)于差別繼承比較熟悉。維基百科是這么解釋的:

大部分對(duì)象是從其他更一般的對(duì)象中得到的，只是在一些很小的地方進(jìn)行了修改。每個(gè)對(duì)象通常在內(nèi)部維護(hù)一個(gè)指向其他對(duì)象的引用列表，這些對(duì)象就是該對(duì)象本身進(jìn)行差異化繼承的對(duì)象。

Javascript中的原型繼承是基于差異化繼承的。每個(gè)對(duì)象都有個(gè)內(nèi)部指針叫做[[proto]] (在大部分瀏覽器中可以通過__proto__屬性訪問)，這個(gè)指針指向?qū)ο蟮脑?。多個(gè)對(duì)象之間通過內(nèi)部[[proto]]屬性鏈接起來形成了原型鏈，鏈的最后指向null。

當(dāng)你試圖獲取一個(gè)對(duì)象的屬性時(shí)Javascript引擎會(huì)首先查找對(duì)象自身的屬性。如果在對(duì)象上沒找到該屬性，那么它就會(huì)去對(duì)象的原型中去查找。以此類推，它會(huì)沿著原型鏈一直查找知道找到或者到原型鏈的末尾。

function get(object,property){
    if(!Object.hasOwnProperty.call(object,property)){
        var prototype = Object.getPrototypeOf(object) ;
        if(prototype) return get(prototype,property) ;
    }else{
        return object[property] ;
    }
} ;

Javascript中屬性查找的過程就像上面的程序那樣。

大多數(shù)Javascript程序員會(huì)覺得復(fù)制一個(gè)對(duì)象的屬性到另一個(gè)對(duì)象上并不是一個(gè)正確的繼承的方式，因?yàn)槿魏螌?duì)原始對(duì)象的修改都不會(huì)反映在克隆的對(duì)象上。五天前我會(huì)同意這個(gè)觀點(diǎn)。然而現(xiàn)在我相信合并式繼承是原型繼承的一種正確方式。對(duì)于原始對(duì)象的修改可以發(fā)送到它的副本來實(shí)現(xiàn)真正的原型繼承。

合并式繼承和代理有他們的優(yōu)點(diǎn)和缺點(diǎn)。下表列出了它們的優(yōu)缺點(diǎn):

上表中最后一點(diǎn)告訴我們對(duì)象可以通過合并的方式從多個(gè)原型中繼承屬性。這是一個(gè)重要的特點(diǎn)因?yàn)檫@證明原型繼承比Java中的類繼承更強(qiáng)大并且與C++中的類繼承一樣強(qiáng)大。為了實(shí)現(xiàn)多重繼承，你只需要修改extend方法來從多個(gè)原型中復(fù)制屬性。

Object.prototype.extend = function(){
    var hasOwnProperty = Object.hasOwnProperty ;
    var object = Object.create(this) ;
    var length = arguments.length ;
    var index = length ;
    
    while(index){
        var extension = arguments[length - (index--)] ;
        for(var property in extension){
            if(hasOwnProperty.call(extension,property)||
                typeof object[property] === "undefined"){
                //這里同樣應(yīng)該使用深復(fù)制
                object[property] = extension[property] ;
            }
        }
    }
    return object;
} ;

多重繼承是非常有用的因?yàn)樗岣吡舜a的可重用性和模塊化。對(duì)象通過委派繼承一個(gè)原型對(duì)象然后通過合并繼承其他屬性。比如說你有一個(gè)事件發(fā)射器的原型，像下面這樣：

var eventEmitter = {
    on : function(event,listener){
        if(typeof this[event] !== "undefined")
            this[event].push(listener) ;
        else
            this[event] = [listener] ;
    } ,
    emit : function(event){
        if(typeof this[event] !== "undefined"){
            var listeners = this[event] ;
            var length = listeners.length,index = length ;
            var args = Array.prototype.slice.call(arguments,1) ;
            
            while(index){
                var listener = listeners[length - (index--)] ;
                listener.apply(this,args) ;
            }
        }
    }
} ;

現(xiàn)在你希望square表現(xiàn)得像一個(gè)事件發(fā)射器。因?yàn)?b>square已經(jīng)通過委派的方式繼承了rectangle，所以它必須通過合并的方式繼承eventEmitter。這個(gè)修改可以很容易地通過使用extend方法實(shí)現(xiàn)：

var square = rectangle.extend(eventEmitter,{
    create : function(side){
        return rectangle.create.call(this,side,side) ;
    } ,
    resize : function(newSize){
        var oldSize = this.width ;
        this.width = this.height = newSize ;
        this.emit("resize",oldSize,newSize) ;
    }
}) ;
var sq = square.create(5) ;
sq.on("resize",function(oldSize,newSize){
    alert("sq resized from " + oldSize + "to" + newSize + ".") ;
}) ;

sq.resize(10) ;
alert(sq.area()) ;

在Java中是不可能實(shí)現(xiàn)上面的程序的，因?yàn)樗恢С侄嘀乩^承。相應(yīng)的你必須另外再創(chuàng)建一個(gè)EventEmitter類或者使用一個(gè)EventEmitter接口并且在每個(gè)實(shí)現(xiàn)該接口的類中分別實(shí)現(xiàn)on和emit方法。當(dāng)然你在C++中不需要面對(duì)這個(gè)問題。我們都知道Java sucks(呵呵呵)。

在上面的例子中你肯定注意到eventEmitter原型并沒有一個(gè)create方法。這是因?yàn)槟悴粦?yīng)該直接創(chuàng)建一個(gè)eventEmitter對(duì)象。相反eventEmitter是用來作為其他原型的原型。這類原型稱為mixin。它們等價(jià)于抽象類。mixin用來通過提供一系列可重用的方法來擴(kuò)展對(duì)象的功能。

然而有時(shí)候mixin需要私有的狀態(tài)。例如eventEmitter如果能夠把它的事件監(jiān)聽者列表放在私有變量中而不是放在this對(duì)象上會(huì)安全得多。但是mixin沒有create方法來封裝私有狀態(tài)。因此我們需要為mixin創(chuàng)建一個(gè)藍(lán)圖(blueprint)來創(chuàng)建閉包。藍(lán)圖(blueprint)看起來會(huì)像是構(gòu)造函數(shù)但是它們并不用像構(gòu)造函數(shù)那樣使用。例如：

function eventEmitter(){
    var evnets = Object.create(null) ;
    
    this.on = function(event,listener){
        if(typeof events[event] !== "undefined")
            events[event].push(listener) ;
        else
            events[event] = [listener] ;
    } ;
    this.emit = function(event){
        if(typeof events[event] !== "undefined"){
            var listeners = events[event] ;
            var length = listeners.length ,index = length ;
            var args = Array.prototype.slice.call(arguments,1) ;
        }
    } ;
} ;

一個(gè)藍(lán)圖用來在一個(gè)對(duì)象創(chuàng)建之后通過合并來擴(kuò)展它(我覺得有點(diǎn)像裝飾者模式)。Eric Elliot把它們叫做閉包原型。我們可以使用藍(lán)圖版本的eventEmitter來重寫square的代碼，如下：

var square = rectangle.extend({
    create : function(side){
        var self = rectangle.create.call(this,side,side) ;
        eventEmitter.call(self) ;
        return self ;
    } ,
    resize : function(newSize){
        var oldSize = this.width ;
        this.width = this.height = newSize ;
        this.emit("resize",oldSize,newSize) ;
    }
}) ;
var sq = square.create(5) ;

sq.on("resize",function(oldSize,newSize){
    alert("sq resized from " + oldSize + "to" + newSize + ".") ;
}) ;

sq.resize(10) ;

alert(sq.area()) ;

藍(lán)圖在Javascript中是獨(dú)一無二的。它是一個(gè)很強(qiáng)大的特性。然而它們也有自己的缺點(diǎn)。下表列出了mixin和藍(lán)圖的優(yōu)缺點(diǎn)：

許多Javascript程序員會(huì)覺得使用原型模式來繼承違背了語言的精髓。他們更偏向于構(gòu)造模式因?yàn)樗麄冇X得通過構(gòu)造函數(shù)創(chuàng)建的對(duì)象才是真正的實(shí)例，因?yàn)?b>instanceof操作會(huì)返回true。然而，這個(gè)爭(zhēng)論是沒有意義的，因?yàn)?b>instanceof操作可以像下面這樣實(shí)現(xiàn)：

Object.prototype.instanceof = function(prototype){
    var object = this ;
    do{
        if(object === prototype) return true ;
        var object = Object.getPrototypeOf(object) ;
    }while(object) ;
    return false ;
}

這個(gè)instanceof方法現(xiàn)在可以被用來測(cè)試一個(gè)對(duì)象是否是通過委派從一個(gè)原型繼承的。例如：

sq.instanceof(square) ;

然而還是沒有辦法判斷一個(gè)對(duì)象是否是通過合并的方式從一個(gè)原型繼承的，因?yàn)閷?shí)例的關(guān)聯(lián)信息丟失了。為了解決這個(gè)問題我們將一個(gè)原型的所有克隆的引用保存在原型自身中，然后使用這個(gè)信息來判斷一個(gè)對(duì)象是否是一個(gè)原型的實(shí)例。這個(gè)可以通過修改extend方法來實(shí)現(xiàn)：

Object.prototype.extend = function(){
    var hasOwnProperty = Object.hasOwnProperty ; 
    var object = Object.create(this) ;
    var length = arguments.lenght ;
    var index = length ;

    while(index){
        var extension = arguments[length - (index--)] ;

        for(var property in extension){
            if(property !== "clones" &&
                hasOwnProperty.call(extension,property) ||
                typeof object[property] === "undefined")
                object[property] = extension[property] ;

        if(hasOwnProperty.call(extension,"clones")})
            extension.clones.unshift(object) ;
        else
            extension.clones = [object] ;
        }
    }
    return object;
} ;

通過合并繼承自原型的對(duì)象形成了一個(gè)克隆樹，這些樹從根對(duì)象開始然后向下一直到葉子對(duì)象。一個(gè)克隆鏈?zhǔn)且粋€(gè)從根對(duì)象到葉子對(duì)象的單一路徑，這跟遍歷原型鏈很相似。我們可以使用這個(gè)信息來判斷一個(gè)對(duì)象是否是通過合并繼承自一個(gè)原型。

Object.prototype.instanceof = function(prototype){
    if (Object.hasOwnProperty.call(prototype, "clones"))
        var clones = prototype.clones;
    var object = this;
    
    do {
        if (object === prototype ||
            clones && clones.indexOf(object) >= 0)
            return true;
        var object = Object.getPrototypeOf(o  bject);
    } while (object);

    return false;
} ;

這個(gè)instanceof方法現(xiàn)在可以用來判斷一個(gè)對(duì)象是否是通過合并繼承自一個(gè)原型。例如:

sq.instanceof(eventEmitter);

在上面的程序中instanceof會(huì)返回true如果我媽使用mixin版本的eventEmitter。然而如果我們使用藍(lán)圖版本的eventEmitter它會(huì)返回false。為了解決這個(gè)問題我創(chuàng)建了一個(gè)藍(lán)圖函數(shù)，這個(gè)函數(shù)接收一個(gè)藍(lán)圖作為參數(shù)，向它添加一個(gè)clones屬性然后返回一個(gè)記錄了它的克隆的新藍(lán)圖：

function blueprint(f){
    var g = function(){
        f.apply(this,arguments) ;
        g.clones.unshift(this) ;
    } ;
    g.clones = [] ;
    return g ;
} ;
var eventEmitter = blueprint(function(){
    var events = Object.create(null);
    this.on = function (event, listener) {
        if (typeof events[event] !== "undefined")
            events[event].push(listener);
        else events[event] = [listener];
    };

    this.emit = function (event) {
        if (typeof events[event] !== "undefined") {
            var listeners = events[event];
            var length = listeners.length, index = length;
            var args = Array.prototype.slice.call(arguments, 1);

            while (index) {
                var listener = listeners[length - (index--)];
                listener.apply(this, args);
            }
        }
    };
}) ;

上面例子中的clones屬性有雙重作用。它可以用來判斷一個(gè)對(duì)象是否是通過合并繼承自一個(gè)原型的，然后他可以用來發(fā)送原型改變給所有它的克隆。原型繼承相比類繼承最大的優(yōu)勢(shì)就是你可以修改一個(gè)原型在它創(chuàng)建之后。為了使克隆可以繼承對(duì)于原型的修改，我們創(chuàng)建了一個(gè)叫做define的函數(shù)：

Object.prototype.define = function (property, value) {
    this[property] = value;

    if (Object.hasOwnProperty.call(this, "clones")) {
        var clones = this.clones;
        var length = clones.length;

        while (length) {
            var clone = clones[--length];
            if (typeof clone[property] === "undefined")
                clone.define(property, value);
        }
    }
};

現(xiàn)在我們可以修改原型然后這個(gè)修改會(huì)反映在所有的克隆上。例如我們可以創(chuàng)建創(chuàng)建一個(gè)別名addEventListener針對(duì)eventEmitter上的on方法：

var square = rectangle.extend(eventEmitter, {
    create: function (side) {
        return rectangle.create.call(this, side, side);
    },
    resize: function (newSize) {
        var oldSize = this.width;
        this.width = this.height = newSize;
        this.emit("resize", oldSize, newSize);
    }
});

var sq = square.create(5);

eventEmitter.define("addEventListener", eventEmitter.on);

sq.addEventListener("resize", function (oldSize, newSize) {
    alert("sq resized from " + oldSize + " to " + newSize + ".");
});

sq.resize(10);
 
alert(sq.area());

藍(lán)圖需要特別注意。盡管對(duì)于藍(lán)圖的修改會(huì)被發(fā)送到它的克隆，但是藍(lán)圖的新的克隆并不會(huì)反映這些修改。幸運(yùn)的是這個(gè)問題的解決方法很簡(jiǎn)單。我們只需要對(duì)blueprint方法進(jìn)行小小的修改，然后任何對(duì)于藍(lán)圖的修改就會(huì)反映在克隆上了。

function blueprint(f) {
    var g = function () {
        f.apply(this, arguments);
        g.clones.unshift(this);

        var hasOwnProperty = Object.hasOwnProperty;

        for (var property in g)
            if (property !== "clones" &&
                hasOwnProperty.call(g, property))
                    this[property] = g[property];
    };

    g.clones = [];

    return g;
};

恭喜你。如果你讀完了整篇文章并且理解了我所說的東西，你現(xiàn)在就了解了 原型繼承并且為什么它很重要。很感謝你們看完了這篇文章。我希望這個(gè)博客能幫到你們。原型繼承是強(qiáng)大的并且值得更多的信任。然后大部分人從來不明白這個(gè)因?yàn)镴avascript中的原型繼承被構(gòu)造模式所掩蓋了。

這篇文章針對(duì)幾種繼承方式進(jìn)行了對(duì)比。文章中說到的幾種擴(kuò)展的方法我覺得是比較有用的。藍(lán)圖(blueprint，這個(gè)實(shí)在不知道該怎么翻譯)的擴(kuò)展方式比較像設(shè)計(jì)模式中的裝飾者模式，通過函數(shù)對(duì)對(duì)象進(jìn)行擴(kuò)展，這個(gè)是一種比較好玩的擴(kuò)展方式，可以跟原型繼承配合使用。另外文中提到了new關(guān)鍵字的弊端，個(gè)人覺得主要的原因還是new關(guān)鍵字的出現(xiàn)掩蓋了Javascript本身原型繼承的特點(diǎn)，人們自然而然就會(huì)想到傳統(tǒng)的類繼承，這樣就無法發(fā)揮原型繼承的最大威力。最后說到的屬性修改傳播的問題也挺有意思的，應(yīng)該會(huì)有相應(yīng)的應(yīng)用場(chǎng)景?？傊?，我覺得原型繼承相比于傳統(tǒng)的類繼承提供了更大的靈活性，可以給我們開發(fā)者提供很大的發(fā)揮空間，不過不管怎樣，到最后還是要涉及到基本的原型繼承的原理上，所以掌握了原型繼承的原理就可以根據(jù)不同的應(yīng)用場(chǎng)景使用各種各樣的擴(kuò)展方式。

原文地址：http://aaditmshah.github.io/why-prototypal-inheritance-matters/