自從有了Ajax這個(gè)概念，JavaScript作為Ajax的利器，其作用一路飆升。JavaScript最基本的使用，以及語(yǔ)法、瀏覽器對(duì)象等等東東在這里就不累贅了。把主要篇幅放在如何實(shí)現(xiàn)JavaScript的面向?qū)ο缶幊谭矫妗?br />
??? 1. 用JavaScript實(shí)現(xiàn)類(lèi)
??? ?? JavaScritpt沒(méi)有專(zhuān)門(mén)的機(jī)制實(shí)現(xiàn)類(lèi)，這里是借助它的函數(shù)允許嵌套的機(jī)制來(lái)實(shí)現(xiàn)類(lèi)的。一個(gè)函數(shù)可以包含變量，又可以包含其它函數(shù)，這樣，變量可以作為屬性，內(nèi)部的函數(shù)就可以作為成員方法了。因此外層函數(shù)本身就可以作為一個(gè)類(lèi)了。如下：

function?myClass()
{
????//此處相當(dāng)于構(gòu)造函數(shù)
}

這里 myClass就是一個(gè)類(lèi)。其實(shí)可以把它看成類(lèi)的構(gòu)造函數(shù)。至于非構(gòu)造函數(shù)的部分，以后會(huì)詳細(xì)描述。

??? 2. 如何獲得一個(gè)類(lèi)的實(shí)例
????? 實(shí)現(xiàn)了類(lèi)就應(yīng)該可以獲得類(lèi)的實(shí)例，JavaScript提供了一個(gè)方法可以獲得對(duì)象實(shí)例。即 new操作符。 其實(shí)JavaScript中，類(lèi)和函數(shù)是同一個(gè)概念，當(dāng)用new操作一個(gè)函數(shù)時(shí)就返回一個(gè)對(duì)象。如下：

var obj1?=?new?myClass();

??? 3. 對(duì)象的成員的引用
?????? 在JavaScript中引用一個(gè)類(lèi)的屬性或方法的方法有以下三種。
?????? 1>? 點(diǎn)號(hào)操作符
??????????? 這是一種最普遍的引用方式，就不累贅。即如下形式：

對(duì)象名.屬性名;
對(duì)象名.方法名;

????? 2>? 方括號(hào)引用
?????????? JavaScript中允許用方括號(hào)引用對(duì)象的成員。如下：

對(duì)象名["屬性名"];
對(duì)象名["方法名"];

??????????? 這里方括號(hào)內(nèi)是代表屬性或方法名的字符串，不一定是字符串常量。也可以使用變量。這樣就可以使用變量傳遞屬性或方法名。為編程帶來(lái)了方便。在某些情況下， 代碼中不能確定要調(diào)用那個(gè)屬性或方法時(shí)，就可以采用這種方式。否則，如果使用點(diǎn)號(hào)操作符，還需要使用條件判斷來(lái)調(diào)用屬性或方法。
?????? 另外，使用方括號(hào)引用的屬性和方法名還可以以數(shù)字開(kāi)頭，或者出現(xiàn)空格，而使用點(diǎn)號(hào)引用的屬性和方法名則遵循標(biāo)示符的規(guī)則。但一般不提倡使用非標(biāo)示符的命名方法。
?
????? 3>? 使用eval函數(shù)
?????????? 如果不希望使用變量傳遞變量或方法名，又不想使用條件判斷，那么eval函數(shù)是一個(gè)好的選擇。eval接收一個(gè)字符串類(lèi)型的參數(shù)，然后將這個(gè)字符串作為代碼在上下文中執(zhí)行，返回執(zhí)行的結(jié)果。這里正是利用了eval的這一功能。如下：

alert(eval("對(duì)象名."?+?element.value));

????????
???? 4. 對(duì)對(duì)象屬性，方法的添加、修改和刪除操作
???????? JavaScript中，在生成對(duì)象之后還可以為對(duì)象動(dòng)態(tài)添加、修改和刪除屬性和方法，這與其它面向?qū)ο蟮恼Z(yǔ)言是不同的。
??????? 1>? 添加屬性和方法
????????????? 先創(chuàng)建一個(gè)對(duì)象，空對(duì)象創(chuàng)建后沒(méi)有任何屬性和方法，然而我們可以在代碼中創(chuàng)建。

var?obj1?=?new?Object();
//添加屬性
obj1.ID?=?1;
obj1.Name?=?"johnson";

