文档章节

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

哟猫Intry
 哟猫Intry
发布于 2016/07/08 15:40
字数 921
阅读 18
收藏 2

本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:JavaScript强化教程 —— 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-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;  
     
    // 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非常的重要。

http://www.h5edu.cn/

© 著作权归作者所有

哟猫Intry
粉丝 0
博文 46
码字总数 31138
作品 0
昌平
私信 提问
Cocos2d-JS中JavaScript继承

JavaScript语言本身没有提供类,没有其它语言的类继承机制,它的继承是通过对象的原型实现的,但这不能满足Cocos2d-JS引擎的要求。由于Cocos2d-JS引擎是从Cocos2d-x演变而来的,在Cocos2d-J...

智捷课堂
2015/03/17
43
0
JavaScript语言基础-环境搭建

我们要想编写和运行JavaScript脚本,则需要:JavaScript编辑工具和JavaScript运行测试环境。下面我们分别介绍一下。 JavaScript编辑工具 JavaScript编辑工具最简单的可以使用一些文本编辑工具...

智捷课堂
2015/03/12
2.4K
0
Cocos2d-JS键盘事件

Cocos2d-JS中的键盘事件与触摸事件不同,它没有空间方面信息。键盘事件不仅可以响应键盘,还可以响应设备的菜单。 键盘事件是EventKeyboard,对应的键盘事件监听器(cc.EventListener.KEYBOA...

智捷课堂
2015/04/01
81
0
搭建Cocos2d-JS开发环境

使用Cocos2d-JS引擎开发游戏,主要的程序代码是JavaScript语言,因此,凡是能够开发JavaScript语言工具都适用于Cocos2d-JS游戏开发。本书我们推荐WebStorm和Cocos Code IDE工具。 搭建WebSt...

智捷课堂
2015/03/18
3K
0
每个JavaScript工程师都应懂的33个概念

摘要: 基础很重要啊! 原文:33 concepts every JavaScript developer should know 译文:每个 JavaScript 工程师都应懂的33个概念 作者:stephentian Fundebug经授权转载,版权归原作者所有...

Fundebug
2018/10/30
0
0

没有更多内容

加载失败,请刷新页面

加载更多

计算机实现原理专题--二进制减法器(二)

在计算机实现原理专题--二进制减法器(一)中说明了基本原理,现准备说明如何来实现。 首先第一步255-b运算相当于对b进行按位取反,因此可将8个非门组成如下图的形式: 由于每次做减法时,我...

FAT_mt
昨天
6
0
好程序员大数据学习路线分享函数+map映射+元祖

好程序员大数据学习路线分享函数+map映射+元祖,大数据各个平台上的语言实现 hadoop 由java实现,2003年至今,三大块:数据处理,数据存储,数据计算 存储: hbase --> 数据成表 处理: hive --> 数...

好程序员官方
昨天
7
0
tabel 中含有复选框的列 数据理解

1、el-ui中实现某一列为复选框 实现多选非常简单: 手动添加一个el-table-column,设type属性为selction即可; 2、@selection-change事件:选项发生勾选状态变化时触发该事件 <el-table @sel...

everthing
昨天
6
0
【技术分享】TestFlight测试的流程文档

上架基本需求资料 1、苹果开发者账号(如还没账号先申请-苹果开发者账号申请教程) 2、开发好的APP 通过本篇教程,可以学习到ios证书申请和打包ipa上传到appstoreconnect.apple.com进行TestF...

qtb999
昨天
10
0
再见 Spring Boot 1.X,Spring Boot 2.X 走向舞台中心

2019年8月6日,Spring 官方在其博客宣布,Spring Boot 1.x 停止维护,Spring Boot 1.x 生命周期正式结束。 其实早在2018年7月30号,Spring 官方就已经在博客进行过预告,Spring Boot 1.X 将维...

Java技术剑
昨天
18
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部