JS類(lèi)的封裝及實(shí)現(xiàn)代碼_js面向?qū)ο?/h1>

來(lái)源：懂視網(wǎng) 責(zé)編：小采 時(shí)間：2020-11-27 20:45:57

JS類(lèi)的封裝及實(shí)現(xiàn)代碼_js面向?qū)ο?/h4>

JS類(lèi)的封裝及實(shí)現(xiàn)代碼_js面向?qū)ο?1. 定義js類(lèi) js并不是一種面向?qū)ο虻恼Z(yǔ)言, 沒(méi)有提供對(duì)類(lèi)的支持, 因此我們不能像在傳統(tǒng)的語(yǔ)言里那樣 用class來(lái)定義類(lèi), 但我們可以利用js的閉包封裝機(jī)制來(lái)實(shí)現(xiàn)js類(lèi), 我們來(lái)封裝一個(gè)簡(jiǎn)的Shape類(lèi). 代碼如下: function ShapeBase() { this.

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀JS類(lèi)的封裝及實(shí)現(xiàn)代碼_js面向?qū)ο?1. 定義js類(lèi) js并不是一種面向?qū)ο虻恼Z(yǔ)言, 沒(méi)有提供對(duì)類(lèi)的支持, 因此我們不能像在傳統(tǒng)的語(yǔ)言里那樣 用class來(lái)定義類(lèi), 但我們可以利用js的閉包封裝機(jī)制來(lái)實(shí)現(xiàn)js類(lèi), 我們來(lái)封裝一個(gè)簡(jiǎn)的Shape類(lèi). 代碼如下: function ShapeBase() { this.

1. 定義js類(lèi)
js并不是一種面向?qū)ο虻恼Z(yǔ)言, 沒(méi)有提供對(duì)類(lèi)的支持, 因此我們不能像在傳統(tǒng)的語(yǔ)言里那樣 用class來(lái)定義類(lèi), 但我們可以利用js的閉包封裝機(jī)制來(lái)實(shí)現(xiàn)js類(lèi), 我們來(lái)封裝一個(gè)簡(jiǎn)的Shape類(lèi).
代碼如下:
function ShapeBase() {
this.show = function()
{
alert("ShapeBase show");
};
this.init = function(){
alert("ShapeBase init");
};
}

這個(gè)類(lèi)里定義了兩個(gè)方法:show和init, 需要注意的是這里用到了this來(lái)聲明, 而不是var, 因?yàn)橛胿ar是用來(lái)定義私有方法的.
另外, 我們還可以用prototype屬性來(lái)定義Shape的方法.
代碼如下:
ShapeBase.prototype.show=function()
{
alert("ShapeBase show");
}
ShapeBase.prototype.init=function()
{
alert("ShapeBase init");
}

上面這種寫(xiě)法看起來(lái)不太直觀，我們可以將所有的方法寫(xiě)在一起.
代碼如下:
ShapeBase.prototype={
show:function()
{
alert("ShapeBase show");
},
init:function() {
alert("ShapeBase init");
}
};

現(xiàn)在, 類(lèi)是寫(xiě)好了， 讓我們寫(xiě)個(gè)js來(lái)測(cè)試下, 看看結(jié)果是不是跟我們想象的一樣呢?
代碼如下:
function test(src){
var s=new ShapeBase();
s.init();
s.show();
}

看到了吧, 其調(diào)用方式和C#一模一樣, 而結(jié)果也如我們所料.
到目前為止, 我們學(xué)會(huì)了如何創(chuàng)建js的類(lèi)了, 但還只是實(shí)例方法，要是實(shí)現(xiàn)跟C#中的靜態(tài)方法要怎么做呢？
其實(shí), 實(shí)現(xiàn)js的靜態(tài)方法很簡(jiǎn)單, 看下面如何實(shí)現(xiàn):
代碼如下:
//靜態(tài)方法
ShapeBase.StaticDraw = function()
{
alert("method draw is static");
}

