本文實(shí)例講述了javascript定義類和類的實(shí)現(xiàn)。分享給大家供大家參考，具體如下：

最近在幾個(gè)群上經(jīng)?？吹接腥藛?wèn)在一個(gè)類里的一個(gè) function 怎么調(diào)用 this. 定義后公開的方法。現(xiàn)發(fā)一篇類實(shí)現(xiàn)的隨筆。

首先說(shuō)說(shuō)類，在一個(gè)類里我們會(huì)有以下的幾個(gè)特征：

1. 公有方法
2. 私有方法
3. 屬性
4. 私有變量
5. 析構(gòu)函數(shù)

我們直接看一個(gè)例子：

/***定義類***/
var Class = function(){
  var _self = this;//把本身引用負(fù)值到一變量上
  var _Field = "Test Field"; //私有字段
  var privateMethod = function(){ //私有方法
    alert(_self.Property); //調(diào)用屬性
  }
  this.Property = "Test Property"; //公有屬性
  this.Method = function(){ //公有方法
    alert(_Field); //調(diào)用私用字段
    privateMethod(); //調(diào)用私用方法
  }
}

這里我已把注釋都寫上，大家大概也會(huì)一眼就看得明白。對(duì)于少寫JS的朋友，可能會(huì)覺(jué)得奇怪為什么我會(huì)定義一個(gè)_self的變量, 因?yàn)樵趈s里，this不用對(duì)于其他的對(duì)象語(yǔ)言，他的解析過(guò)程與運(yùn)行過(guò)程中this會(huì)改變的。這里簡(jiǎn)單說(shuō)說(shuō)js里this的定義，若有需要我可以開多一篇。

定義：this是包含它的函數(shù)作為方法被調(diào)用時(shí)所屬的對(duì)象。
特征：this的環(huán)境可以隨著函數(shù)被賦值給不同的對(duì)象而改變！

有興趣的朋友可以網(wǎng)上找找資料了解一下，說(shuō)回正題，這里的_self目的是為了開多一個(gè)私有的變量，把引用直接指向類的本身。

剛剛還說(shuō)到一個(gè)析構(gòu)函數(shù)的問(wèn)題，這可以直接用代碼來(lái)實(shí)現(xiàn)。在函數(shù)的最后直接寫執(zhí)行代碼就OK。

/***定義類***/
var Class = function(){
  var _self = this;//把本身引用負(fù)值到一變量上
  var _Field = "Test Field"; //私有字段
  var privateMethod = function(){ //私有方法
    alert(_self.Property); //調(diào)用屬性
  }
  this.Property = "Test Property"; //公有屬性
  this.Method = function(){ //公有方法
    alert(_Field); //調(diào)用私用字段
    privateMethod(); //調(diào)用私用方法
  }
  /***析構(gòu)函數(shù)***/
  var init = function(){
    privateMethod();
  }
  init();
}

使用這個(gè)類

var c = new Class();
c.Method(); //使用方法

這樣就OK了

Javascript本身并不支持面向?qū)ο?，它沒(méi)有訪問(wèn)控制符，它沒(méi)有定義類的關(guān)鍵字class，它沒(méi)有支持繼承的extend或冒號(hào)，它也沒(méi)有用來(lái)支持虛函數(shù)的virtual，不過(guò)，Javascript是一門靈活的語(yǔ)言，下面我們就看看沒(méi)有關(guān)鍵字class的Javascript如何實(shí)現(xiàn)類定義，并創(chuàng)建對(duì)象。

一：定義類并創(chuàng)建類的實(shí)例對(duì)象

在Javascript中，我們用function來(lái)定義類，如下：

function Shape()
{
var x=1;
var y=2;
}

你或許會(huì)說(shuō)，疑？這個(gè)不是定義函數(shù)嗎？沒(méi)錯(cuò)，這個(gè)是定義函數(shù)，我們定義了一個(gè)Shape函數(shù)，并對(duì)x和y進(jìn)行了初始化。不過(guò)，如果你換個(gè)角度來(lái)看，這個(gè)就是定義一個(gè)Shape類，里面有兩個(gè)屬性x和y，初始值分別是1和2，只不過(guò)，我們定義類的關(guān)鍵字是function而不是class。

然后，我們可以創(chuàng)建Shape類的對(duì)象aShape，如下：

我們已經(jīng)創(chuàng)建了aShape對(duì)象，但是，當(dāng)我們?cè)囍L問(wèn)它的屬性時(shí)，會(huì)出錯(cuò)，如下：

function Shape()
{
this.x=1;
this.y=2;
}

這樣，我們就可以訪問(wèn)Shape的屬性了，如。

三：定義公有方法和私有方法

在Javascript中，函數(shù)是Function類的實(shí)例，F(xiàn)unction間接繼承自O(shè)bject，所以，函數(shù)也是一個(gè)對(duì)象，因此，我們可以用賦值的方法創(chuàng)建函數(shù)，當(dāng)然，我們也可以將一個(gè)函數(shù)賦給類的一個(gè)屬性變量，那么，這個(gè)屬性變量就可以稱為方法，因?yàn)樗且粋€(gè)可以執(zhí)行的函數(shù)。代碼如下：

