1 象使用java类一样使用javscript类,javascript 类机制实现源码
习惯了使用java, 转入到javascript后, 一直苦恼为什么不能象java那样建立类及其对象呢。
尝试了很多方式, 最近在网上看到一段代码, 才发现原来在js中可以如此简单高效的实行类机制。
也打消了我对javascript类机制会特别消耗性能的顾虑,让我放心的使用javascript类机制。
代码比较短,只用了js的基本特性。参考价值比较高,在这里show一下代码。
实现类机制代码如下:
javascript代码
(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;
};
})();
测试代码如下:
javascript代码
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);
p.dance(); // => true
var n = new Ninja();
n.dance(); // => false
n.swingSword(); // => true
// Should all be true
p instanceof Person && p instanceof Class &&
n instanceof Ninja && n instanceof Person && n instanceof Class
分享到:
相关推荐
Javscript高性能编程+Javascript异步编程 高清晰PDF
JavScript完全自学手册 书本源码
javscript IE 性能 调试 IE的调试工具 ,sIEve-0.0.8 JSLint, The JavaScript Code Quality Tool IEDevToolBarSetup
精通Javscript+jQuery 精通Javscript+jQuery
获取Javascript函数名称 获取Javscript执行函数名称的方法
JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个...
javascript实现编写网页版计算器 本篇主要记录的是利用javscript实现一个网页计算器的效果,供大家参考,具体内容如下 话不多说,代码如下: 首先是html的代码: <!DOCTYPE ...
本书通过对JavaScript语言的分析,甄别出好的和坏的特性,从而提取出相对这门语言的整体而言具有更好的可靠性、可读性和可维护性的JavaScript的子集,以便你能用它创建真正可扩展的和高效的代码。 雅虎资深...
JavaScript 使用ActiveX实现在Excel文件中插入图片
Javscript调用后台方法(示例) Javscript调用后台方法(示例)
还原了一些植物大战僵尸的一些基本关卡,通过js来实现的页面动
photoshop-javscript-脚本指南2019
JavaScript学习资料全面整理
有JS做的一款吃豆游戏 界面非常的完美
Javscript计算器 Javscript计算器(使用html,css,javascript创建和设计)
NULL 博文链接:https://zhengjun147.iteye.com/blog/1168902
现代 javscript 编程
精通Javscript+jQuery.pdf 精通Javscript+jQuery.pdf 精通Javscript+jQuery.pdf
Javscript & TypeScript学习总结