js如何封裝

//js並非一種面向對象的語言, 沒有提供對類的支持, 所以咱們不能像在傳統的語言裏那樣 用class來定義類, 

//但咱們能夠利用js的閉包封裝機制來實現js類, 咱們來封裝一個簡的Shape類.

//這個函數中定義了兩個方法：show和init 須要注意的是這裏用到的是this來聲明，而不是var,由於var是用來定義私有方法的

function shapeBase(){

this.show = function(){

alert("shapeBase show");

};

this.init = function(){

alert("shapeBase init")

};

}

// 咱們也能夠用prototype來定義shape方法  prototype能夠理解爲一個類方法（至關於css裏面的一個類）

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#如出一轍 但還只是實例方法 如何實現c#中的靜態方法呢？

//代碼以下；

//靜態方法 

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

    } 

})