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非常的重要。
本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:JavaScript强化教程 —— Cocos2d-JS中JavaScript继承
JavaScript强化教程——Cocos2d-JS中JavaScript继承的更多相关文章
- JavaScript强化教程 -- cocosjs场景切换
场景切换 在main.js,将StartScene作为我们初始化运行的场景,代码如下: cc.LoaderScene.preload(g_resources, function () { cc.dir ...
- JavaScript强化教程——jQuery AJAX 实例
什么是 AJAX?AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML).简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据 ...
- JavaScript强化教程 —— Cocos2d-JS的屏幕适配方案
1. 设置屏幕适配策略(Resolution Policy) 如果你还没有用过Resolution Policy,只需要在游戏载入过程完成之后(cc.game.onStart函数回调中),调用下面的代 ...
- JavaScript强化教程 - 六步实现贪食蛇
1.首先创建div 并且给div加样式 <div id="pannel" style="width: 500px;height: 500px;z-index: 1; ...
- JavaScript强化教程——JavaScript 总结
本教程中我们向您讲授了如何向 html 页面添加 JavaScript,使得网站的动态性和交互性更强. 你已经学习了如何创建对事件的响应,验证表单,以及如何根据不同的情况运行不同的脚本. 你也学到了如 ...
- JavaScript强化教程——jQuery UI API 类别
---恢复内容开始--- 主要介绍:JavaScript强化教程—— jQuery UI API 类别 jQuery UI 在jQuery 内置的特效上添加了一些功能.jQuery UI 支持颜色动 ...
- 转:js中javascript:void(0) 真正含义
from:http://www.jb51.net/article/71532.htm 在Javascript中void是一个操作符,该操作符指定要计算一个表达式但是不返回值. 我想使用过ajax的都常 ...
- javascript基础入门之js中的结构分支与循环语句
javascript基础入门之js中的结构分支与循环语句 程序的结构①顺序结构:自上而下:②选择(分支)结构:多条路径,根据不同的条件,只执行其中一个:③循环结构:重复某些代码④配合特定的语句实现选择 ...
- javascript基础入门之js中的数据类型与数据转换01
javascript基础入门之js中的数据结构与数据转换01 js的组成(ECMAScript.BOM.DOM) js中的打印语句: 数据类型 变量 ...
随机推荐
- 【转】Linux 概念架构的理解
转:http://mp.weixin.qq.com/s?__biz=MzA3NDcyMTQyNQ==&mid=400583492&idx=1&sn=3b18c463dcc451 ...
- Spring中加载配置文件的方式
原文:http://blog.csdn.net/snowjlz/article/details/8158560 Spring 中加载XML配置文件的方式,好像有3种, XML是最常见的Spring 应 ...
- 使用DirectWrite测量Direct2D文字大小
转载请注明出处:http://www.cnblogs.com/Ray1024 一.概述 最近在使用Direct2D和DirectWrite写引擎,在引擎中需要实现文本标签控件.但是文本标签的尺寸最好不 ...
- 优化C/C++代码的小技巧
说明: 无意看到一篇小短文,猜测作者应该是一个图形学领域的程序员或专家,介绍了在光线(射线)追踪程序中是如何优化C/C++代码的.倒也有一些参考意义,当然有的地方我并不赞同或者说我也不完全理解,原文在 ...
- MyBatis魔法堂:ResultMap详解
一.前言 MyBatis是基于“数据库结构不可控”的思想建立的,也就是我们希望数据库遵循第三范式或BCNF,但实际事与愿违,那么结果集映射就是MyBatis为我们提供这种理想与现实间转换的手段了, ...
- ActiveMQ学习(四)——应用程序接口
在 Java 里有 JMS的多个实现.其中 apache 下的 ActiveMQ就是不错的选择. 用 ActiveMQ最好还是了解下 JMS JMS 公共 点对点域 发布/订阅域 Connection ...
- Const的用法
宏和const的区别: 1.宏执行的是替换操作,这也就意味着会在内存中开辟多个临时空间 这样显然不是很好 2.宏不可以修改 const : 用const修饰的变量 为常量 不能修改,在内存中只有一份内 ...
- 点餐APP 冲刺二总结
冲刺二我们小组主要是实现数据库的增删改查等功能, 因为小组成员对数据库都不是很熟悉,所以花了比较多 的时间去学习,功能实现起来也是很艰难,所以第二个 冲刺结束后我们的数据库还是有点问题,不能成功 ...
- C#开发ActiveX网页截图控件
故事背景:Java组的小伙伴需要一个能在IE(还是6...)下截图并返回给网页的功能,但是IE做起来很麻烦(可能根本做不到),于是找到我写一个ActiveX控件实现此功能,想着可能还有其他小伙伴需要这 ...
- ASP.NET MVC5--为数据库新增字段(涉及数据库迁移技术)
Setting up Code First Migrations for Model Changes--为模型更改做数据库迁移. 1.打开资源管理器,在App_Data文件夹下,找到movies.md ...