JavaScript 향상 튜토리얼 - Cocos2d-JS의 JavaScript 상속

JavaScript 언어 자체는 클래스를 제공하지 않으며, 다른 언어에는 클래스 상속 메커니즘이 없습니다. 객체의 프로토타입을 통해 상속이 구현되지만 이는 Cocos2d-JS 엔진의 요구 사항을 충족할 수 없습니다. Cocos2d-JS 엔진은 Cocos2d-x에서 발전했기 때문에 Cocos2d-JS의 초기 버전인 Cocos2d-HTML의 거의 모든 API는 Cocos2d-x API 자체를 시뮬레이션하도록 설계되었습니다. 객체와 함수는 상대적으로 복잡하며 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 언어에 익숙하다면 이해하기 쉬워야 합니다. 코드의 1행에서는 Class에서 상속되는 Person 클래스를 선언하고 Class.extend()는 Class에서 상속됨을 나타냅니다. 코드의 2행에서는 속성을 초기화하는 데 사용되는 생성자 init를 정의합니다. 코드의 3행에서는 dance 속성을 반환할 수 있는 일반 함수 dance()를 정의합니다.
4번 코드 줄은 Ninja 클래스가 Person 클래스에서 상속됨을 선언합니다. 5번 코드 줄은 생성자 init를 정의합니다. 이 함수에서 this._super(false) 문은 상위 클래스 생성자를 호출하여 속성을 초기화합니다. 상위 클래스에서 코드의 ⑥행을 참조하세요. 코드 7행은 상위 클래스의 dance() 함수를 재정의하는 dance() 함수를 다시 작성하는 것입니다. 코드 8행은 this._super()가 상위 클래스의 dance() 함수를 호출하는 것입니다. 코드의 9행은 Ninja 서브클래스의 새로 추가된 함수 SwingSword()입니다.
코드의 ⑩행은 Person 클래스를 통해 p 객체를 생성하며 생성자의 매개변수가 true입니다. 코드의 첫 번째 줄은 log p 개체의 dance 속성을 인쇄하며 결과는 true입니다.
코드의 첫 번째 줄은 Ninja 클래스를 통해 n 객체를 생성합니다. 생성자의 매개변수는 비어 있습니다. 기본 초기화에서는 false를 사용하여 상위 클래스의 댄스 속성을 초기화합니다. 따라서 코드의 첫 번째 줄은 false를 인쇄합니다.
이 간단한 JavaScript 상속 방법은 실제로 일반적인 의미에서 객체지향 개념의 상속 및 다형성 메커니즘을 구현합니다. 이 간단한 JavaScript 상속 방법은 Cocos2d-JS 상속 메커니즘의 핵심입니다. Cocos2d-JS는 약간 수정되었습니다. Cocos2d-JS를 이해하고 학습하려면 간단한 JavaScript 상속의 사용법을 아는 것이 매우 중요합니다.

위 내용은 JavaScript 향상 튜토리얼 - Cocos2d-JS에서의 JavaScript 상속 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!