JavaScript強化教學――Cocos2d-JS中JavaScript繼承

JavaScript語言本身沒有提供類，沒有其它語言的類別繼承機制，它的繼承是透過物件的原型實現的，但這不能滿足Cocos2d-JS引擎的要求。由於Cocos2d-JS引擎是從Cocos2d-x演變而來的，在Cocos2d-JS的早期版本Cocos2d-HTML中幾乎全部的API都是模擬Cocos2d-x API而設計的，Cocos2d-x本身是有C++編寫的，其中的許多物件和函數比較複雜，JavaScript語言描述起來有些力不從心了。
在開源社群中John Resiq在他的部落格（http://ejohn.org/blog/simple-j ... ance/）中提供了一種簡單JavaScript繼承（Simple JavaScript Inheritance）方法。
John Resiq的簡單JavaScript繼承方法靈感來自原型繼承機制，它具有與Java等物件導向一樣的類別概念，並且他設計了所有類別的根類別Class，它的程式碼如下：

/* Simple JavaScript Inheritance  
 * By John Resig http://ejohn.org/  
 * MIT Licensed.  
 */  
// Inspired by base2 and Prototype  
(function(){  
  var initializing = false, fnTest = /xyz/.test(function(){xyz;}) ? /\b_super\b/ : /.*/;  
   
  // The base Class implementation (does nothing)  
  this.Class = function(){};  
   
  // Create a new Class that inherits from this class  
  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;  
     
    // 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.init )  
        this.init.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;  
  };  
})();

與Java中的Object一樣所有類別都直接或間接繼承於Class，以下是繼承Class實例：

var Person = Class.extend({                                             ①  
    init: function (isDancing) {                                                ②  
        this.dancing = isDancing;  
    },  
    dance: function () {                                                    ③  
        return this.dancing;  
    }  
});  
  
  
var Ninja = Person.extend({                                             ④  
    init: function () {                                                     ⑤  
        this._super(false);                                             ⑥  
    },  
    dance: function () {                                                    ⑦  
        // Call the inherited version of dance()  
        return this._super();                                               ⑧  
    },  
    swingSword: function () {                                               ⑨  
        return true;  
    }  
});  
  
  
var p = new Person(true);                                               ⑩  
console.log(p.dance());// true                                                
  
  
var n = new Ninja();                                                          
console.log(n.dance()); // false                                                  
console.log(n.swingSword()); // true

如果你對於Java語言的物件導向很熟悉的話，應該很容易看懂。其中第①行程式碼是宣告Person類，它繼承自Class，Class.extend()表示繼承自Class。第②行程式碼的定義建構函式init，它的作用是初始化屬性。第③行程式碼是定義普通函數dance()，它可以回傳屬性dancing。
第④行程式碼是宣告Ninja類別繼承自Person類，第⑤行程式碼的定義建構函式init，在該函式中this._super(false)語句是呼叫父類別建構函式初始化父類別中的屬性，見程式碼第⑥行所示。第⑦行程式碼是重寫dance()函數，它會覆寫父類別的dance()函數。第⑧行程式碼是this._super()是呼叫父類別的dance()函數。第⑨行程式碼是子類別Ninja新加入的函數swingSword()。
第⑩行程式碼透過Person類別建立p對象，給構造函數的參數是true。第行程式碼是列印日誌p物件dance屬性，結果為true。
第行程式碼透過Ninja類別建立n對象，建構函數的參數為空，預設初始化採用false初始化父類別中的dance屬性。因此在程式碼第行列印為false。
這種簡單JavaScript繼承方法事實上實作了一般意義上的物件導向概念的繼承和多型機制。這種簡單JavaScript繼承方法是Cocos2d-JS繼承機制的核心，Cocos2d-JS稍微做了修改，熟悉簡單JavaScript繼承的用法對於理解和學習Cocos2d-JS非常的重要。

以上就是JavaScript強化教學――Cocos2d-JS中JavaScript繼承的內容，更多相關內容請關注PHP中文網（www.php.cn）！