JavaScript强化教程——Cocos2d

JavaScript语言本身没有提供类，没有其它语言的类继承机制，它的继承是通过对象的原型实现的，但这不能满足Cocos2d-JS引擎的要求。由于Cocos2d-JS引擎是从Cocos2d-x演变而来的，在Cocos2d-JS的早期版本Cocos2d-HTML中几乎全部的API都是模拟Cocos2d-x API而设计的，Cocos2d-x本身是有C++编写的，其中的很多对象和函数比较复杂，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;

1// Instantiate a base class (but only create the instance,  
2// don't run the init constructor)  
3initializing = true;  
4var prototype = new this();  
5initializing = false;  
6 
7// Copy the properties over onto the new prototype  
8for (var name in prop) {  
9  // Check if we're overwriting an existing function  
10  prototype\[name\] = typeof prop\[name\] == "function" &&  
11    typeof \_super\[name\] == "function" && fnTest.test(prop\[name\]) ?  
12    (function(name, fn){  
13      return function() {  
14        var tmp = this.\_super;  
15         
16        // Add a new .\_super() method that is the same method  
17        // but on the super-class  
18        this.\_super = \_super\[name\];  
19         
20        // The method only need to be bound temporarily, so we  
21        // remove it when we're done executing  
22        var ret = fn.apply(this, arguments);          
23        this.\_super = tmp;  
24         
25        return ret;  
26      };  
27    })(name, prop\[name\]) :  
28    prop\[name\];  
29}  
30 
31// The dummy class constructor  
32function Class() {  
33  // All construction is actually done in the init method  
34  if ( !initializing && this.init )  
35    this.init.apply(this, arguments);  
36}  
37 
38// Populate our constructed prototype object  
39Class.prototype = prototype;  
40 
41// Enforce the constructor to be what we expect  
42Class.prototype.constructor = Class;  
43
44// And make this class extendable  
45Class.extend = arguments.callee;  
46 
47return Class;

};
})();

与Java中的Object一样所有类都直接或间接继承于Class，下面是继承Class实例：

var Person = Class.extend({ ①
init: function (isDancing) { ②
this.dancing = isDancing;
},
dance: function () { ③
return this.dancing;
}
});

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语言的面向对象很熟悉的话，应该很容易看懂。其中第①行代码是声明Person类，它继承自Class，Class.extend()表示继承自Class。第②行代码的定义构造函数init，它的作用是初始化属性。第③行代码是定义普通函数dance()，它可以返回属性dancing。
第④行代码是声明Ninja类继承自Person类，第⑤行代码的定义构造函数init，在该函数中this._super(false)语句是调用父类构造函数初始化父类中的属性，见代码第⑥行所示。第⑦行代码是重写dance()函数，它会覆盖父类的dance()函数。第⑧行代码是this._super()是调用父类的dance()函数。第⑨行代码是子类Ninja新添加的函数swingSword()。
第⑩行代码通过Person类创建p对象，给构造函数的参数是true。第⑪行代码是打印日志p对象dance属性，结果为true。
第⑫行代码通过Ninja类创建n对象，构造函数的参数为空，默认初始化采用false初始化父类中的dance属性。因此在代码第⑬行打印为false。
这种简单JavaScript继承方法事实上实现了一般意义上的面向对象概念的继承和多态机制。这种简单JavaScript继承方法是Cocos2d-JS继承机制的核心，Cocos2d-JS稍微做了修改，熟悉简单JavaScript继承的用法对于理解和学习Cocos2d-JS非常的重要。

本文为 H5EDU 机构官方 HTML5培训教程，主要介绍：JavaScript强化教程 —— Cocos2d-JS中JavaScript继承

JavaScript强化教程——Cocos2d

评论区

相关推荐