JS 創(chuàng)建對(duì)象(常見(jiàn)的幾種方法)

更新時(shí)間：2008年11月03日 15:43:39 作者：

方便學(xué)習(xí)js類(lèi)的朋友，讓你快速的掌握js類(lèi)的定義方法，方法有很多種，結(jié)果都一樣。大家可以根據(jù)自己的愛(ài)好選用。

貼個(gè)代碼先:
function O(user,pwd){ //use constructor
this.user=user;
this.pwd=pwd;
this.get=get;
return this;
}
function O2(user,pwd){ //use factory
var obj=new Object();
obj.user=user;
obj.pwd=pwd;
obj.get=get;
return obj;
}
function O3(){ //use prototype
}
O3.prototype.user='abc';
O3.prototype.pwd='dis';
// O3.propotype.get='get';
//O3.prototype.get(){
//alert(this.pwd);
//}
function O4(user,pwd){
this.user=user;
this.pwd=pwd;
return this;
}
O4.prototype.get=function(){alert('123');}

//function get(){
//alert("This User:"+this.user);
// }
function test2(){
//var a=new O2('Us','Pw'); use factory & constructor
//var a=new O3(); //use prototype
//a.get();
var a=new O4('*U4','P4'); //混合
//a.user='Not ABC'; //set new property
//alert(a.user);
a.get();
}
常用的MS 就這幾種,可能還有其它的.碰到再說(shuō)吧....
題外話(huà)：昨天手欠，試圖用alert(window.appName)到ff之下去查看瀏覽器版本，結(jié)果彈出的竟然是Netscape，咋不是 firefox。繼而又跑去chrome下試驗(yàn)，又一次彈出了Netscape。baidu搜 Netscape 竟然發(fā)現(xiàn)js就出自Netscape公司。慚愧啊慚愧?。?！研究了這么久的js都不認(rèn)識(shí)祖師爺。于是又跑去找了找族譜，原來(lái)js出自Brendan Eich之手，95年他創(chuàng)造js時(shí)候，也不過(guò)就31歲。哎呀，真是白活了，如他一般老的我，到現(xiàn)在都學(xué)不會(huì)js，真是人比人氣死人。。js當(dāng)初設(shè)計(jì)的時(shí)候，沒(méi)有想到自己能從一部打電話(huà)用的手機(jī)變成集拍照，上網(wǎng)，游戲，電話(huà)于一身的智能機(jī)。真是造化弄人?。。∫苍S各中的神奇，連Brendan Eich本人都沒(méi)有想到。應(yīng)該說(shuō)Brendan Eich創(chuàng)造了js，而一大批的js牛人成就了今天如此復(fù)雜的js。
js不是木有類(lèi)么？沒(méi)關(guān)系，人家不是設(shè)計(jì)了原型屬性么~
js不是木有塊級(jí)作用域么？沒(méi)關(guān)系，人家不是有作用域鏈么~
js怎樣實(shí)現(xiàn)成員變量私有化？哦，用閉包解決吧~
哦，這么多基本概念，徹底的暈掉了，路漫漫其修遠(yuǎn)兮。
言歸正傳，本文討論幾種js創(chuàng)建對(duì)象的方法，先從最好理解的工廠模式開(kāi)始：

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

 
function createPerson(name,age,job){ 
var o = {}; 
o.name = name; 
o.age = age; 
o.job = job; 
o.sayName = function(){ 
alert(this.name); 
}; 
return o; 
} 
var tanya = createPerson("tanya","30","female"); 
var ansel = createPerson("ansel","30","male"); 
tanya.sayName(); 
ansel.sayName(); 

這里先定義o為一個(gè)空的對(duì)象，然后為o設(shè)置了一堆屬性。其實(shí)也可以直接給o屬性的嘛，所以如果這樣寫(xiě)也是ok的。

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

 
function createPerson(name,age,job){ 
var o = { 
name : name, 
age : age, 
job : job, 
sayName : function(){ 
alert(this.name); 
} 
}; 
return o; 
} 
var tanya = createPerson("tanya","30","female"); 
var ansel = createPerson("ansel","30","male"); 
tanya.sayName(); 
ansel.sayName(); 

還有一種辦法是利用無(wú)敵的this，因?yàn)閠his就表示當(dāng)前運(yùn)行時(shí)的對(duì)象，將構(gòu)造函數(shù)this的作用域指向新對(duì)象，將當(dāng)前運(yùn)行對(duì)象的屬性和方法都賦給新對(duì)象，這樣對(duì)象模式稱(chēng)為構(gòu)造函數(shù)模式

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

 
function Person(name,age,job){ 
this.name = name; 
this.age = age; 
this.job = job; 
this.sayName = function(){ 
alert(this.name); 
}; 
} 
var tanya = new Person("tanya","30","female"); 
var ansel = new Person("ansel","30","male"); 
tanya.sayName(); 
ansel.sayName(); 

