js本身是没有继承的(实现继承,其他语言只要一个关键字就够了),但是牛人很多,大神们想到了很多方法来实现“继承”,要深入学习js,学习一下继承还是很有必要的,好在这方面资料很多,随便百度一下就有了。
这里,来学习一下如何实现继承createjs中的类。
先看代码:
function MyLayer(){
this.Container_constructor();
}
var p=createjs.extend(MyLayer, createjs.Container);
p.a=function(){
console.log("调用了函数a");
}
createjs.promote(MyLayer,"Container");
window.onload=function(){
//创建stage,参数为canvas的id
var stage=new createjs.Stage("gameMain");
var layer=new Hanyeah.MyLayer();
layer.a();
console.log(layer);
console.log(new createjs.Container());
//stage.addChild(layer);
stage.update();
}
首先我们定义了一个类(其实就是一个function),注意this.Container_constructor()这句,一会儿再说这句的作用。
function MyLayer(){
this.Container_constructor();
}
然后调用createjs提供的方法createjs.extend(MyLayer, createjs.Container);从名字来看,这句是实现继承的,第一个参数是子类,第二个参数是父类,这个函数返回了子类的prototype(不知道prototype的话,自己去百度),所以我们定义了一个变量p来接收,p.a就相当于MyLayer.prototype.a了。
一开始以为createjs.extend之后就实现继承了,其实还不够,还要有后面这句createjs.promote(MyLayer,"Container");第一个参数是子类,第二个参数一般是父类的名字(官方文档写的挺清楚,只是英文的,没看懂)。
这样我们就实现了继承createjs中的类,MyLayer继承自createjs.Container,并且为MyLayer添加了一个新方法a。
完整的继承应该是这样。我们知道(function a())()这句的作用是是立即执行, "use strict"是严格模式的意思。为什么要这么写?百度一下“use strict“就知道了,(function a())()就是为了控制"use strict"的作用域。createjs中都是用的严格模式,我们自己写代码的时候,可以不用,但是还是建议使用,据说严格模式是js未来的趋势。
var Hanyeah={};
(function(){
"use strict";
function MyLayer(){
this.Container_constructor();
}
var p=createjs.extend(MyLayer, createjs.Container);
p.a=function(){
console.log("调用了函数a");
}
Hanyeah.MyLayer=createjs.promote(MyLayer,"Container");
})()
关于this.Container_constructor();应该是调用父类的构造函数,相当于as中的super();这个方法需要调用createjs.promote之后才会有,函数名Container_constructor前边的Container就是createjs.promote函数的第二个参数。
具体自己看一下源码和注释吧,作者英文太渣,只能看到会用的程度。
createjs.promote方法的定义及注释。
/**
* Promotes any methods on the super class that were overridden, by creating an alias in the format `prefix_methodName`.
* It is recommended to use the super class's name as the prefix.
* An alias to the super class's constructor is always added in the format `prefix_constructor`.
* This allows the subclass to call super class methods without using `function.call`, providing better performance.
*
* For example, if `MySubClass` extends `MySuperClass`, and both define a `draw` method, then calling `promote(MySubClass, "MySuperClass")`
* would add a `MySuperClass_constructor` method to MySubClass and promote the `draw` method on `MySuperClass` to the
* prototype of `MySubClass` as `MySuperClass_draw`.
*
* This should be called after the class's prototype is fully defined.
*
* function ClassA(name) {
* this.name = name;
* }
* ClassA.prototype.greet = function() {
* return "Hello "+this.name;
* }
*
* function ClassB(name, punctuation) {
* this.ClassA_constructor(name);
* this.punctuation = punctuation;
* }
* createjs.extend(ClassB, ClassA);
* ClassB.prototype.greet = function() {
* return this.ClassA_greet()+this.punctuation;
* }
* createjs.promote(ClassB, "ClassA");
*
* var foo = new ClassB("World", "!?!");
* console.log(foo.greet()); // Hello World!?!
*
* @method promote
* @param {Function} subclass The class to promote super class methods on.
* @param {String} prefix The prefix to add to the promoted method names. Usually the name of the superclass.
* @return {Function} Returns the subclass.
*/
createjs.promote = function(subclass, prefix) {
"use strict";
var subP = subclass.prototype, supP = (Object.getPrototypeOf&&Object.getPrototypeOf(subP))||subP.__proto__;
if (supP) {
subP[(prefix+="_") + "constructor"] = supP.constructor; // constructor is not always innumerable
for (var n in supP) {
if (subP.hasOwnProperty(n) && (typeof supP[n] == "function")) { subP[prefix + n] = supP[n]; }
}
}
return subclass;
};
createjs.extend的定义及注释。
/**
* Sets up the prototype chain and constructor property for a new class.
*
* This should be called right after creating the class constructor.
*
* function MySubClass() {}
* createjs.extend(MySubClass, MySuperClass);
* ClassB.prototype.doSomething = function() { }
*
* var foo = new MySubClass();
* console.log(foo instanceof MySuperClass); // true
* console.log(foo.prototype.constructor === MySubClass); // true
*
* @method extends
* @param {Function} subclass The subclass.
* @param {Function} superclass The superclass to extend.
* @return {Function} Returns the subclass's new prototype.
*/
createjs.extend = function(subclass, superclass) {
"use strict";
function o() { this.constructor = subclass; }
o.prototype = superclass.prototype;
return (subclass.prototype = new o());
};
发表评论:
◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。