购买
下载掌阅APP,畅读海量书库
立即打开
畅读海量书库
扫码下载掌阅APP

2.11 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。它的代码如下:

    /* 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;
      
        //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;
      };
    })();

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

  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

如果对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非常重要。 j/n7vj9kGWTPHMzAUcm4OoY4JwjSHZoHS5B8dpfLnjcjz86yEzkLBbXb3SsSPcHd

点击中间区域
呼出菜单
上一章
目录
下一章
×