JavaScript强化教程——Cocos2d-JS中JavaScript继承

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

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

在开源社区中JohnResiq在他的博客（http://ejohn.org/blog/simple-j...ance/）中提供了一种简单JavaScript继承（SimpleJavaScriptInheritance）方法。

JohnResiq的简单JavaScript继承方法灵感来源于原型继承机制，它具有与Java等面向对象一样的类概念，并且他设计了所有类的根类Class，它的代码如下：

/*SimpleJavaScriptInheritance

*ByJohnResighttp://ejohn.org/

*MITLicensed.

*/

//Inspiredbybase2andPrototype

(function(){

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

//ThebaseClassimplementation(doesnothing)

this.Class=function(){};

//CreateanewClassthatinheritsfromthisclass

Class.extend=function(prop){

var_super=this.prototype;

//Instantiateabaseclass(butonlycreatetheinstance,

//don'truntheinitconstructor)

initializing=true;

varprototype=newthis();

initializing=false;

//Copythepropertiesoverontothenewprototype

for(varnameinprop){

//Checkifwe'reoverwritinganexistingfunction

prototype[name]=typeofprop[name]=="function"&&

typeof_super[name]=="function"&&fnTest.test(prop[name])?

(function(name,fn){

returnfunction(){

vartmp=this._super;

//Addanew._super()methodthatisthesamemethod

//butonthesuper-class

this._super=_super[name];

//Themethodonlyneedtobeboundtemporarily,sowe

//removeitwhenwe'redoneexecuting

varret=fn.apply(this,arguments);

this._super=tmp;

returnret;

};

})(name,prop[name]):

prop[name];

}

//Thedummyclassconstructor

functionClass(){

//Allconstructionisactuallydoneintheinitmethod

if(!initializing&&this.init)

this.init.apply(this,arguments);

}

//Populateourconstructedprototypeobject

Class.prototype=prototype;

//Enforcetheconstructortobewhatweexpect

Class.prototype.constructor=Class;

//Andmakethisclassextendable

Class.extend=arguments.callee;

returnClass;

};

})();

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

varPerson=Class.extend({①

init:function(isDancing){②

this.dancing=isDancing;

},

dance:function(){③

returnthis.dancing;

}

});

varNinja=Person.extend({④

init:function(){⑤

this._super(false);⑥

},

dance:function(){⑦

//Calltheinheritedversionofdance()

returnthis._super();⑧

},

swingSword:function(){⑨

returntrue;

}

});

varp=newPerson(true);⑩

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

varn=newNinja();⑫

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