常用的js封装函数的方法

『壹』 什么是javascript封装，封装的方法有几种

js虽然是一个面向对象的语言，但是不是典型的面向对象语言。Java/C++的面向对象是object - class的关系，而JS是object - object的关系，中间通过原型prototype连接，父类和子类形成一条原型链。本文通过分析JS的对象的封装，再探讨正确实现继承的方式，然后讨论几个问题，最后再对ES6新引入的类class关键字作一个简单的说明。

JS的类其实是一个函数function，由于不是典型的OOP的类，因此也叫伪类。理解JS的类，需要对JS里的function有一个比较好的认识。首先，function本身就是一个object，可以当作函数的参数，也可以当作返回值，跟普通的object无异。然后function可以当作一个类来使用，例如要实现一个String类

从输出的结果来看，新的class还是没有实现属性私有的功能，见第27行。并且从第26行看出，所谓的class其实就是编译器帮我们实现了上面复杂的过程，其本质是一样的，但是让代码变得更加简化明了。一个不同点是，多了static关键字，直接用类名调用类的函数。ES6的支持度还不高，最新的chrome和safari已经支持class，firefox的支持性还不太好。

最后，虽然一般的网页的JS很多都是小工程，看似不需要封装、继承这些技术，但是如果如果能够用面向对象的思想编写代码，不管工程大小，只要应用得当，甚至结合一些设计模式的思想，会让代码的可维护性和扩展性更高。所以平时可以尝试着这样写。

『贰』 js代码如何封装

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

代码如下:

functionShapeBase(){
this.show=function(){
alert("ShapeBaseshow");
};
this.init=function(){
alert("ShapeBaseinit");
};
}

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

代码如下:

ShapeBase.prototype.show=function()
{
alert("ShapeBaseshow");
}
ShapeBase.prototype.init=function()
{
alert("ShapeBaseinit");
}

上面这种写法看起来不太直观，我们可以将所有的方法写在一起.

代码如下:

ShapeBase.prototype={
show:function(){
alert("ShapeBaseshow");
},
init:function(){
alert("ShapeBaseinit");
}
};

现在, 类是写好了， 让我们写个js来测试下, 看看结果是不是跟我们想象的一样呢?

代码如下:

functiontest(src){
vars=newShapeBase();
s.init();
s.show();
}

看到了吧, 其调用方式和C#一模一样, 而结果也如我们所料.
到目前为止, 我们学会了如何创建js的类了, 但还只是实例方法，要是实现跟C#中的静态方法要怎么做呢？
其实, 实现js的静态方法很简单, 看下面如何实现:

代码如下:

//静态方法
ShapeBase.StaticDraw=function()
{
alert("methoddrawisstatic");
}

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

代码如下:

Object.extend=function(destination,source){
for(propertyinsource){
destination[property]=source[property];
}
returndestination;
}
Object.prototype.extend=function(object){
returnObject.extend.apply(this,[this,object]);
}

接下来我们实现一个继承类Rect, 这里先用一种简单的方法来实现。

代码如下:

functionRect(){}
Rect.prototype=ShapeBase.prototype;//只这一句就行了
//扩充新的方法
Rect.prototype.add=function(){
alert("Rectadd");
}

这种方法不能用于重写,如果改变了show方法, ShapeBase的show也会指向同一函数可能是由于prototype赋值只是简单的改变指向地址.
如果上面也定义了:

Rect.prototype.show=function(){
alert("Rectshow");
}

那么执行结果如下:

functiontest(){
vars=newShapeBase();
s.show();//结果:Rectshow
varr=newRect();
r.show();//结果:Rectshow
r.add();
}

我们再使用object.extend实现继承, 并实现一个oninit虚方法, 修改ShapeBase如下:

代码如下:

ShapeBase.prototype={
show:function()
{
alert("ShapeBaseshow");
},
initialize:function(){
this.oninit();
}
};

实现Rect类继承.

代码如下:

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