`
cloklo
  • 浏览: 28128 次
  • 性别: Icon_minigender_1
  • 来自: 襄阳
社区版块
存档分类
最新评论

JS类的封装及实现代码

    博客分类:
  • HTML
 
阅读更多

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"); 
} 
}) 

 另外,在网上看到一篇用专门的对象来创建类,代码如下: 

// 
//对象属性复制方法,很多库都有实现,如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的DLL封装及调用

    总结来说,"JS的DLL封装及调用"是一个高级的开发技巧,它结合了JavaScript的灵活性和.NET Framework的强大功能,旨在提高代码的安全性、重用性和性能。在实际应用中,应根据项目需求和团队技术栈来决定是否采用这种...

    Javascript经典封装代码

    "JavaScript经典封装代码"集合了开发者们在实践中总结出的一些高效、实用的代码片段,旨在提高开发效率,优化代码结构,增强程序的可读性和可维护性。下面,我们将深入探讨这些经典封装代码背后的原理和应用场景。 ...

    新手常用的几个JS封装类

    在JavaScript编程中,封装是面向对象编程的一个重要概念,它有助于提高代码的可...在压缩包文件“常用的js类”中,可能包含了这些功能的具体实现,新手可以通过学习和理解这些代码,进一步提升自己的JavaScript技能。

    用js封装的treeview源代码

    这个“用js封装的treeview源代码”是由名为"baibai"的开发者创建的,我们可以从这个源代码中学到如何利用JavaScript实现这样的功能。 首先,我们要理解TreeView的基本概念。TreeView通常由节点(Nodes)组成,每个...

    一个不错的js封装类

    在这个"一个不错的js封装类"的项目中,开发者将工作中常用的功能整合到了一个名为`Common.js`的文件中,以提高代码的复用性和可维护性。 `Common.js`可能包含了各种实用函数和方法,例如: 1. **类型检查**:...

    Javascript效果封装类(都是国外高手写的)

    JavaScript是一种广泛应用于...它们可以帮助开发者掌握如何使用JavaScript封装功能,提高代码质量,并学习各种前端特效的实现原理。通过深入理解并实践这些示例,可以提升你的前端开发技能,使你在项目中更加游刃有余。

    javascript经典封装,以及实现的图片效果

    在本主题中,“javascript经典封装”指的是将常用的JavaScript功能或方法进行模块化封装,以提高代码的可重用性和可维护性。而“js实现的10个图片效果”则是指利用JavaScript来控制和改变网页中的图像,创造出各种...

    省、市、地区联动选择JS封装类.

    标题中的“省、市、地区联动选择JS封装类”指的是一个JavaScript编程实现的功能,它用于在网页中创建一个联动选择的下拉菜单,通常用于用户输入他们的省份、城市和区域信息。这种联动选择框能够根据用户选择的省份...

    国内外javascript经典封装

    通过学习和运用这些经典的JavaScript封装技术,开发者不仅能提升代码质量,还能跟上技术发展趋势,确保项目在未来的可扩展性和兼容性。同时,理解并熟练掌握封装原则,也是成为一名优秀JavaScript开发者的重要一步。

    封装js工具类

    根据提供的文件信息,我们可以看到这是一个用于封装JavaScript功能的C#类。下面将详细介绍该类中的各个方法及其用途。 ### 封装JS工具类 #### 1. Echo 方法 该方法的功能是向客户端输出指定的消息。 ```csharp ...

    javascript div弹出窗口 可封装为JS类

    在本案例中,"可封装为JS类"意味着开发者创建了一个可复用的JavaScript对象,该对象可以方便地管理和控制这些弹出窗口。 首先,让我们了解`div`元素。在HTML中,`<div>`是“division”(分隔)的缩写,是一个通用的...

    通用不间断滚动JS封装类

    总的来说,这个"通用不间断滚动JS封装类"是一个实用的JavaScript工具,可以帮助开发者轻松地在网页上实现专业级别的滚动效果,同时通过封装提高了代码的可维护性和复用性。通过阅读博文和研究源码,我们可以学习到JS...

    一个用JS封装好的日历代码

    - **特殊日期处理**:如果需要标记特定日期(如节假日),JS代码可以检查日期并添加相应的类或标记。 4. **封装**:为了方便重用,这个日历代码应该封装成一个模块,可以通过引入和调用函数来生成和管理日历。模块...

    加密解密md5的js封装代码

    在JavaScript中实现MD5加密通常依赖于第三方库,如`crypto-js`或自定义代码。例如,这里有一个简单的MD5加密的JS封装代码示例,来自于`md5.js`文件: ```javascript function md5(str) { // 引入MD5算法 const ...

    常用js方法封装

    "常用js方法封装"的主题聚焦于将常见的JavaScript功能整理成可重用的模块,以提高代码的复用性和维护性。"do.1.21.js"文件很可能就是这种封装的实现,使用了JSDuck工具来生成相关的文档,帮助开发者理解和使用这些...

    国内外 JavaScript 经典封装

    1. **面向对象编程(OOP)**:在JavaScript中,面向对象编程主要通过构造函数、原型链和类(ES6引入)来实现。理解如何创建对象、继承和封装是提升代码复用性和可维护性的重要一环。 2. **模块化**:JavaScript的...

    省、市、地区联动选择JS封装类

    这个"省、市、地区联动选择JS封装类"是一个JavaScript实现的组件,旨在简化开发者处理这种联动选择框的工作。下面我们将深入探讨这个组件的核心知识点。 首先,"省、市、地区"三级联动意味着当用户在第一级(省)...

    Javascript浮动广告图片代码,已封装!兼容性强!使用简单!

    文件名`float_ad`可能是封装后的JavaScript文件,其中包含了实现上述功能的代码。使用时,只需在网页中引入这个文件,并根据需要配置广告的初始位置、大小、图片链接等参数,就能轻松实现在网页上的浮动广告展示。 ...

Global site tag (gtag.js) - Google Analytics