【cocos2d-x從c++到j(luò)s】05：John Resiq的繼承寫法解析

今天，我們來看看John Resiq的繼承寫法Simple JavaScript Inheritance。之前已經(jīng)有很多同行分析過了。這個(gè)寫法在cocos2d-x for js中也被使用，并作了少許改動(dòng)。我嘗試著做一些展開描述。

先貼源碼：

cc.Class = function(){};  
cc.Class.extend = function (prop) { 
    var _super = this.prototype;  
 
    // Instantiate a base class (but only create the instance, 
    // don't run the init constructor) 
    initializing = true; 
    var prototype = new this(); 
    initializing = false; 
    fnTest = /xyz/.test(function(){xyz;}) ? /\b_super\b/ : /.*/; 
 
    // Copy the properties over onto the new prototype 
    for (var name in prop) { 
        // Check if we're overwriting an existing function 
        prototype[name] = typeof prop[name] == "function" && 
            typeof _super[name] == "function" && fnTest.test(prop[name]) ? 
            (function (name, fn) { 
                return function () { 
                    var tmp = this._super; 
 
                    // Add a new ._super() method that is the same method 
                    // but on the super-class 
                    this._super = _super[name]; 
 
                    // The method only need to be bound temporarily, so we 
                    // remove it when we're done executing 
                    var ret = fn.apply(this, arguments); 
                    this._super = tmp; 
 
                    return ret; 
                }; 
            })(name, prop[name]) : 
            prop[name]; 
    } 
 
    // The dummy class constructor 
    function Class() { 
        // All construction is actually done in the init method 
        if (!initializing && this.ctor) 
            this.ctor.apply(this, arguments); 
    } 
 
    // Populate our constructed prototype object 
    Class.prototype = prototype; 
 
    // Enforce the constructor to be what we expect 
    Class.prototype.constructor = Class; 
 
    // And make this class extendable 
    Class.extend = arguments.callee; 
 
    return Class; 
}; 

cc.Class = function(){};  

做了一個(gè)全局構(gòu)造函數(shù)Class，這個(gè)不需要什么解釋。

cc.Class.extend = function (prop) {  

prop是一個(gè)對象字面量，這個(gè)對象包含了子類所需要的全部成員變量和成員方法。extend函數(shù)就在內(nèi)部遍歷這個(gè)字面量的屬性，然后將這些屬性綁定到一個(gè)“新的構(gòu)造函數(shù)”（也就是子類的構(gòu)造函數(shù)）的原型上。

var _super = this.prototype; 

注意，js里面的這個(gè)this的類型是在調(diào)用時(shí)指定的，那么這個(gè)this實(shí)際上是父類構(gòu)造函數(shù)對象。比如你寫了一個(gè)MyNode繼承自cc.Node。相應(yīng)代碼是：

var MyNode = cc.Node.extend({ 
    var _super = this.prototype;
... 
}); 

那么這個(gè)this就是父類cc.Node。

initializing = true; 
var prototype = new this(); 
initializing = false; 

生成父類的對象，用于給子類綁定原型鏈。但要注意，因?yàn)檫@個(gè)時(shí)候，什么實(shí)參都沒有，并不應(yīng)該給父類對象中的屬性進(jìn)行初始化（構(gòu)造器參數(shù)神馬的木有怎么初始化啊喵，這玩意實(shí)際是JS語言設(shè)計(jì)上的失誤造成的）。所以用一個(gè)變量做標(biāo)記，防止在這個(gè)時(shí)候進(jìn)行初始化。相關(guān)代碼在后面就會看到。

fnTest = /xyz/.test(function(){xyz;}) ? /\b_super\b/ : /.*/;  

這玩意看起來很亂，這是一個(gè)正則對象，右邊是一個(gè)？表達(dá)式，中間添加了一些正則代碼。這個(gè)對象的作用是，檢測子類函數(shù)中是否有調(diào)用父類的同名方法“_super()”(這種調(diào)用父類方式是由John Resiq約定的)。但這種檢測需要JS解釋器支持把一個(gè)函數(shù)轉(zhuǎn)換為字符串的功能，有些解釋器是不支持的。所以我們先做一個(gè)檢測，自己造了一個(gè)函數(shù)，里面有xyz，然后用正則的test函數(shù)在里面搜索xyz。如果返回true，表示支持函數(shù)轉(zhuǎn)字符串，那么就直接返回/\b_super\b/否則返回/.*/

 for (var name in prop) {  
        prototype[name] = typeof prop[name] == "function" &&  
            typeof _super[name] == "function" && fnTest.test(prop[name]) ?  
            (function (name, fn) {  
                return function () {  
                    var tmp = this._super;  
                    this._super = _super[name];   
                    var ret = fn.apply(this, arguments);   
                    this._super = tmp;
                    return ret;  
                };  
            })(name, prop[name]) :  
            prop[name];  
}  

