快捷導(dǎo)航

JavaScript之自定義類型

更新時間：2012年05月04日 00:39:14 作者：

在JavaScript中，創(chuàng)建一個具有自定義屬性和方法的對象有很多種模式，下面一一進(jìn)行介紹

1、直接創(chuàng)建模式。這是最簡單也是最直接的一種模式，首先創(chuàng)建一個引用類型的對象，然后為其添加自定義屬性和方法。示例代碼如下：

 
var person = new Object(); 
person.name = "Sam"; 
person.age = 16; 
person.speak = function(){ 
alert(this.name + "is " + this.age + "years old"); 
} 
person.speak(); 

可以看到，上面創(chuàng)建了一個Object類型的對象，然后為其添加了name和age屬性以及一個speak方法。直接創(chuàng)建模式雖然簡單，但其缺點(diǎn)是顯而易見的：當(dāng)我們需要創(chuàng)建許多相同的對象時，每次都要重復(fù)編寫代碼。為了解決這個問題，我們可以將創(chuàng)建對象的過程進(jìn)行封裝，于是便有了下面的工廠模式。
2、工廠模式。工廠模式是程序設(shè)計(jì)中一種常用的設(shè)計(jì)模式，它主要是將創(chuàng)建對象的過程進(jìn)行了封裝，示例代碼如下：

復(fù)制代碼代碼如下:

 
function createPerson(name, age){ 
var person = new Object(); 
person.name = name; 
person.age = age; 
person.speak = function(){ 
alert(this.name + "is " + this.age + "years old"); 
} 
return person; 
} 
var person1 = createPerson("Sam", 16); 
var person2 = createPerson("Jack", 18); 

使用工廠模式后，創(chuàng)建相同類型的對象變得簡單了。但工廠模式?jīng)]有解決對象識別的問題，即我們無法確定創(chuàng)建的對象的具體類型。有過面向?qū)ο缶幊探?jīng)驗(yàn)的開發(fā)人員都知道，對象的創(chuàng)建應(yīng)當(dāng)基于類，有了具體的自定義類，再來創(chuàng)建該類的對象。幸好，在JavaScript中，我們可以通過構(gòu)造函數(shù)模式來模擬一個類。
3、構(gòu)造函數(shù)模式。構(gòu)造函數(shù)和普通函數(shù)沒有任何區(qū)別。任何普通函數(shù)都可以作為構(gòu)造函數(shù)，只要使用new操作符即可；任何構(gòu)造函數(shù)也都可以作為普通函數(shù)來調(diào)用。只不過在JavaScript中，有一個約定，就是用作構(gòu)造函數(shù)的函數(shù)名需要首字母大寫。示例代碼如下：

復(fù)制代碼代碼如下:

 
function Person(name, age){ 
this.name = name; 
this.age = age; 
this.speak = function(){ 
alert(this.name + "is " + this.age + "years old"); 
} 
} 
var person1 = new Person("Sam", 16); 
var person2 = new Person("Jack", 18); 

可以看到，在構(gòu)造函數(shù)內(nèi)部，我們使用了this來添加屬性和方法，那么，這個this是指什么呢？當(dāng)我們創(chuàng)建了一個Person的對象時，this即是指這個創(chuàng)建的對象。現(xiàn)在，我們可以識別出對象person1和person2的具體類型了。使用alert(person1 instanceOf Person)后可以發(fā)現(xiàn)，輸出的值為true。但構(gòu)造函數(shù)模式也有自己的缺點(diǎn)，就是構(gòu)造函數(shù)內(nèi)聲明的方法在每次創(chuàng)建新對象時都會重新創(chuàng)建（在JavaScript中，函數(shù)也是對象）。也就是說，構(gòu)造函數(shù)內(nèi)的方法是與對象綁定的，而不是與類綁定的。下面代碼的輸出可以驗(yàn)證我們的推斷。
alert(person1.speak == person2.speak); // false 解決這個缺點(diǎn)的一種比較簡單的方法就是將函數(shù)的聲明放到構(gòu)造函數(shù)的外面，即：