2. 實(shí)現(xiàn)JS類(lèi)抽象和繼承
同樣, js中也不支持類(lèi)繼承機(jī)制，但我們可以通過(guò)將父類(lèi)prototype中的成員方法復(fù)制到子類(lèi)的prototype中來(lái)實(shí)現(xiàn).
和類(lèi)的繼承一樣,JavaScript也沒(méi)有任何機(jī)制用于支持抽象類(lèi).但利用JavaScript語(yǔ)言本身的性質(zhì).可以實(shí)現(xiàn)自己的抽象類(lèi).
首先來(lái)看看js中的虛方法, 在傳統(tǒng)語(yǔ)言中虛方法是要先定義的, 而包含虛方法的類(lèi)就是抽象類(lèi),不能被實(shí)例化,而在JavaScript中，虛方法就可以看作該類(lèi)中沒(méi)有定義的方法，但已經(jīng)通過(guò)this指針使用了.
和傳統(tǒng)面向?qū)ο蟛煌氖?，這里虛方法不需經(jīng)過(guò)聲明，而直接使用了, 并且類(lèi)也可以被實(shí)例化.
先定義object的extend方法, 一個(gè)為靜態(tài)方法，一個(gè)為實(shí)例方法, 這兩個(gè)方法用于實(shí)現(xiàn)繼承的prototype復(fù)制
代碼如下:
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]);
}

接下來(lái)我們實(shí)現(xiàn)一個(gè)繼承類(lèi)Rect, 這里先用一種簡(jiǎn)單的方法來(lái)實(shí)現(xiàn)。
代碼如下:
function Rect() {
}
Rect.prototype = ShapeBase.prototype; //只這一句就行了
//擴(kuò)充新的方法
Rect.prototype.add=function() {
alert("Rect add");
}

這種方法不能用于重寫(xiě),如果改變了show方法, ShapeBase的show也會(huì)指向同一函數(shù)可能是由于prototype賦值只是簡(jiǎn)單的改變指向地址.
如果上面也定義了:
Rect.prototype.show=function() {
alert("Rect show");
}
那么執(zhí)行結(jié)果如下:
function test(){
var s=new ShapeBase();
s.show(); //結(jié)果:Rect show
var r=new Rect();
r.show(); //結(jié)果:Rect show
r.add();
}
我們?cè)偈褂胦bject.extend實(shí)現(xiàn)繼承, 并實(shí)現(xiàn)一個(gè)oninit虛方法, 修改ShapeBase如下:
代碼如下:
ShapeBase.prototype={
show:function()
{
alert("ShapeBase show");
},
initialize:function () {
this.oninit();
}
};

實(shí)現(xiàn)Rect類(lèi)繼承.
代碼如下:
Rect.prototype=(new ShapeBase).extend({
//添加新的方法
add:function() {
alert("Rect add");
},
//使用這種方法可以重寫(xiě)show方法
show:function() {
alert("Rect show");
},
//實(shí)現(xiàn)虛方法
oninit:function() {
alert("Rect oninit");
}
})

現(xiàn)在我們的類(lèi)寫(xiě)好了， 測(cè)試下看看:
代碼如下:
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")
}

另外,在網(wǎng)上看到一篇用專(zhuān)門(mén)的對(duì)象來(lái)創(chuàng)建類(lèi)，代碼如下:

 代碼如下: 
