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