Cocos2d-JS中JavaScript继承

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-javascript-inheritance/）中提供了一种简单JavaScript继承（Simple JavaScript Inheritance）方法。
John Resiq的简单JavaScript继承方法灵感来源于原型继承机制，它具有与Java等面向对象一样的类概念，并且他设计了所有类的根类Class，它的代码如下：

[html] view plaincopy

 

1. /* Simple JavaScript Inheritance  

2.  * By John Resig http://ejohn.org/  

3.  * MIT Licensed.  

4.  */  

5. // Inspired by base2 and Prototype  

6. (function(){  

7.   var initializing = false, fnTest = /xyz/.test(function(){xyz;}) ? /\b_super\b/ : /.*/;  

8.    

9.   // The base Class implementation (does nothing)  

10.   this.Class = function(){};  

11.    

12.   // Create a new Class that inherits from this class  

13.   Class.extend = function(prop) {  

14.     var _super = this.prototype;  

15.      

16.     // Instantiate a base class (but only create the instance,  

17.     // don't run the init constructor)  

18.     initializing = true;  

19.     var prototype = new this();  

20.     initializing = false;  

21.      

22.     // Copy the properties over onto the new prototype  

23.     for (var name in prop) {  

24.       // Check if we're overwriting an existing function  

25.       prototype[name] = typeof prop[name] == "function" &&  

26.         typeof _super[name] == "function" && fnTest.test(prop[name]) ?  

27.         (function(name, fn){  

28.           return function() {  

29.             var tmp = this._super;  

30.              

31.             // Add a new ._super() method that is the same method  

32.             // but on the super-class  

33.             this._super = _super[name];  

34.              

35.             // The method only need to be bound temporarily, so we  

36.             // remove it when we're done executing  

37.             var ret = fn.apply(this, arguments);          

38.             this._super = tmp;  

39.              

40.             return ret;  

41.           };  

42.         })(name, prop[name]) :  

43.         prop[name];  

44.     }  

45.      

46.     // The dummy class constructor  

47.     function Class() {  

48.       // All construction is actually done in the init method  

49.       if ( !initializing && this.init )  

50.         this.init.apply(this, arguments);  

51.     }  

52.      

53.     // Populate our constructed prototype object  

54.     Class.prototype = prototype;  

55.      

56.     // Enforce the constructor to be what we expect  

57.     Class.prototype.constructor = Class;  

58.    

59.     // And make this class extendable  

60.     Class.extend = arguments.callee;  

61.      

62.     return Class;  

63.   };  

64. })();  

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

[html] view plaincopy

 

1. var Person = Class.extend({                                             ①  

2.     init: function (isDancing) {                                                ②  

3.         this.dancing = isDancing;  

4.     },  

5.     dance: function () {                                                    ③  

6.         return this.dancing;  

7.     }  

8. });  

9.   

10.   

11. var Ninja = Person.extend({                                             ④  

12.     init: function () {                                                     ⑤  

13.         this._super(false);                                             ⑥  

14.     },  

15.     dance: function () {                                                    ⑦  

16.         // Call the inherited version of dance()  

17.         return this._super();                                               ⑧  

18.     },  

19.     swingSword: function () {                                               ⑨  

20.         return true;  

21.     }  

22. });  

23.   

24.   

25. var p = new Person(true);                                               ⑩  

26. console.log(p.dance());// true                                              ⑪  

27.   

28.   

29. var n = new Ninja();                                                        ⑫  

30. console.log(n.dance()); // false                                                ⑬  

31. 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非常的重要。

 

 

更多内容请关注最新Cocos图书《Cocos2d-x实战：JS卷——Cocos2d-JS开发》

本书交流讨论网站：http://www.cocoagame.net

欢迎加入Cocos2d-x技术讨论群：257760386

更多精彩视频课程请关注智捷课堂Cocos课程：http://v.51work6.com

智捷课堂现推出Cocos会员，敬请关注：http://v.51work6.com/courseInfoRedirect.do?action=netDetialInfo&courseId=844465&categoryId=0

 

 

 

《Cocos2d-x实战 JS卷》现已上线，各大商店均已开售：

京东：http://item.jd.com/11659698.html

欢迎关注智捷iOS课堂微信公共平台，了解最新技术文章、图书、教程信息