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)?code style="margin:0px; padding:0px">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)：
基于類的繼承
原型繼承
類是不可變的。在運(yùn)行時(shí)，你無法修改或者添加新的方法
原型是靈活的。它們可以是不可變的也可以是可變的
類可能會(huì)不支持多重繼承
對(duì)象可以繼承多個(gè)原型對(duì)象
基于類的繼承比較復(fù)雜。你需要使用抽象類，接口和final類等等
原型繼承比較簡(jiǎn)潔。你只有對(duì)象，你只需要對(duì)對(duì)象進(jìn)行擴(kuò)展就可以了
不要再使用關(guān)鍵詞new了
到現(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ò)展。
“無中生有”對(duì)象創(chuàng)建法
Javascript中的Object.create方法用來從0開始創(chuàng)建一個(gè)對(duì)象，像下面這樣:
var object = Object.create(null) ;
 
上面例子中新創(chuàng)建的object沒有任何屬性。
克隆一個(gè)現(xiàn)有的對(duì)象
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 ;} ;
 
擴(kuò)展一個(gè)新創(chuàng)建的對(duì)象
上面的例子中我們克隆了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()) ;
 
構(gòu)造函數(shù) VS 原型
等等。這看起來很像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ì)。具體如下：
構(gòu)造模式
原型模式
函數(shù)式特點(diǎn)無法與new關(guān)鍵字一起使用
函數(shù)式特點(diǎn)可以與create結(jié)合使用
忘記使用new會(huì)導(dǎo)致無法預(yù)期的bug并且會(huì)污染全局變量
由于create是一個(gè)函數(shù)，所以程序總是會(huì)按照預(yù)期工作
使用構(gòu)造函數(shù)的原型繼承比較復(fù)雜并且混亂
使用原型的原型繼承簡(jiǎn)潔易懂
最后一點(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)造繼承。
對(duì)象創(chuàng)建和擴(kuò)展相結(jié)合
在上面的例子中我們創(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):
代理
合并
任何對(duì)于原型的修改都會(huì)反映在所有副本上
任何對(duì)于原型的修改都需要手動(dòng)更新到副本中
屬性查找效率較低因?yàn)樾枰M(jìn)行原型鏈查找
屬性查找更搞笑因?yàn)槔^承的屬性是通過復(fù)制的方式附加在對(duì)象本身的
使用Object.create()方法只能繼承單一對(duì)象
對(duì)象可以從任意數(shù)量的對(duì)象中通過復(fù)制繼承屬性
從多個(gè)原型繼承
上表中最后一點(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)?code style="margin:0px; padding:0px">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(呵呵呵)。
Mixin的藍(lán)圖(Buleprint)
在上面的例子中你肯定注意到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)：
Mixin
藍(lán)圖
它們用來擴(kuò)展對(duì)象的原型。因此對(duì)象共享同一個(gè)原型
它們用來擴(kuò)展新創(chuàng)建的對(duì)象。因此每個(gè)對(duì)象都是在自己對(duì)象本身進(jìn)行修改
因?yàn)槿鄙俜庋b方法所以不存在私有狀態(tài)
它們是函數(shù)，所以可以封裝私有狀態(tài)
它們是靜態(tài)原型并且不能被自定義
它們可以傳遞參數(shù)來自定義對(duì)象，可以向藍(lán)圖函數(shù)傳遞一些用來自定義的參數(shù)
修復(fù)instanceof操作
許多Javascript程序員會(huì)覺得使用原型模式來繼承違背了語言的精髓。他們更偏向于構(gòu)造模式因?yàn)樗麄冇X得通過構(gòu)造函數(shù)創(chuàng)建的對(duì)象才是真正的實(shí)例，因?yàn)?code style="margin:0px; padding:0px">instanceof操作會(huì)返回true。然而，這個(gè)爭(zhēng)論是沒有意義的，因?yàn)?code style="margin:0px; padding:0px">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);            }        }    };}) ;
 
向原型發(fā)送變化
上面例子中的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;};
 
結(jié)論
恭喜你。如果你讀完了整篇文章并且理解了我所說的東西，你現(xiàn)在就了解了 原型繼承并且為什么它很重要。很感謝你們看完了這篇文章。我希望這個(gè)博客能幫到你們。原型繼承是強(qiáng)大的并且值得更多的信任。然后大部分人從來不明白這個(gè)因 為Javascript中的原型繼承被構(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/