//添加方法
obj1.showMessage?=?function()
{
????alert("ID:?"?+?this.ID?+?",?Name:?"?+?this.Name);
}

????? 2>? 修改屬性與方法
??????????? 與添加屬性和方法類(lèi)似，例如接著上面的例子：

//?修改屬性
obj1.ID?=?2;
obj1.Name?=?"Amanda";

//?修改方法
obj1.showMessage?=?function()
{
????alert("ID:?"?+?this.ID");
}

????
????? 3>? 刪除屬性與方法
??????????? 直接將要?jiǎng)h除的屬性或方法賦值為undefined即可：

obj1.ID?= 1;
obj1.Name?=?undefined;

obj1.showMessage?=?undefined;

???? 5. 創(chuàng)建無(wú)類(lèi)型對(duì)象。
??????? 類(lèi)似于C#3.0里的Anonymous Types，JavaScript 也可以創(chuàng)建無(wú)類(lèi)型的對(duì)象。形式如下：

var?obj1?=?{};
var?obj2?=?
{
????ID:?1,
????Name:?"Johnson",
????showMessage:?function()
????{
????????alert("ID:?"?+?this.ID?+?"Name:?"?+?this.Name);
????}
}

?????? 這里定義了兩個(gè)無(wú)類(lèi)型的對(duì)象，obj1和obj2。其中obj1是一個(gè)空對(duì)象。obj2包括兩個(gè)屬性ID, Name和一個(gè)方法showMessage。每個(gè)屬性和方法用逗號(hào)分割。屬性(方法)名和其值之間用分號(hào)分割。
?????? 用這種方式創(chuàng)建屬性方法時(shí)，也可以用字符串定義屬性方法的名字。如：

var?obj2?=?
{
????"ID"?:?1,
????"Name":?"Johnson"
}

?
????? 6. prototype
????????? 每個(gè)函數(shù)對(duì)象都具有一個(gè)子對(duì)象prototype，因?yàn)楹瘮?shù)也可以表示類(lèi)，所以prototype表示一個(gè)類(lèi)的成員的集合。當(dāng)new 一個(gè)對(duì)象時(shí)，prototype對(duì)象的成員都會(huì)被實(shí)例化成對(duì)象的成員。先看一個(gè)例子：

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對(duì)象創(chuàng)建類(lèi)有一個(gè)好處。如果將所有的成員直接寫(xiě)在類(lèi)的聲明中，如下：

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

??????? 在上面的代碼中，定義了一個(gè)類(lèi)myClass，在類(lèi)中直接定義了兩個(gè)屬性和一個(gè)方法。然后實(shí)例化了兩個(gè)對(duì)象，這里的兩個(gè)屬性和一個(gè)方法，每創(chuàng)建一次 myClass對(duì)象都會(huì)被創(chuàng)建一次，浪費(fèi)了內(nèi)存空間。而用prototype以后就可以解決這個(gè)問(wèn)題，每new一個(gè)函數(shù)時(shí)，其prototype對(duì)象的成 員都會(huì)自動(dòng)賦給這個(gè)對(duì)象，當(dāng)new多個(gè)對(duì)象時(shí)不會(huì)重復(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這個(gè)類(lèi)型的對(duì)象時(shí)，即彈出了對(duì)話框。
??????? 最后只得一提的是，prototype有一個(gè)方法，在面向?qū)ο蟮脑O(shè)計(jì)中用得到。即：constructor屬性，是對(duì)構(gòu)造函數(shù)的調(diào)用，這里的構(gòu)造函數(shù)即上文提到的類(lèi)的聲明里的代碼。 如：

function?myClass()
{
????//此處相當(dāng)于構(gòu)造函數(shù)
????alert("this?is?in?constructor");
}
myClass.prototype.constructor();

var?obj1?=?new?myClass();

?? 執(zhí)行以上代碼你會(huì)發(fā)現(xiàn)對(duì)話框彈出了兩次。由此可見(jiàn)，prototype可專(zhuān)門(mén)用于設(shè)計(jì)類(lèi)的成員，實(shí)際上在JavaScript面向?qū)ο蟮脑O(shè)計(jì)中，很多時(shí)候都會(huì)用到prototype。

?

轉(zhuǎn)自:http://www.cnblogs.com/johnson2008/archive/2008/05/15/1198252.html

轉(zhuǎn)載于:https://www.cnblogs.com/xccjmpc/p/3396813.html

總結(jié)

以上是生活随笔為你收集整理的JavaScript面向对象编程（1）-- 基础的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。