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中的打印语句: 数据类型 变量 ...
随机推荐
- Alsa驱动snd_soc_read的底层实现
在分析snd_soc_codec_driver的结构体时,发现有些芯片的驱动中定义了字段reg_word_size, reg_cache_size, reg_cache_default,但没有定义re ...
- nginx 常用配置说明
一.location 配置 1.1 语法规则: location [=|~|~*|^~] /uri/ { … }= 开头表示精确匹配^~ 开头表示uri以某个常规字符串开头,理解为匹配 url路径即可 ...
- Warning: Multiple build commands for output file /xxx
xcode中 有时候会报一个警告: [WARN]Warning: Multiple build commands for output file /xxx 要解决这个问题很简单: 1.选择你的工程 2 ...
- Android 2.1 和 Android 4.4 工程目录超详细对比及详解
在搭建Android开发环境及简单地建立一个HelloWorld项目后,本篇将通过HelloWorld项目来介绍Android项目的目录结构.本文的主要主题如下: 1.1.HelloWorld项目的目 ...
- 基于jQuery右下角旋转环状菜单代码
基于jQuery右下角旋转环状菜单代码.这是一款固定在页面的右下角位置,当用户点击了主菜单按钮后,子菜单项会以环状旋转进入页面,并使用animate.css来制作动画效果.效果图如下: 在线预览 ...
- Asp.net Mvc4 基于Authorize实现的模块权限验证方式
在MVC中,我们可以通过在action或者controller上设置Authorize[Role="xxx"] 的方式来设置用户对action的访问权限.显然,这样并不能满足我们的 ...
- Android SDK之API Level
Android SDK之API Level Android SDK API_LEVEL Platform Version API Level VERSION_CODE Android 4.2, 4.2 ...
- asynchronous-logging-with-log4j-2--转
原文地址:https://dzone.com/articles/asynchronous-logging-with-log4j-2 Log4J 2 is a logging framework des ...
- 1、图解Oracle Logminer配置使用
LogMiner配置使用手册 1 Logminer简介 1.1 LogMiner介绍 Oracle LogMiner 是Oracle公司从产品8i以后提供的一个实际非常有用的分析工具,使用该工具可以轻 ...
- extractCSS – 帮助你从 HTML 中快速分离出 CSS
extractCSS 是一个免费的基于 Web 的应用程序,能够从 HTML 中提取风格相关的信息,包括 id.class 和内联样式,而且输出可以定制(缩进和括号的用法).该工具非常有用,当我们快速 ...