復(fù)制代碼代碼如下:

 
function Person(name, age){ 
this.name = name; 
this.age = age; 
this.speak = speak; 
} 
function speak(){ 
alert(this.name + "is " + this.age + "years old"); 
} 
var person1 = new Person("Sam", 16); 
var person2 = new Person("Jack", 18); 
alert(person1.speak == person2.speak); // true 

問題解決了，但這種方法又帶來了新的問題。首先，函數(shù)speak是在全局作用域中聲明的，但它卻只能被用于Person構(gòu)造函數(shù)，放在全局作用域中有被誤用的風(fēng)險；其次，如果一個自定義類型有很多的方法，則需要聲明很多的全局函數(shù)，這既將導(dǎo)致全局作用域的污染，也不利于代碼的封裝。那么，有沒有什么辦法能讓自定義類型的方法成為與類綁定的，又不污染全局作用域呢？答案是使用原型模式。
4、原型模式。在我們聲明一個新的函數(shù)后，該函數(shù)（在JavaScript中，函數(shù)也是對象）就會擁有一個prototype的屬性。prototype是一個對象，表示會被該函數(shù)創(chuàng)建的所有對象擁有的公共屬性和方法。示例代碼如下：

復(fù)制代碼代碼如下:

 
function Person(){} 
Person.prototype.name="Sam"; 
Person.prototype.age=16; 
Person.prototype.speak = function(){ 
alert(this.name + "is " + this.age + "years old"); 
} 
var person1 = new Person(); 
person1.speak(); 
var person2 = new Person(); 
alert(person1.speak == person2.speak); // true 

可以看到，雖然構(gòu)造函數(shù)內(nèi)沒有聲明speak方法，但我們創(chuàng)建的對象person1還是能調(diào)用speak方法，這是因?yàn)镴avaScript有一個搜索規(guī)則，先搜索實(shí)例屬性和方法，找到則返回；如果沒找到，則再到prototype中去搜索。原型模式使得方法是與類相關(guān)的，并且沒有污染全局作用域，但其也有自身的缺點(diǎn)：一是所有屬性也都與類相關(guān)，這意味著所有對象共享一份屬性，這顯然是不合理的；二是沒有辦法向構(gòu)造函數(shù)傳入初始化數(shù)據(jù)了。解決的方法很簡單，就是混合使用構(gòu)造函數(shù)模式和原型模式。
5、組合模式。示例代碼如下：

復(fù)制代碼代碼如下:

 
function Person(name, age){ 
this.name = name; 
this.age = age; 
} 
Person.prototype.speak = function(){ 
alert(this.name + "is " + this.age + "years old"); 
} 
var person1 = new Person(); 
person1.speak(); 
var person2 = new Person(); 
alert(person1.speak == person2.speak); // true 

不難發(fā)現(xiàn)，組合模式實(shí)現(xiàn)了我們的所有需求，這也是目前應(yīng)用得比較廣泛的一種模式。有面向?qū)ο缶幊探?jīng)驗(yàn)的開發(fā)人員可能會覺得將prototype的聲明放在構(gòu)造函數(shù)外面有點(diǎn)別扭，那么能否將其放到構(gòu)造函數(shù)里去呢？答案是肯定的，使用動態(tài)組合模式即可。
6、動態(tài)組合模式。其原理就是先判斷原型中的某個屬性或方法是不是已經(jīng)聲明過，如果沒有聲明，則聲明整個原型；否則，什么也不用做。示例代碼如下：

復(fù)制代碼代碼如下:

 
function Person(name, age){ 
this.name = name; 
this.age = age; 
if (Person.prototype.speak == "undefined"){ 
Person.prototype.speak = function(){ 
alert(this.name + "is " + this.age + "years old"); 
} 
} 
} 

您可能感興趣的文章: