JS類的封裝及實現代碼_js面向對象

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




聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com