JavaScript enhancement tutorial - JavaScript inheritance in Cocos2d-JS

The JavaScript language itself does not provide classes, and there is no class inheritance mechanism in other languages. Its inheritance is implemented through the prototype of the object, but this cannot meet the requirements of the Cocos2d-JS engine. Since the Cocos2d-JS engine evolved from Cocos2d-x, almost all APIs in Cocos2d-HTML, the early version of Cocos2d-JS, were designed to simulate the Cocos2d-x API. Cocos2d-x itself was written in C++ , many of the objects and functions are relatively complex, and JavaScript language is somewhat unable to describe them.
In the open source community, John Resiq provides a simple JavaScript inheritance (Simple JavaScript Inheritance) method in his blog (http://ejohn.org/blog/simple-j ... ance/).
John Resiq's simple JavaScript inheritance method is inspired by the prototypal inheritance mechanism. It has the same class concept as object-oriented objects such as Java, and he designed the root class Class for all classes. Its code is as follows:

/* 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;  
  };  
})();

Like Object in Java, all classes inherit directly or indirectly from Class. The following is an instance of inherited 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

If you are familiar with the object-oriented Java language, it should be easy to understand. Line 1 of the code declares the Person class, which inherits from Class, and Class.extend() indicates that it inherits from Class. Line 2 of code defines the constructor init, which is used to initialize properties. Line 3 of code defines the ordinary function dance(), which can return the attribute dancing.
The 4th line of code declares that the Ninja class inherits from the Person class, and the 5th line of code defines the constructor init. In this function, the this._super(false) statement calls the parent class constructor to initialize the attributes in the parent class. See line ⑥ of the code. Line 7 of code is to rewrite the dance() function, which will override the dance() function of the parent class. Line 8 of code is this._super() calls the dance() function of the parent class. Line 9 of code is the newly added function swingSword() of the subclass Ninja.
Line 10 of the code creates the p object through the Person class, and the parameter to the constructor is true. The first line of code prints the dance attribute of the log p object, and the result is true.
The first line of code creates the n object through the Ninja class. The parameters of the constructor are empty. The default initialization uses false to initialize the dance attribute in the parent class. So line 1 of the code prints false.
This simple JavaScript inheritance method actually implements the inheritance and polymorphism mechanism of object-oriented concepts in a general sense. This simple JavaScript inheritance method is the core of the Cocos2d-JS inheritance mechanism. Cocos2d-JS has been slightly modified. Familiarity with the usage of simple JavaScript inheritance is very important for understanding and learning Cocos2d-JS.

The above is the content of JavaScript enhancement tutorial - JavaScript inheritance in Cocos2d-JS. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!