// 
//對(duì)象屬性復(fù)制方法,很多庫(kù)都有實(shí)現(xiàn),如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 用于創(chuàng)建類(lèi) 
// 
CC.create = function(superclass, constructor){ 
var clazz = (function() { 
this.initialize.apply(this, arguments); 
}); 
//如果無(wú)參數(shù),直接返回類(lèi). 
if(arguments.length == 0) 
return clazz; 
//如果無(wú)父類(lèi),此時(shí)constructor應(yīng)該為一個(gè)純對(duì)象,直接復(fù)制屬性返回. 
if(!superclass){ 
extend(clazz.prototype, constructor); 
return clazz; 
} 
var absObj = clazz.prototype, 
sprPropty = superclass.prototype; 
if(sprPropty){ 
//用于訪問(wèn)父類(lèi)方法 
clazz.superclass = sprPropty; 
extend(absObj, sprPropty); 
//調(diào)用屬性構(gòu)造函數(shù)創(chuàng)建屬性,這個(gè)是實(shí)現(xiàn)關(guān)鍵. 
extend(absObj, constructor(sprPropty)); 
// 子類(lèi)實(shí)例直接通過(guò)obj.superclass訪問(wèn)父類(lèi)屬性, 
// 如果不想造成過(guò)多引用,也可把這句注釋掉,因?yàn)槎鄶?shù)時(shí)候是沒(méi)必要的. 
absObj.superclass = sprPropty; 
// 
clazz.constructor = constructor; 
} 
return clazz; 
} 
// 
//創(chuàng)建一個(gè)動(dòng)物類(lèi) 
// 
var Animal = CC.create(null, { 
//屬性 
footprint : '- - - - - - =', 
//類(lèi)初始化方法,必須的,當(dāng)用 new 生成一個(gè)類(lèi)時(shí)該方法自動(dòng)被調(diào)用,參見(jiàn)上定義. 
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 +' .'); 
} 
}); 
// 
//創(chuàng)建一個(gè)Duke類(lèi) 
// 
var Duke = CC.create(Animal, function(superclass){ 
//在這可以定義一些類(lèi)全局靜態(tài)數(shù)據(jù),該類(lèi)每個(gè)實(shí)例都共享這些數(shù)據(jù). 
//計(jì)算實(shí)例個(gè)類(lèi),包括派生類(lèi)實(shí)例. 
var static_instance_counter = 0; 
function classUtilityFuncHere(){ } 
//返回類(lèi)具體屬性. 
return { 
//重寫(xiě)初始化方法 
//@override 
initialize : function(options) { 
alert('Initializing Duke class..'); 
//調(diào)用父類(lèi)初始化,這種方法比一般其它庫(kù)的要簡(jiǎn)潔點(diǎn)吧,可以不管父類(lèi)是什么. 
superclass.initialize.call(this, options); 
//做一些子類(lèi)喜歡做的事. 
alert('Duke initialize method is called.'); 
//讀取或修改類(lèi)靜態(tài)屬性 
static_instance_counter++; 
}, 
//重寫(xiě)move方法,增加Duke自己的移動(dòng)方式. 
move : function(){ 
this.footprint = this.footprint + 'zzzzzzzz'; 
superclass.move.call(this); 
}, 
//重寫(xiě)eat方法,注意,里面不調(diào)用父類(lèi)方法,即父類(lèi)eat被覆蓋了. 
eat : function(){ 
alert('Duke is eating..'); 
}, 
//新增一個(gè)say方法,顯示當(dāng)前已經(jīng)初始化的Duke類(lèi)實(shí)例數(shù)量. 
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(); 
})(); 
 




聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

JS類(lèi)的封裝及實(shí)現(xiàn)代碼_js面向?qū)ο?/h4>

JS類(lèi)的封裝及實(shí)現(xiàn)代碼_js面向?qū)ο?1. 定義js類(lèi) js并不是一種面向?qū)ο虻恼Z(yǔ)言, 沒(méi)有提供對(duì)類(lèi)的支持, 因此我們不能像在傳統(tǒng)的語(yǔ)言里那樣 用class來(lái)定義類(lèi), 但我們可以利用js的閉包封裝機(jī)制來(lái)實(shí)現(xiàn)js類(lèi), 我們來(lái)封裝一個(gè)簡(jiǎn)的Shape類(lèi). 代碼如下: function ShapeBase() { this.

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

標(biāo)簽： js 封裝 對(duì)象

• 熱門(mén)焦點(diǎn)