快捷導(dǎo)航

JavaScript 學(xué)習筆記（六）

更新時間：2009年12月31日 23:19:18 作者：

JavaScript 定義類或?qū)ο?javascript步入高手行列必須要了解的。

一、工廠方式
自己的理解：要創(chuàng)建很多個對象的實例，這些實例有相同的屬性，但是有不同的屬性值。這個時候就需要創(chuàng)個工廠函數(shù)（factory function）。
工廠函數(shù)（factory function）：創(chuàng)建并返回特定類型的對象。
工廠函數(shù)中如果一個屬性是方法的話，可以在工廠函數(shù)的外面定義對象的方法，然后通過屬性指向該方法，從而可以避開每次都調(diào)用自己的屬性方法，這樣做使得每個對象都共享了同一個函數(shù)。
示例：

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

 
<script type="text/javascript"> 
//工廠函數(shù)外面定義對象的方法 
function ShowNameFn() { 
alert(this.Name); 
} 
//工廠方式創(chuàng)建對象 
function CreatBOFn(sName, iAge, bSex) { 
var BO = new Object(); 
BO.Name = sName; 
BO.Age = iAge; 
BO.Sex = bSex; 
BO.ShowName = ShowNameFn; //該屬性實際上是指向函數(shù)的指針，是一個方法 
return BO; 
} 
//按鈕測試調(diào)用 
function FactoryCreateFn() { 
var oPerson1 = CreatBOFn("張三", 18, true); //創(chuàng)建實例實際上是直接調(diào)用方法 
oPerson1.ShowName(); 
} 
</script> 

總結(jié)：工廠函數(shù)這種方式定義類或?qū)ο?，他在?chuàng)建實例的時候就調(diào)用這個工廠函數(shù)。
二、構(gòu)造函數(shù)方式
第一步選擇類名，即構(gòu)造函數(shù)的名字，BO名首字母大寫，看下面代碼發(fā)現(xiàn)跟上面的工廠函數(shù)類似。
示例：

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

 
//------第二種：構(gòu)造函數(shù)方式-------------------------------- 
function Car(color, money) { 
this.Color = color; 
this.Money = money; 
this.ShowMoney = function() { 
alert(this.Money); 
} 
} 
//按鈕調(diào)用測試 
function NewCarFn() { 
var Car1 = new Car("紅色", "23萬RMB"); 
Car1.ShowMoney(); 
} 
//---------------------------------------------------------- 

比較上一種工廠函數(shù)方式的區(qū)別：
① 構(gòu)造函數(shù)內(nèi)部沒有創(chuàng)建對象，而是使用this關(guān)鍵字。
② 使用new運算符調(diào)用構(gòu)造函數(shù)。
三、原型方式
利用對象的prototype屬性，可以把他看成創(chuàng)建新對象所依賴的原型，用空構(gòu)造函數(shù)來設(shè)置類名，然后所有的屬性和方法都被直接賦予prototype屬性。
原型方式的問題：
首先，這個構(gòu)造函數(shù)沒有參數(shù)，使用原型方式時，不能通過給構(gòu)造函數(shù)傳遞參數(shù)初始化屬性的值。必須在對象創(chuàng)建后才能改變屬性的默認值。
其次，當屬性指向的是對象，而不是函數(shù)時，對象卻被多個實例共享的，其中一個改變將引起其他對象的改變。
示例：

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

 
//先定義一個空的構(gòu)造函數(shù) 
function Car() { 
} 
//屬性和方法直接賦予prototype屬性 
Car.prototype.Color = "紅色，"; 
Car.prototype.Money = "20萬"; 
Car.prototype.Drivers = new Array("小三", "小四"); 
var Car1 = new Car(); 
Car1.Drivers.push("小五"); //實例1中給對象Drivers新增了值(實際上就是在原型里面加了多了個“小五”,所以當new第二個對象的時候讀屬性Drivers也出現(xiàn)了小五) 
alert(Car1.Drivers); 
var Car2 = new Car(); 
alert(Car2.Drivers); //實例2中，對象中的值改變了！輸出“小三，小四，小五” 

四、混合的構(gòu)造函數(shù)/原型方式
聯(lián)合使用構(gòu)造函數(shù)和原型方式，就可以像其他語言一樣的創(chuàng)建對象。
構(gòu)造函數(shù)定義對象的所有非函數(shù)屬性，原型方式定義對象的函數(shù)屬性（方法）。
示例：

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

 
function BOStudent(name,age) { 
this.姓名 = name; 
this.年齡 = age; 
this.課程 = new Array("語文","數(shù)學(xué)"); 
} 
BOStudent.prototype.ShowName = function() { 
alert(this.姓名); 
}; 
//點擊按鈕調(diào)試 
function Admixture() { 
var stu1 = new BOStudent("張三", 20); //new第一個BO 
var stu2 = new BOStudent("李四", 22); //new第二個BO 
stu1.課程.push("物理"); //給對象1 添加物理課程項 
alert(stu1.課程); 
alert(stu2.課程); 
} 

混合的構(gòu)造函數(shù)/原型方式是ECMAScript采用的主要方式，他具有其他方式的特性，卻沒有他們的副作用。
五、動態(tài)原型方法
大多數(shù)的面向?qū)ο笳Z言，定義類時，屬性和方法都打包在一起。而上面的混合構(gòu)造函數(shù)/原型方式屬性和方法是分開的，有些人認為在構(gòu)造函數(shù)內(nèi)部找屬性，在外面找方法的做法不合邏輯，因此也就產(chǎn)生了動態(tài)原型方法。
區(qū)別在于：賦予對象的方法的位置不同。動態(tài)原型方法是在構(gòu)造函數(shù)的內(nèi)部，而上面的第四種是在構(gòu)造函數(shù)外部。
示例：

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

 
function BODynamicPrototype(name, age) { 
this.姓名 = name; 
this.年齡 = age; 
this.課程 = new Array("111", "222"); 
//_initialized標識判斷是否已經(jīng)初始化過，即是否已給原型賦予了任何方法，該方法只創(chuàng)建并賦值一次 
if (typeof BODynamicPrototype._initialized == "undefined") { 
BODynamicPrototype.prototype.ShowName = function() { 
alert(this.姓名); 
}; 
BODynamicPrototype._initialized = true; 
} 
} 

//點擊按鈕調(diào)試 
function DynamicPrototype() { 
var stu1 = new BODynamicPrototype("aaa", 20); //new第一個BO 
var stu2 = new BODynamicPrototype("bbb", 22); //new第二個BO 
stu1.課程.push("333"); //給對象1 添加物理課程項 
alert(stu1.課程); 
alert(stu2.課程); 
} 