JS类的封装及实现代码


Posted in Javascript onDecember 02, 2009

1. 定义js类
js并不是一种面向对向的语言, 没有提供对类的支持, 因此我们不能像在传统的语言里那样 用class来定义类, 但我们可以利用js的闭包封装机制来实现js类, 我们来封装一个简的Shape类.

function ShapeBase() { 
this.show = function() 
{ 
alert("ShapeBase show"); 
}; 
this.init = function(){ 
alert("ShapeBase init"); 
}; 
}

这个类里定义了两个方法:show和init, 需要注意的是这里用到了this来声明, 而不是var, 因为用var是用来定义私有方法的.
另外, 我们还可以用prototype属性来定义Shape的方法.
ShapeBase.prototype.show=function() 
{ 
alert("ShapeBase show"); 
} 
ShapeBase.prototype.init=function() 
{ 
alert("ShapeBase init"); 
}

上面这种写法看起来不太直观,我们可以将所有的方法写在一起.
ShapeBase.prototype={ 
show:function() 
{ 
alert("ShapeBase show"); 
}, 
init:function() { 
alert("ShapeBase init"); 
} 
};

现在, 类是写好了, 让我们写个js来测试下, 看看结果是不是跟我们想象的一样呢?
function test(src){ 
var s=new ShapeBase(); 
s.init(); 
s.show(); 
}

看到了吧, 其调用方式和C#一模一样, 而结果也如我们所料.
到目前为止, 我们学会了如何创建js的类了, 但还只是实例方法,要是实现跟C#中的静态方法要怎么做呢?
其实, 实现js的静态方法很简单, 看下面如何实现:
//静态方法 
ShapeBase.StaticDraw = function() 
{ 
alert("method draw is static"); 
}

2. 实现JS类抽象和继承
同样, js中也不支持类继承机制,但我们可以通过将父类prototype中的成员方法复制到子类的prototype中来实现.
和类的继承一样,JavaScript也没有任何机制用于支持抽象类.但利用JavaScript语言本身的性质.可以实现自己的抽象类.
首先来看看js中的虚方法, 在传统语言中虚方法是要先定义的, 而包含虚方法的类就是抽象类,不能被实例化,而在JavaScript中,虚方法就可以看作该类中没有定义的方法,但已经通过this指针使用了.
和传统面向对象不同的是,这里虚方法不需经过声明,而直接使用了, 并且类也可以被实例化.
先定义object的extend方法, 一个为静态方法,一个为实例方法, 这两个方法用于实现继承的prototype复制
Object.extend = function(destination, source) { 
for (property in source) { 
destination[property] = source[property]; 
} 
return destination; 
} 
Object.prototype.extend = function(object) { 
return Object.extend.apply(this, [this, object]); 
}

接下来我们实现一个继承类Rect, 这里先用一种简单的方法来实现。
function Rect() { 
} 
Rect.prototype = ShapeBase.prototype; //只这一句就行了 
//扩充新的方法 
Rect.prototype.add=function() { 
alert("Rect add"); 
}

这种方法不能用于重写,如果改变了show方法, ShapeBase的show也会指向同一函数可能是由于prototype赋值只是简单的改变指向地址.
如果上面也定义了:
Rect.prototype.show=function() {
alert("Rect show");
}
那么执行结果如下:
function test(){
var s=new ShapeBase();
s.show(); //结果:Rect show
var r=new Rect();
r.show(); //结果:Rect show
r.add();
}
我们再使用object.extend实现继承, 并实现一个oninit虚方法, 修改ShapeBase如下:
ShapeBase.prototype={ 
show:function() 
{ 
alert("ShapeBase show"); 
}, 
initialize:function () { 
this.oninit(); 
} 
};

实现Rect类继承.
Rect.prototype=(new ShapeBase).extend({ 
//添加新的方法 
add:function() { 
alert("Rect add"); 
}, 
//使用这种方法可以重写show方法 
show:function() { 
alert("Rect show"); 
}, 
//实现虚方法 
oninit:function() { 
alert("Rect oninit"); 
} 
})