現(xiàn)在重頭戲來了，在這個(gè)地方我們要把傳進(jìn)來的那個(gè)字面量prop的屬性全都綁定到原型上。這地方又他喵的是一個(gè)？表達(dá)式，JR實(shí)在太喜歡用這玩意了。首先，forin把屬性拿出來。然后，因?yàn)槲覀兲砑拥墓δ苁?ldquo;實(shí)現(xiàn)像c++那樣通過子類來調(diào)用父類的同名函數(shù)”，那么需要檢測父類和子類中是否都有這兩個(gè)同名函數(shù)。用的是這段代碼：

typeof prop[name] == "function" && typeof _super[name] == "function" 

然后，我們還要檢測，子類函數(shù)中是否真的使用了_super去調(diào)用了同名的父類函數(shù)。這個(gè)時(shí)候，之前的正則對象fnTest出場。繼續(xù)之前的話題，如果解釋器支持函數(shù)轉(zhuǎn)字符串，那么fnTest.test(prop[name])可以正常檢測，邏輯正常進(jìn)行；如果不支持，那么fnTest.test(prop[name])始終返回true。

這玩意什么用處，這是一個(gè)優(yōu)化，如果子類函數(shù)真的調(diào)父類函數(shù)了，就做一個(gè)特殊的綁定操作（這個(gè)操作我們后面馬上講），如果子類函數(shù)沒有調(diào)父類函數(shù)，那么就正常綁定。如果沒法判斷是否調(diào)用了（解釋器不支持函數(shù)轉(zhuǎn)字符串），直接按照調(diào)用了那種情況來處理。雖然損失一些性能，但是可以保證不出問題。

(function (name, fn) {   
    return function () {   
        var tmp = this._super;   
        this._super = _super[name];    
        var ret = fn.apply(this, arguments);    
        this._super = tmp; 
        return ret;   
    };   
})(name, prop[name]) 

繼續(xù)，上面的就是我們說的那個(gè)特殊的綁定操作。在這里，我們做了一個(gè)閉包，這里面的this是子類對象，跟之前的那個(gè)this不一樣哦。我們利用閉包的特性，保存了一個(gè)_super，這個(gè)_super被綁定了父類的同名函數(shù)_super[name]。然后我們使用fn.apply(this, arguments)調(diào)用子類函數(shù)，并保存返回值。因?yàn)檫@是一個(gè)閉包，所以根據(jù)語法，我們可以在fn的實(shí)現(xiàn)中調(diào)用_super函數(shù)。

function Class() {  
   if (!initializing && this.ctor)  
        this.ctor.apply(this, arguments);  
}  
 
Class.prototype = prototype;   
Class.prototype.constructor = Class;   
Class.extend = arguments.callee;  

生成一個(gè)Class構(gòu)造函數(shù)，這個(gè)構(gòu)造函數(shù)作為這個(gè)大匿名函數(shù)的返回值使用。然后里面就是之前說的，初始化保護(hù)，防止在綁定原型鏈的時(shí)候初始化。注意后面那個(gè)玩意ctor，在cocos2d-x for js中，真正的初始化是二段構(gòu)造的那個(gè)init，而不是ctor。在cocos2d-x for js的實(shí)現(xiàn)中ctor里面會調(diào)用一個(gè)函數(shù)cc.associateWithNative(this, 父類)，這個(gè)函數(shù)負(fù)責(zé)后臺生成一個(gè)c++對象，然后把c++對象和js對象綁定到一起。

剩下的是例行公事：綁定子類的原型，修正子類的構(gòu)造器指向它自己，給子類添加一個(gè)同樣的extend方法。

最后把這個(gè)完成的構(gòu)造函數(shù)返回出來。