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.