现在我们的类写好了, 测试下看看:
function test(src){ 
ShapeBase.StaticDraw(); 
var s=new ShapeBase(); 
s.show(); //alert("ShapeBase show") 
var r=new Rect(); 
r.show(); //alert("Rect show") 
r.add(); 
r.initialize(); //alert("Rect oninit") 
}

另外,在网上看到一篇用专门的对象来创建类,代码如下:
// 
//对象属性复制方法,很多库都有实现,如PrototypeJS里面的extend和Ext里面的Ext.apply 
// 
function extend(des, src) { 
if (!des) 
des = {}; 
if (src) { 
for (var i in src) { 
des[i] = src[i]; 
} 
} 
return des; 
} 
var CC = {}; //全局变量 
// 
//create 用于创建类 
// 
CC.create = function(superclass, constructor){ 
var clazz = (function() { 
this.initialize.apply(this, arguments); 
}); 
//如果无参数,直接返回类. 
if(arguments.length == 0) 
return clazz; 
//如果无父类,此时constructor应该为一个纯对象,直接复制属性返回. 
if(!superclass){ 
extend(clazz.prototype, constructor); 
return clazz; 
} 
var absObj = clazz.prototype, 
sprPropty = superclass.prototype; 
if(sprPropty){ 
//用于访问父类方法 
clazz.superclass = sprPropty; 
extend(absObj, sprPropty); 
//调用属性构造函数创建属性,这个是实现关键. 
extend(absObj, constructor(sprPropty)); 
// 子类实例直接通过obj.superclass访问父类属性, 
// 如果不想造成过多引用,也可把这句注释掉,因为多数时候是没必要的. 
absObj.superclass = sprPropty; 
// 
clazz.constructor = constructor; 
} 
return clazz; 
} 
// 
//创建一个动物类 
// 
var Animal = CC.create(null, { 
//属性 
footprint : '- - - - - - =', 
//类初始化方法,必须的,当用 new 生成一个类时该方法自动被调用,参见上定义. 
initialize : function(options){ 
extend(this, options); 
alert('Animal initialize method is called.'); 
}, 
eat : function(){ 
alert('Animal eat method is called.'); 
}, 
move : function(){ 
alert('I am moving like this '+ this.footprint +' .'); 
} 
}); 
// 
//创建一个Duke类 
// 
var Duke = CC.create(Animal, function(superclass){ 
//在这可以定义一些类全局静态数据,该类每个实例都共享这些数据. 
//计算实例个类,包括派生类实例. 
var static_instance_counter = 0; 
function classUtilityFuncHere(){ } 
//返回类具体属性. 
return { 
//重写初始化方法 
//@override 
initialize : function(options) { 
alert('Initializing Duke class..'); 
//调用父类初始化,这种方法比一般其它库的要简洁点吧,可以不管父类是什么. 
superclass.initialize.call(this, options); 
//做一些子类喜欢做的事. 
alert('Duke initialize method is called.'); 
//读取或修改类静态属性 
static_instance_counter++; 
}, 
//重写move方法,增加Duke自己的移动方式. 
move : function(){ 
this.footprint = this.footprint + 'zzzzzzzz'; 
superclass.move.call(this); 
}, 
//重写eat方法,注意,里面不调用父类方法,即父类eat被覆盖了. 
eat : function(){ 
alert('Duke is eating..'); 
}, 
//新增一个say方法,显示当前已经初始化的Duke类实例数量. 
say : function(){ 
alert('the number of Duke instances is '+static_instance_counter); 
} 
}; 
}); 
var DukeChild = CC.create(Duke, function(superclass){ 
return { 
move : function(){ 
this.footprint = this.footprint + '++++++++++++='; 
superclass.move.call(this); 
}, 
say : function(){ 
alert(this.msg || ''); 
} 
}; 
}); 
(function test() { 
var animal = new Animal(); 
animal.eat(); 
animal.move(); 
var dukeA = new Duke(); 
dukeA.eat(); 
dukeA.move(); 
dukeA.say(); 
var dukeB = new Duke(); 
dukeB.eat(); 
dukeB.move(); 
dukeB.say(); 
var dukeC = new DukeChild({msg : 'I am a child of duke.'}); 
dukeC.move(); 
dukeC.say(); 
})();
Javascript 相关文章推荐
JavaScript中两个感叹号的作用说明
Dec 28 Javascript
JS控制日期显示的小例子
Nov 23 Javascript
js对象继承之原型链继承实例
Jan 10 Javascript
javascript实现捕捉键盘上按下的键
May 05 Javascript
javascript基于DOM实现省市级联下拉框的方法
May 14 Javascript
jQuery实现滚动切换的tab选项卡效果代码
Aug 26 Javascript
分享两段简单的JS代码防止SQL注入
Apr 12 Javascript
微信小程序 使用picker封装省市区三级联动实例代码
Oct 28 Javascript
vue环境搭建简单教程
Nov 07 Javascript
使用D3.js创建物流地图的示例代码
Jan 27 Javascript
jquery实现上传图片功能
Jun 29 jQuery
微信小程序tab左右滑动切换功能的实现代码
Feb 08 Javascript
Jquery选择器 $实现原理
Dec 02 #Javascript
js 表格隔行颜色
Dec 02 #Javascript
让FireFox支持innerText的实现代码
Dec 01 #Javascript
JavaScript 直接操作本地文件的实现代码
Dec 01 #Javascript
js 变量类型转换常用函数与代码[比较全]
Dec 01 #Javascript
Jquery 快速构建可拖曳的购物车DragDrop
Nov 30 #Javascript
JavaScript 学习笔记 Black.Caffeine 09.11.28
Nov 30 #Javascript
You might like
php实现信用卡校验位算法THE LUHN MOD-10示例
2014/05/07 PHP
Jsonp 跨域的原理以及Jquery的解决方案
2010/05/18 Javascript
jquery控制背景音乐开关与自动播放提示音的方法
2015/02/06 Javascript
使用jQuery mobile库检测url绝对地址和相对地址的方法
2015/12/04 Javascript
jQuery stop()用法实例详解
2016/07/28 Javascript
vue插件tab选项卡使用小结
2016/10/27 Javascript
详解Vue2 无限级分类(添加,删除,修改)
2017/03/07 Javascript
AngularJS基于http请求实现下载php生成的excel文件功能示例
2018/01/23 Javascript
vue全局组件与局部组件使用方法详解
2018/03/29 Javascript
vue addRoutes实现动态权限路由菜单的示例
2018/05/15 Javascript
JavaScript的Proxy可以做哪些有意思的事儿
2019/06/15 Javascript
jquery实现图片无缝滚动 蒙版遮蔽效果
2020/01/11 jQuery
Vue引入Stylus知识点总结
2020/01/16 Javascript
Python使用cx_Oracle调用Oracle存储过程的方法示例
2017/10/07 Python
python字符串的方法与操作大全
2018/01/30 Python
python 判断参数为Nonetype类型或空的实例
2018/10/30 Python
Python基于scipy实现信号滤波功能
2019/05/08 Python
python bluetooth蓝牙信息获取蓝牙设备类型的方法
2019/11/29 Python
TensorFlow实现从txt文件读取数据
2020/02/05 Python
tensorflow生成多个tfrecord文件实例
2020/02/17 Python
Python用户自定义异常的实现
2020/12/25 Python
澳大利亚潮流尖端的快时尚品牌:Cotton On
2016/09/26 全球购物
电子狗项圈:eDog Australia
2019/12/04 全球购物
北京SQL新华信咨询
2016/09/30 面试题
教师档案管理制度
2014/01/23 职场文书
高等教育学自荐书范文
2014/02/10 职场文书
《美丽的田园》教学反思
2014/03/01 职场文书
安全口号大全
2014/06/21 职场文书
个人先进事迹材料范文
2014/12/29 职场文书
销售业务员岗位职责
2015/02/13 职场文书
三八妇女节慰问信
2015/02/14 职场文书
2015年幼儿园德育工作总结
2015/05/25 职场文书
护理自荐信
2019/05/14 职场文书
Python自然语言处理之切分算法详解
2021/04/25 Python
pytorch常用数据类型所占字节数对照表一览
2021/05/17 Python
教你快速构建一个基于nginx的web集群项目
2021/11/27 Servers