JavaScript inheritance in Cocos2d-JS

Source: Internet
Author: User

JavaScript inheritance in Cocos2d-JS
JavaScript language itself does not provide classes, there is no other language class inheritance mechanism, 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 the Cocos2d-x, in the early version of the Cocos2d-JS Cocos2d-HTML, almost all of the API is designed to simulate the Cocos2d-x API, The Cocos2d-x itself is written in C ++, many of the objects and functions are complex, and the JavaScript language cannot 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-javascript-inheritance.
John Resiq's simple JavaScript Inheritance Method is inspired by the prototype Inheritance Mechanism. It has the same Class concept as Java and other object-oriented classes, and he designed the root Class of all classes, the 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;}) ? /_super/ : /.*/;   // 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 an Object in Java, all classes directly or indirectly inherit from the Class. Below is an inherited Class instance:
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 Java object-oriented language, it should be easy to understand. The Code in line ① declares the Person Class, which inherits from Class and Class. extend () indicates that it inherits from Class. The second line of code defines the constructor init, which is used to initialize attributes. The Code in line ③ defines the normal function dance (), which can return the property dancing.
Line 4 of Code declares that the Ninja class inherits from the Person class. Line 5 defines the constructor init. In this function, this. the _ super (false) Statement calls the parent class constructor to initialize attributes in the parent class, as shown in line 6 of the Code. The Code in line 7 is to override the dance () function, which will overwrite the dance () function of the parent class. The code in the nth line is this. _ super (), which calls the dance () function of the parent class. The code in the nth line is the new swingSword () function of the subclass Ninja ().
The code in the nth line creates a p object through the Person class, and the parameter for the constructor is true. Number? The row code prints the dance attribute of the log p object and returns true.
Number? The line code creates n objects through the Ninja class. The constructor parameter is null. By default, the dance attribute in the parent class is initialized with false. So in the Code section? Row printing is false.

This simple JavaScript inheritance method actually implements the inheritance and polymorphism mechanism of object-oriented concepts in the general sense. This simple JavaScript inheritance method is the core of the Cocos2d-JS Inheritance Mechanism, Cocos2d-JS slightly modified, familiar with the simple JavaScript inheritance usage for understanding and learning Cocos2d-JS is very important.

 

 


 

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.