JavaScript 拡張チュートリアル - Cocos2d-JS での JavaScript の継承

黄舟
リリース: 2017-01-21 15:59:32
オリジナル
1124 人が閲覧しました

JavaScript 言語自体はクラスを提供せず、他の言語にはクラス継承メカニズムがありません。その継承はオブジェクトのプロトタイプを通じて実装されますが、これでは Cocos2d-JS エンジンの要件を満たすことができません。 Cocos2d-JS エンジンは Cocos2d-x から進化したため、Cocos2d-JS の初期バージョンである Cocos2d-HTML のほとんどすべての API は、Cocos2d-x API 自体をシミュレートするように設計されており、その多くは C++ で作成されました。オブジェクトと関数は比較的複雑であり、JavaScript 言語ではそれらを記述することができません。
オープン ソース コミュニティでは、John Resiq がブログ (http://ejohn.org/blog/simple-j... ance/) で単純な JavaScript 継承 (Simple JavaScript Inheritance) メソッドを提供しています。
John Resiq の単純な JavaScript 継承メソッドは、プロトタイプの継承メカニズムからインスピレーションを受けており、Java などのオブジェクト指向オブジェクトと同じクラス概念を持ち、すべてのクラスのルート クラス Class を設計しました。 Java Like Object と同様に、すべてのクラスは直接または間接的に Class を継承します。 以下は、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 言語に精通している場合は、簡単に理解できるはずです。コードの 1 行目では、Class を継承する Person クラスを宣言しており、Class.extend() は、Class を継承していることを示しています。コードの 2 行目では、プロパティの初期化に使用されるコンストラクター init を定義します。コードの 3 行目では、属性 dance を返すことができる通常の関数 dance() を定義しています。

コードの④行は、NinjaクラスがPersonクラスから継承することを宣言します。コードの⑤行は、この関数の中で、this._super(false)ステートメントが親クラスのコンストラクターを呼び出して属性を初期化します。親クラス。行⑥に示すコードを参照してください。コードの 7 行目では、dance() 関数を書き換えます。これにより、親クラスの dance() 関数がオーバーライドされます。コードの 8 行目はこれです。_super() は親クラスの dance() 関数を呼び出します。コードの 9 行目は、サブクラス Ninja の新しく追加された関数 SwingSword() です。

コードの ⑩ 行目は、 Person クラスを通じて p オブジェクトを作成し、コンストラクターへのパラメーターは true です。コードの最初の行は、log p オブジェクトの dance 属性を出力し、結果は true になります。
コードの最初の行は、Ninja クラスを通じて n 個のオブジェクトを作成します。デフォルトの初期化では、親クラスのダンス属性を初期化するために false が使用されます。したがって、コードの 1 行目は false を出力します。
この単純な JavaScript 継承メソッドは、一般的な意味でのオブジェクト指向の概念の継承とポリモーフィズムのメカニズムを実際に実装します。この単純な JavaScript 継承メソッドは、Cocos2d-JS 継承メカニズムの核心であり、Cocos2d-JS を理解して学習するには、単純な JavaScript 継承の使用法に慣れることが非常に重要です。

上記は JavaScript 拡張チュートリアル - Cocos2d-JS での JavaScript 継承の内容です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート