js面向對象多種創(chuàng)建對象方法小結

更新時間：2012年05月21日 01:08:58 作者：

js面向對象多種創(chuàng)建對象方法小結，需要的朋友可以參考下

開始創(chuàng)建對象：

　1.對象字面量。

 
var clock={ 
hour:12, 
minute:10, 
second:10, 
showTime:function(){ 
alert(this.hour+":"+this.minute+":"+this.second); 
} 
} 
clock.showTime();//調用 

2.創(chuàng)建Object實例

復制代碼代碼如下:

 
var clock = new Object(); 
clock.hour=12; 
clock.minute=10; 
clock.showHour=function(){alert(clock.hour);}; 

clock.showHour();//調用 

由此可見屬性是可以動態(tài)添加，修改的

對象創(chuàng)建模式：

1.工廠模式：就是一個函數(shù)，然后放入?yún)?shù)，返回對象，流水線工作

復制代碼代碼如下:

 
function createClock(hour,minute,second){ 
var clock = new Object(); 
clock.hour=hour; 
clock.minute=minute; 
clock.second=second; 
clock.showHour=function(){ 
alert(this.hour+":"+this.minute+":"+this.second); 
}; 
return clock; 
}; 
var newClock = createClock(12,12,12);//實例化 
newClock.showHour();//調用 

優(yōu)點：總算優(yōu)點抽象的概念了。但是不能識別對象的類型呢！

2.構造函數(shù)模式

復制代碼代碼如下:

 
function clock(hour,minute,second){ 
this.hour = hour; 
this.minute = minute; 
this.second = second; 
this.showTime = function(){ 
alert(this.hour+":"+this.minute+":"+this.second); 
} 
} 
var newClock =new clock(12,12,12); 
alert(newClock.hour); 

注意:這個new關鍵字是必須，如果不加，clock就不會當成構造函數(shù)調用，而只是一個普通的函數(shù)。同時，還會意外地給他的外部作用域即window添加屬性，因為此時構造函數(shù)內部的this已經(jīng)映射到了外部作用域了。所以為了安全起見，可以這樣創(chuàng)建

復制代碼代碼如下:

 
function clock(hour,minute,second){ 
if(this instanceof clock){ 
this.hour = hour; 
this.minute = minute; 
this.second = second; 
this.showTime = function(){ 
alert(this.hour+":"+this.minute+":"+this.second); 
} 
} 
else{ 
throw new Error("please add 'new' to make a instance"); 
} 
} 

構造函數(shù)的缺點：由于this指針在對象實例的時候發(fā)生改變指向新的實例。這時新實例的方法也要重新創(chuàng)建，如果n個實例就要n次重建相同的方法。于是讓我們來揭開原型模式吧

3.原型模式

復制代碼代碼如下:

 
function clock(hour,minute,second){ 
} 
clock.prototype.hour=12; 
clock.prototype.minute=12; 
clock.prototype.second=12; 
clock.prototype.showTime=function(){ 
alert(this.hour+":"+this.minute+":"+this.second); 
} 
var newClock = new clock(); 
newClock.showTime(); 

深度理解原型模型很重要，

首先，每個函數(shù)都有一個prototype(原型)屬性，這個指針指向的就是clock.prototype對象。而這個原型對象在默認的時候有一個屬性constructor，指向clock，這個屬性可讀可寫。而當我們在實例化一個對象的時候，實例newClock除了具有構造函數(shù)定義的屬性和方法外（注意，只是構造函數(shù)中的）,還有一個指向構造函數(shù)的原型的指針，ECMAScript管他叫[[prototype]]，這樣實例化對象的時候，原型對象的方法并沒有在某個具體的實例中，因為原型沒有被實例。（廢話有點多，沒有誤導您吧。別暈）

所以這種模式定義的對象，在調用方法的時候過程：調用newClock.showTime();先看實例中有沒有，有調之，無追蹤到原型，有調之，無出錯，調用失敗。

當然可以這樣寫：

復制代碼代碼如下:

 
function clock(hour,minute,second){ 
} 
clock.prototype={ 
constructor:clock, //必須手動設置這個屬性，不然就斷了與構造函數(shù)的聯(lián)系了。沒有實例共享原型的意義了。 
hour:12, 
minute:12, 
second:12, 
showTime:function(){ 
alert(this.hour+":"+this.minute+":"+this.second) 
} 
} 
var newClock = new clock(); 
newClock.showTime(); 

注意：實例與構造函數(shù)原型的聯(lián)系也是通過指針來聯(lián)系的，故可以動態(tài)添加修改原型的方法。

這種純原型的模式問題也很明顯，所有的屬性，方法都是共享的，不能讓對象具體化。常常我們想每個對象有自己的屬性。于是，結合前兩種，產(chǎn)生新的模式

4.構造-原型組合模式。

復制代碼代碼如下:

 
function clock(hour,minute,second){ 
this.hour = hour; 
this.minute = minute; 
this.second = second; 
} 

clock.prototype.showTime=function(){alert(this.hour+":"+this.minute+":"+this.second);} 
var newClock = new clock(12,12,12); 
newClock.showTime(); 

這里我們將屬性放在構造函數(shù)中，更顯得對象的具體性。

您可能感興趣的文章: