JavaScript 面向?qū)ο缶幊蹋?） 基礎(chǔ)
更新時間：2010年05月18日 01:13:43 作者：
自從有了Ajax這個概念，JavaScript作為Ajax的利器，其作用一路飆升。JavaScript最基本的使用，以及語法、瀏覽器對象等等東東在這里就不累贅了。把主要篇幅放在如何實現(xiàn)JavaScript的面向?qū)ο缶幊谭矫妗?/div>
1. 用JavaScript實現(xiàn)類
JavaScritpt沒有專門的機制實現(xiàn)類，這里是借助它的函數(shù)允許嵌套的機制來實現(xiàn)類的。一個函數(shù)可以包含變量，又可以包含其它函數(shù)，這樣，變量可以作為屬性，內(nèi)部的函數(shù)就可以作為成員方法了。因此外層函數(shù)本身就可以作為一個類了。如下：
function myClass()
{
//此處相當(dāng)于構(gòu)造函數(shù)
}
這里 myClass就是一個類。其實可以把它看成類的構(gòu)造函數(shù)。至于非構(gòu)造函數(shù)的部分，以后會詳細描述。
2. 如何獲得一個類的實例
實現(xiàn)了類就應(yīng)該可以獲得類的實例，JavaScript提供了一個方法可以獲得對象實例。即 new操作符。其實JavaScript中，類和函數(shù)是同一個概念，當(dāng)用new操作一個函數(shù)時就返回一個對象。如下：
var obj1 = new myClass();
3. 對象的成員的引用
在JavaScript中引用一個類的屬性或方法的方法有以下三種。
1> 點號操作符
這是一種最普遍的引用方式，就不累贅。即如下形式：
對象名.屬性名;
對象名.方法名;
2> 方括號引用
JavaScript中允許用方括號引用對象的成員。如下：
對象名["屬性名"];
對象名["方法名"];
這里方括號內(nèi)是代表屬性或方法名的字符串，不一定是字符串常量。也可以使用變量。這樣就可以使用變量傳遞屬性或方法名。為編程帶來了方便。在某些情況下，代碼中不能確定要調(diào)用那個屬性或方法時，就可以采用這種方式。否則，如果使用點號操作符，還需要使用條件判斷來調(diào)用屬性或方法。
另外，使用方括號引用的屬性和方法名還可以以數(shù)字開頭，或者出現(xiàn)空格，而使用點號引用的屬性和方法名則遵循標(biāo)示符的規(guī)則。但一般不提倡使用非標(biāo)示符的命名方法。
3> 使用eval函數(shù)
如果不希望使用變量傳遞變量或方法名，又不想使用條件判斷，那么eval函數(shù)是一個好的選擇。eval接收一個字符串類型的參數(shù)，然后將這個字符串作為代碼在上下文中執(zhí)行，返回執(zhí)行的結(jié)果。這里正是利用了eval的這一功能。如下：
alert(eval("對象名." + element.value));
4. 對對象屬性，方法的添加、修改和刪除操作
JavaScript中，在生成對象之后還可以為對象動態(tài)添加、修改和刪除屬性和方法，這與其它面向?qū)ο蟮恼Z言是不同的。
1> 添加屬性和方法
先創(chuàng)建一個對象，空對象創(chuàng)建后沒有任何屬性和方法，然而我們可以在代碼中創(chuàng)建。
var obj1 = new Object();
//添加屬性
obj1.ID = 1;
obj1.Name = "johnson";
//添加方法
obj1.showMessage = function()
{
alert("ID: " + this.ID + ", Name: " + this.Name);
}
2> 修改屬性與方法
與添加屬性和方法類似，例如接著上面的例子：
// 修改屬性
obj1.ID = 2;
obj1.Name = "Amanda";
// 修改方法
obj1.showMessage = function()
{
alert("ID: " + this.ID");
}
3> 刪除屬性與方法
直接將要刪除的屬性或方法賦值為undefined即可：
obj1.ID = 1;
obj1.Name = undefined;
obj1.showMessage = undefined;
5. 創(chuàng)建無類型對象。
類似于C#3.0里的Anonymous Types，JavaScript 也可以創(chuàng)建無類型的對象。形式如下：
var obj1 = {};
var obj2 =
{
ID: 1,
Name: "Johnson",
showMessage: function()
{
alert("ID: " + this.ID + "Name: " + this.Name);
}
}
這里定義了兩個無類型的對象，obj1和obj2。其中obj1是一個空對象。obj2包括兩個屬性ID, Name和一個方法showMessage。每個屬性和方法用逗號分割。屬性(方法)名和其值之間用分號分割。
用這種方式創(chuàng)建屬性方法時，也可以用字符串定義屬性方法的名字。如：
var obj2 =
{
"ID" : 1,
"Name": "Johnson"
}
6. prototype
每個函數(shù)對象都具有一個子對象prototype，因為函數(shù)也可以表示類，所以prototype表示一個類的成員的集合。當(dāng)new 一個對象時，prototype對象的成員都會被實例化成對象的成員。先看一個例子：
function myClass()
{ }
myClass.prototype.ID = 1;
myClass.prototype.Name = "johnson";
myClass.prototype.showMessage = function()
{
alert("ID: " + this.ID + "Name: " + this.Name);
}
var obj1 = new myClass();
obj1.showMessage();
使用prototype對象創(chuàng)建類有一個好處。如果將所有的成員直接寫在類的聲明中，如下：
function myClass()
{
//添加屬性
this.ID = 1;
this.Name = "johnson";
//添加方法
this.showMessage = function()
{
alert("ID: " + this.ID + ", Name: " + this.Name);
}
}
var obj1 = new myClass();
var obj2 = new myClass();
在上面的代碼中，定義了一個類myClass，在類中直接定義了兩個屬性和一個方法。然后實例化了兩個對象，這里的兩個屬性和一個方法，每創(chuàng)建一次myClass對象都會被創(chuàng)建一次，浪費了內(nèi)存空間。而用prototype以后就可以解決這個問題，每new一個函數(shù)時，其prototype對象的成員都會自動賦給這個對象，當(dāng)new多個對象時不會重復(fù)創(chuàng)建。
由于prototype的初始化發(fā)生在函數(shù)體執(zhí)行之前，用以下代碼可以證明：
function myClass()
{
//此處相當(dāng)于構(gòu)造函數(shù)
this.ID = 1;
this.Name1 = this.Name;
this.showMessage();
}
myClass.prototype.Name = "johnson";
myClass.prototype.showMessage = function()
{
alert("ID: " + this.ID + ", Name: " + this.Name);
}
var obj1 = new myClass();
執(zhí)行以上代碼可以發(fā)現(xiàn)當(dāng)new這個類型的對象時，即彈出了對話框。
最后只得一提的是，prototype有一個方法，在面向?qū)ο蟮脑O(shè)計中用得到。即：constructor屬性，是對構(gòu)造函數(shù)的調(diào)用，這里的構(gòu)造函數(shù)即上文提到的類的聲明里的代碼。如：
function myClass()
{
//此處相當(dāng)于構(gòu)造函數(shù)
alert("this is in constructor");
}
myClass.prototype.constructor();
var obj1 = new myClass();
執(zhí)行以上代碼你會發(fā)現(xiàn)對話框彈出了兩次。由此可見，prototype可專門用于設(shè)計類的成員，實際上在JavaScript面向?qū)ο蟮脑O(shè)計中，很多時候都會用到prototype。
JavaScritpt沒有專門的機制實現(xiàn)類，這里是借助它的函數(shù)允許嵌套的機制來實現(xiàn)類的。一個函數(shù)可以包含變量，又可以包含其它函數(shù)，這樣，變量可以作為屬性，內(nèi)部的函數(shù)就可以作為成員方法了。因此外層函數(shù)本身就可以作為一個類了。如下：
復(fù)制代碼 代碼如下:
function myClass()
{
//此處相當(dāng)于構(gòu)造函數(shù)
}
這里 myClass就是一個類。其實可以把它看成類的構(gòu)造函數(shù)。至于非構(gòu)造函數(shù)的部分，以后會詳細描述。
2. 如何獲得一個類的實例
實現(xiàn)了類就應(yīng)該可以獲得類的實例，JavaScript提供了一個方法可以獲得對象實例。即 new操作符。其實JavaScript中，類和函數(shù)是同一個概念，當(dāng)用new操作一個函數(shù)時就返回一個對象。如下：
var obj1 = new myClass();
3. 對象的成員的引用
在JavaScript中引用一個類的屬性或方法的方法有以下三種。
1> 點號操作符
這是一種最普遍的引用方式，就不累贅。即如下形式：
對象名.屬性名;
對象名.方法名;
2> 方括號引用
JavaScript中允許用方括號引用對象的成員。如下：
對象名["屬性名"];
對象名["方法名"];
這里方括號內(nèi)是代表屬性或方法名的字符串，不一定是字符串常量。也可以使用變量。這樣就可以使用變量傳遞屬性或方法名。為編程帶來了方便。在某些情況下，代碼中不能確定要調(diào)用那個屬性或方法時，就可以采用這種方式。否則，如果使用點號操作符，還需要使用條件判斷來調(diào)用屬性或方法。
另外，使用方括號引用的屬性和方法名還可以以數(shù)字開頭，或者出現(xiàn)空格，而使用點號引用的屬性和方法名則遵循標(biāo)示符的規(guī)則。但一般不提倡使用非標(biāo)示符的命名方法。
3> 使用eval函數(shù)
如果不希望使用變量傳遞變量或方法名，又不想使用條件判斷，那么eval函數(shù)是一個好的選擇。eval接收一個字符串類型的參數(shù)，然后將這個字符串作為代碼在上下文中執(zhí)行，返回執(zhí)行的結(jié)果。這里正是利用了eval的這一功能。如下：
alert(eval("對象名." + element.value));
4. 對對象屬性，方法的添加、修改和刪除操作
JavaScript中，在生成對象之后還可以為對象動態(tài)添加、修改和刪除屬性和方法，這與其它面向?qū)ο蟮恼Z言是不同的。
1> 添加屬性和方法
先創(chuàng)建一個對象，空對象創(chuàng)建后沒有任何屬性和方法，然而我們可以在代碼中創(chuàng)建。
復(fù)制代碼 代碼如下:
var obj1 = new Object();
//添加屬性
obj1.ID = 1;
obj1.Name = "johnson";
//添加方法
obj1.showMessage = function()
{
alert("ID: " + this.ID + ", Name: " + this.Name);
}
2> 修改屬性與方法
與添加屬性和方法類似，例如接著上面的例子：
復(fù)制代碼 代碼如下:
// 修改屬性
obj1.ID = 2;
obj1.Name = "Amanda";
// 修改方法
obj1.showMessage = function()
{
alert("ID: " + this.ID");
}
3> 刪除屬性與方法
直接將要刪除的屬性或方法賦值為undefined即可：
復(fù)制代碼 代碼如下:
obj1.ID = 1;
obj1.Name = undefined;
obj1.showMessage = undefined;
5. 創(chuàng)建無類型對象。
類似于C#3.0里的Anonymous Types，JavaScript 也可以創(chuàng)建無類型的對象。形式如下：
復(fù)制代碼 代碼如下:
var obj1 = {};
var obj2 =
{
ID: 1,
Name: "Johnson",
showMessage: function()
{
alert("ID: " + this.ID + "Name: " + this.Name);
}
}
這里定義了兩個無類型的對象，obj1和obj2。其中obj1是一個空對象。obj2包括兩個屬性ID, Name和一個方法showMessage。每個屬性和方法用逗號分割。屬性(方法)名和其值之間用分號分割。
用這種方式創(chuàng)建屬性方法時，也可以用字符串定義屬性方法的名字。如：
復(fù)制代碼 代碼如下:
var obj2 =
{
"ID" : 1,
"Name": "Johnson"
}
6. prototype
每個函數(shù)對象都具有一個子對象prototype，因為函數(shù)也可以表示類，所以prototype表示一個類的成員的集合。當(dāng)new 一個對象時，prototype對象的成員都會被實例化成對象的成員。先看一個例子：
復(fù)制代碼 代碼如下:
function myClass()
{ }
myClass.prototype.ID = 1;
myClass.prototype.Name = "johnson";
myClass.prototype.showMessage = function()
{
alert("ID: " + this.ID + "Name: " + this.Name);
}
var obj1 = new myClass();
obj1.showMessage();
使用prototype對象創(chuàng)建類有一個好處。如果將所有的成員直接寫在類的聲明中，如下：
復(fù)制代碼 代碼如下:
function myClass()
{
//添加屬性
this.ID = 1;
this.Name = "johnson";
//添加方法
this.showMessage = function()
{
alert("ID: " + this.ID + ", Name: " + this.Name);
}
}
var obj1 = new myClass();
var obj2 = new myClass();
在上面的代碼中，定義了一個類myClass，在類中直接定義了兩個屬性和一個方法。然后實例化了兩個對象，這里的兩個屬性和一個方法，每創(chuàng)建一次myClass對象都會被創(chuàng)建一次，浪費了內(nèi)存空間。而用prototype以后就可以解決這個問題，每new一個函數(shù)時，其prototype對象的成員都會自動賦給這個對象，當(dāng)new多個對象時不會重復(fù)創(chuàng)建。
由于prototype的初始化發(fā)生在函數(shù)體執(zhí)行之前，用以下代碼可以證明：
復(fù)制代碼 代碼如下:
function myClass()
{
//此處相當(dāng)于構(gòu)造函數(shù)
this.ID = 1;
this.Name1 = this.Name;
this.showMessage();
}
myClass.prototype.Name = "johnson";
myClass.prototype.showMessage = function()
{
alert("ID: " + this.ID + ", Name: " + this.Name);
}
var obj1 = new myClass();
執(zhí)行以上代碼可以發(fā)現(xiàn)當(dāng)new這個類型的對象時，即彈出了對話框。
最后只得一提的是，prototype有一個方法，在面向?qū)ο蟮脑O(shè)計中用得到。即：constructor屬性，是對構(gòu)造函數(shù)的調(diào)用，這里的構(gòu)造函數(shù)即上文提到的類的聲明里的代碼。如：
復(fù)制代碼 代碼如下:
function myClass()
{
//此處相當(dāng)于構(gòu)造函數(shù)
alert("this is in constructor");
}
myClass.prototype.constructor();
var obj1 = new myClass();
執(zhí)行以上代碼你會發(fā)現(xiàn)對話框彈出了兩次。由此可見，prototype可專門用于設(shè)計類的成員，實際上在JavaScript面向?qū)ο蟮脑O(shè)計中，很多時候都會用到prototype。
相關(guān)文章
javascript是基于對象的編程語言。從window到document，從方法到類，從object到Array都是對象。2009-09-09
Javascript 面向?qū)ο螅ǘ┓庋b代碼，需要的朋友可以參考下2012-05-05
我說過，我要寫一個JS的框架，我知道有人會從心底BS我，但是：你繼續(xù)BS吧！我還是要寫我的JOBJ。2008-03-03
js類的封裝方法，說實話我也是新手，一直沒涉及到j(luò)s的類，下面的代碼，應(yīng)該看的懂，不懂就先用腦子記下了，見得多了就會了
2008-05-05 一個Base類，包含基本的方法，大家可以在這個基礎(chǔ)上拓展下功能。
2009-07-07 JavaScript面向?qū)ο笾甈rototypes和繼承
本文翻譯自微軟的牛人Scott Allen Prototypes and Inheritance in JavaScript ,本文對到底什么是Prototype和為什么通過Prototype能實現(xiàn)繼承做了詳細的分析和闡述，是理解JS OO 的佳作之一
2012-07-07 javascript 混合的構(gòu)造函數(shù)和原型方式，動態(tài)原型方式
JS編程中最常用兩種對象類定義的方式。不管是利用下面2種方式的那一種，都可以達到相同的效果！
2009-12-12 在面向?qū)ο笳Z言里重載是很重要的一個特性，而JavaScript這個自稱面向?qū)ο蟮恼Z言竟然沒有直接提供重載的功能。
2010-05-05 JavaScript 類的定義和引用 JavaScript高級培訓(xùn) 自定義對象
在Java語言中，我們可以定義自己的類，并根據(jù)這些類創(chuàng)建對象來使用，在Javascript中，我們也可以定義自己的類，例如定義User類、Hashtable類等等。
2010-04-04