JS类的封装及实现代码

2013-11-29  来源:本站原创  分类:js面向对象  人气:1 

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

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();
})();
相关文章
  • JS类的封装及实现代码 2013-11-29

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

  • 利用thrift实现js与C#通讯的实例代码 2013-12-29

    利用thrift实现js与C#通讯的实例代码,需要的朋友可以参考一下 1.为什么要用thrift js C#? 1.1 首先,js 通过 thrift 访问C#,实际上是一种c/s模式.thrift是通信工具,js是客户端,C#是服务端. 1.2 使用js直接与thrift server通信.让web开发变得更简单.如果使用Web Service,你需要自己去实现C/S两端的序列化与反序列化操作,还需要自行处理异常,降低了开发效率.而thrift则会自动生成两端的操作类,你只需要处理方法内部的逻

  • js类中的公有变量和私有变量 2013-11-08

    实例分析js类中的公有和私有变量 在cnblogs上看了关于js的一些文章 ,做下笔记: 先看代码1: function car(){ var wheel = 3;//私有变量 this.wheel = 4;//公有变量 alert(wheel); alert(this.wheel); } var car1 = new car();结果是:3 4 代码2: function car(){ var wheel = 3;//私有变量 this.wheel = 4;//公有变量 } var car1

  • 自动完成JS类(纯JS, Ajax模式) 2013-11-15

    自动完成JS类,用户体验较好.封装成类,方便使用.本站 一. 封装的JS文件 //******************************************************** //创建日期: 2009-03-10 //作 者: oloen //?热菟得? 自动完成JS类 //用法: // var auto = new autoComplete(客户端ID); // auto.Init(document.all.客户端ID); //***********************

  • JS类定义原型方法的两种实现的区别评论很多 2014-01-01

    我们知道,给JavaScript类添加原形(prototype)方法是很简单的.而且常用的有下面这两种方法,可是这两种方法在使用时有区别吗? JScript Class: function JSClass() { } Extends prototype method: 复制代码 代码如下: JSClass.prototype.MethodA = function() { }; Or 复制代码 代码如下: function = JSClass.prototype.MethodA() { }; #

  • 在网页里看flash的trace数据的js类 2014-05-27

    我的js类jdhcn.js中的一个flashDebug方法 功能: flash的调用些方法能在网页中看到flash的trace方法输出的数据; 方法: 1. init(w,h,z);//w为显示界面的宽度, h为显示界面的高, z为层级(最好放在最顶层);<此方法可以省略> 2. trace(str);//要输出的数据; 使用: 1. 把jdhcn.js导入, 点击下载jdhcn.js 2. 在body里可以重写一个函数(也可以不写): 程序代码 <script language=&qu

  • 创建js对象和js类的方法汇总 2014-08-30

    这篇文章主要介绍了2种创建js对象和js类的方法,十分的简单,推荐给大家. 代码很简单,就不多废话了. //第一种定义方式 var person=new Object(); //创建了一个对象. person.name="tom"; //使用person对象对调用name属性,它的值为tom alert(person.name); //显示name属性值 person.say=function(){ //对person对象添加了一个say函数. alert("person s

  • js类式继承的具体实现方法 2014-12-06

    这篇文章主要介绍了js类式继承的具体实现方法,有需要的朋友可以参考一下 在开始摆弄代码之前,应该搞清楚使用继承的目的和能带来什么好处.一般来说,在设计类的时候,我们希望能减少重复性的代码,并且尽量弱化类之间的耦合.而要做到这两者都兼顾是很难的,我们需要根据具体的条件和环境下决定我们应该采取什么方法.根据我们对面向对象语言中继承的了解,继承会带类直接的强耦合,但js由于其特有的灵活性,可以设计出强耦合和弱耦合,高效率和低效率的代码.而具体用什么,看情况. 下面提供js实现继承的三种方法:类式继承,

  • C++动态数组类的封装实例 2015-04-04

    这篇文章主要介绍了C++动态数组类的封装,很重要的概念,需要的朋友可以参考下 C++中的动态数组(Dynamic Array)是指动态分配的.可以根据需求动态增长占用内存的数组.为了实现一个动态数组类的封装,我们需要考虑几个问题:new/delete的使用.内存分配策略.类的四大函数(构造函数.拷贝构造函数.拷贝赋值运算符.析构函数).运算符的重载.涉及到的知识点很多,对此本文只做简单的介绍. 一.内存分配策略 当用new为一个动态数组申请一块内存时,数组中的元素是连续存储的,例如 vector

  • js 页面左右两侧居中广告代码 2013-11-03

    js 页面左右两侧居中广告代码,里面的代码还不错 无标题文档 x x [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • js中switch case循环实例代码 2013-11-12

    这篇文章主要介绍了js中switch case循环实例代码,有需要的朋友可以参考一下 switch (objNameType) { case 'PD': valueUD = obj.id; id = objName; var loadVUD = UserData.load(exam, id); if (loadVUD == null || loadVUD == undefined || loadVUD == '') { var tmpTGId = obj.id.substr(0, obj.id.

  • js实现收缩菜单效果实例代码 2013-11-17

    这篇文章介绍了js实现收缩菜单效果实例代码,有需要的朋友可以参考一下 废话不多说,直接上代码: 有注释 <head> <title></title> <style type="text/css"> div { border: 1px solid black; width: 100px; } ul .tit, .content { list-style-type: none; } .menu { padding: 0px; margin:

  • JS判断不能为空实例代码 2013-12-30

    这篇文章主要介绍了JS判断不能为空实例代码,有需要的朋友可以参考一下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta ht

  • js substr支持中文截取函数代码(中文是双字节) 2014-01-02

    js substr支持中文截取函数代码,中文是双字节,配有实例需要的朋友可以参考下 <script language="JavaScript"> //得到字符总数 function getChars(str) { var i = 0; var c = 0.0; var unicode = 0; var len = 0; if (str == null || str == "") { return 0; } len = str.length; for(i

  • JS弹出对话框返回值代码(asp.net后台) 2014-02-12

    JS弹出对话框返回值代码,需要的朋友可以参考下. 1.Default.aspx页面 <script type="text/javascript"> function GetUser(TxtEmpID,TxtEmpName,url) { var properties = 'status:no;resizable:no;toolbar=no;menubar=no;location=no;scroll:no;dialogWidth:540px;dialogHeight:450px

  • 表单JS弹出填写提示效果代码 2014-02-22

    表单JS弹出填写提示效果代码,需要的朋友可以参考下. HTML <form id="form1" runat="server"> <div> <div style="margin-top:100px"> <asp:TextBox ID="TextBox1" runat="server" HintTitle="增加的内容信息标题" HintInfo

  • DIV+CSS+JS不间断横向滚动实现代码 2014-02-22

    不间断横向滚动想必大家在很多场合都有见过吧,本文也使用DIV+CSS+JS实现一个,感兴趣的你可以参考下哈,希望对你学习有所帮助 DIV+CSS+JS实现不间断横向滚动代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>横向不间断滚动DIV

  • JS实现切换标签页效果实例代码 2014-02-27

    这篇文章介绍了JS实现切换标签页效果实例代码,有需要的朋友可以参考一下 在网页<head>区添加以下代码 <style type="text/css"> <!-- BODY { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 12px; PADDING-BOTTOM: 0px; MARGIN: 0px auto; COLOR: black; LINE-HEIGHT: 150%; PADDING-TOP:

  • 一个js控制的导航菜单实例代码 2014-03-06

    这篇文章主要是对js控制的导航菜单实例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 这种菜单效果是通过脚本和样式控制的,对于新手来说是非常好的学习内容: 这种昨晚一边看舞动奇迹,一边整理这个菜单的小代码,一起来看看吧,会了可以温故知新,不会的可以借鉴一下思想,其实就是想完善一下这种前端的思想,让它不要再陌生: 这是一个asp.net的master页面里面的菜单部分 Html部分: <%@ Master Language="C#" AutoEventWireup=&

  • js 常用正则表达式表单验证代码 2014-03-17

    js 常用正则表达式表单验证代码,以后大家就可以直接使用了. 正则表达式使用详解 简介 简单的说,正则表达式是一种可以用于模式匹配和替换的强有力的工具.其作用如下: 测试字符串的某个模式.例如,可以对一个输入字符串进行测试,看在该字符串是否存在一个电话号码模式或一个信用卡号码模式.这称为数据有效性验证. 替换文本.可以在文档中使用一个正则表达式来标识特定文字,然后可以全部将其删除,或者替换为别的文字. 根据模式匹配从字符串中提取一个子字符串.可以用来在文本或输入字段中查找特定文字. 基本语法 在