在這個(gè)例子中，tanya和ansel都有一個(gè)constructor屬性，該屬性指向person。
考慮一下如下的情況：

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

 
function Person(name,age,job){ 
this.name = name; 
this.age = age; 
this.job = job; 
this.sayName = function(){ 
alert(this.name); 
}; 
} 
Person("tanya","30","female"); 
Person("ansel","30","male"); 
window.sayName(); 
window.sayName(); 

發(fā)現(xiàn)兩次彈出的都是ansel，這是因?yàn)椴挥胣ew的話(huà)，就不是一個(gè)person的實(shí)例，而僅僅在執(zhí)行函數(shù)。而在全局作用域調(diào)用一個(gè)函數(shù)時(shí)this總是指向Global對(duì)象。而Global對(duì)象在瀏覽器中就是window對(duì)象。
我們還可以用構(gòu)造模式在另外一個(gè)對(duì)象中調(diào)用sayName方法，還記得Apply和call么，來(lái)吧再考慮另外一種情況，

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

 
function Person(name,age,job){ 
this.name = name; 
this.age = age; 
this.job = job; 
this.sayName = function(){ 
alert(this.name); 
}; 
} 
var olivia = {}; 
Person.call(olivia,"tanya","30","female"); 
olivia.sayName(); 
var philip = {} 
Person.apply(philip,["ansel","30","male"]); 
philip.sayName(); 

原型模式就要考慮原型鏈了，分析一下，sayName方法在實(shí)例中被重復(fù)定義了兩次，但其實(shí)沒(méi)有必要?jiǎng)?chuàng)造兩個(gè)一樣的副本。使用原型方法，可以使是tanya和ansel的共享一個(gè)sayName方法。
于是原型模式的寫(xiě)法如下：

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

 
function Person(name,age,job){ 
this.name = name; 
this.age = age; 
this.job = job; 
} 
Person.prototype.sayName= function(){ 
alert(this.name); 
}; 
var tanya = new Person("tanya","30","female"); 
var ansel = new Person("ansel","30","male"); 
tanya.sayName(); 
ansel.sayName(); 

實(shí)際應(yīng)用時(shí)，不是一成不變的套用某種模式，活學(xué)活用。需要共享方法的時(shí)候就用原型模式，需要使用副本的時(shí)候就用構(gòu)造模式，還可以結(jié)合起來(lái)，把所有信息都封裝在構(gòu)造函數(shù)中，而通過(guò)在構(gòu)造函數(shù)中初始化原型，使得對(duì)象保持了同時(shí)使用構(gòu)造函數(shù)和原型的優(yōu)點(diǎn)。

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

 
function Person(name,age,job){ 
this.name = name; 
this.age = age; 
this.job = job; 
if (typeof sayName != "function" ){ 
Person.prototype.sayName= function(){ 
alert(this.name); 
}; 
} 
} 
var tanya = new Person("tanya","30","female"); 
var ansel = new Person("ansel","30","male"); 
ansel.sayName = function () { 
alert("Hi ansel, how hansome you are!"); 
} 
tanya.sayName(); 
ansel.sayName(); 

您可能感興趣的文章:

相關(guān)文章

js另類(lèi)寫(xiě)法
ju 應(yīng)該是一個(gè)定義了各種方法對(duì)象 function(b) 的 b 就是 b(a[d], d) 中的參數(shù) a[d] C 是統(tǒng)計(jì)方法數(shù)量的函數(shù)
2008-03-03
javascript 面向?qū)ο缶幊袒A(chǔ)：封裝
“在面向?qū)ο蟮乃枷胫?，最核心的概念之一就是?lèi)。一個(gè)類(lèi)表示了具有相似性質(zhì)的一類(lèi)事物的抽象，通過(guò)實(shí)例化一個(gè)類(lèi)，可以獲得屬于該類(lèi)的一個(gè)實(shí)例（即對(duì)象）”。
2009-08-08
雖有陳皓《Javascript 面向?qū)ο缶幊獭分橛裨谇?，但是我還是忍不住再畫(huà)蛇添足的補(bǔ)上一篇文章，主要是因?yàn)閖avascript這門(mén)語(yǔ)言魅力
2012-03-03