function Shape()
{
var x=0;
var y=1;
this.draw=function()
{
//print;
};
}

我們?cè)谏厦娴拇a中定義了一個(gè)draw，并把一個(gè)function賦給它，下面，我們就可以通過(guò)aShape調(diào)用這個(gè)函數(shù)，OOP中稱為公有方法，如：

function Shape()
{
var x=0;
var y=1;
var draw=function()
{
//print;
};
}

這樣就不能使用aShape.draw調(diào)用這個(gè)函數(shù)了。

三：構(gòu)造函數(shù)

Javascript并不支持OOP，當(dāng)然也就沒(méi)有構(gòu)造函數(shù)了，不過(guò)，我們可以自己模擬一個(gè)構(gòu)造函數(shù)，讓對(duì)象被創(chuàng)建時(shí)自動(dòng)調(diào)用，代碼如下：

function Shape()
{
var init = function()
{
//構(gòu)造函數(shù)代碼
};
init();
}

在Shape的最后，我們?nèi)藶榈恼{(diào)用了init函數(shù)，那么，在創(chuàng)建了一個(gè)Shape對(duì)象是，init總會(huì)被自動(dòng)調(diào)用，可以模擬我們的構(gòu)造函數(shù)了。

四：帶參數(shù)的構(gòu)造函數(shù)

如何讓構(gòu)造函數(shù)帶參數(shù)呢？其實(shí)很簡(jiǎn)單，將要傳入的參數(shù)寫入函數(shù)的參數(shù)列表中即可，如

function Shape(ax,ay)
{
var x=0;
var y=0;
var init = function()
{
//構(gòu)造函數(shù)
x=ax;
y=ay;
};
init();
}

這樣，我們就可以這樣創(chuàng)建對(duì)象：

在Javascript中如何定義靜態(tài)的屬性和方法呢？如下所示

function Shape(ax,ay)
{
var x=0;
var y=0;
var init = function()
{
//構(gòu)造函數(shù)
x=ax;
y=ay;
};
init();
}
Shape.count=0;//定義一個(gè)靜態(tài)屬性count，這個(gè)屬性是屬于類的，不是屬于對(duì)象的。
Shape.staticMethod=function(){};//定義一個(gè)靜態(tài)的方法

有了靜態(tài)屬性和方法，我們就可以用類名來(lái)訪問(wèn)它了，如下

alert ( aShape.count );
aShape.staticMethod();

注意：靜態(tài)屬性和方法都是公有的，目前為止，我不知道如何讓靜態(tài)屬性和方法變成私有的

六：在方法中訪問(wèn)本類的公有屬性和私有屬性

在類的方法中訪問(wèn)自己的屬性，Javascript對(duì)于公有屬性和私有屬性的訪問(wèn)方法有所不同，請(qǐng)大家看下面的代碼

function Shape(ax,ay)
{
var x=0;
var y=0;
this.gx=0;
this.gy=0;
var init = function()
{
x=ax;//訪問(wèn)私有屬性，直接寫變量名即可
y=ay;
this.gx=ax;//訪問(wèn)公有屬性，需要在變量名前加上this.
this.gy=ay;
};
init();
}

七：this的注意事項(xiàng)

根據(jù)筆者的經(jīng)驗(yàn)，類中的this并不是一直指向我們的這個(gè)對(duì)象本身的，主要原因還是因?yàn)镴avascript并不是OOP語(yǔ)言，而且，函數(shù)和類均用function定義，當(dāng)然會(huì)引起一些小問(wèn)題。

this指針指錯(cuò)的場(chǎng)合一般在事件處理上面，我們想讓某個(gè)對(duì)象的成員函數(shù)來(lái)響應(yīng)某個(gè)事件，當(dāng)事件被觸發(fā)以后，系統(tǒng)會(huì)調(diào)用我們這個(gè)成員函數(shù)，但是，傳入的this指針已經(jīng)不是我們本身的對(duì)象了，當(dāng)然，這時(shí)再在成員函數(shù)中調(diào)用this當(dāng)然會(huì)出錯(cuò)了。

解決方法是我們?cè)诙x類的一開始就將this保存到一個(gè)私有的屬性中，以后，我們可以用這個(gè)屬性代替this。我用這個(gè)方法使用this指針相當(dāng)安全，而且很是省心～

我們修改一下代碼，解決this問(wèn)題。對(duì)照第六部分的代碼看，你一定就明白了

function Shape(ax,ay)
{
var _this=this; //把this保存下來(lái)，以后用_this代替this，這樣就不會(huì)被this弄暈了
var x=0;
var y=0;
_this.gx=0;
_this.gy=0;
var init = function()
{
x=ax;//訪問(wèn)私有屬性，直接寫變量名即可
y=ay;
_this.gx=ax;//訪問(wèn)公有屬性，需要在變量名前加上this.
_this.gy=ay;
};
init();
}

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

最新評(píng)論