js面向?qū)ο?多種創(chuàng)建對象方法小結(jié)
更新時間：2012年05月21日 01:08:58 作者：
js面向?qū)ο?多種創(chuàng)建對象方法小結(jié)，需要的朋友可以參考下
開始創(chuàng)建對象：
1.對象字面量。
var clock={
hour:12,
minute:10,
second:10,
showTime:function(){
alert(this.hour+":"+this.minute+":"+this.second);
}
}
clock.showTime();//調(diào)用
2.創(chuàng)建Object實例
var clock = new Object();
clock.hour=12;
clock.minute=10;
clock.showHour=function(){alert(clock.hour);};
clock.showHour();//調(diào)用
由此可見 屬性是可以動態(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();//調(diào)用
優(yōu)點：總算優(yōu)點抽象的概念了。但是不能識別對象的類型呢！
2.構(gòu)造函數(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關(guān)鍵字是必須，如果不加，clock就不會當成構(gòu)造函數(shù)調(diào)用，而只是一個普通的函數(shù)。同時，還會意外地給他的外部作用域即window添加屬性，因為此時構(gòu)造函數(shù)內(nèi)部的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");
}
}
構(gòu)造函數(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除了具有構(gòu)造函數(shù)定義的屬性和方法外（注意，只是構(gòu)造函數(shù)中的）,還有一個指向構(gòu)造函數(shù)的原型的指針，ECMAScript管他叫[[prototype]]，這樣實例化對象的時候，原型對象的方法并沒有在某個具體的實例中，因為原型沒有被實例。（廢話有點多，沒有誤導(dǎo)您吧。別暈）
所以這種模式定義的對象，在調(diào)用方法的時候過程：調(diào)用newClock.showTime();先看實例中有沒有，有調(diào)之，無追蹤到原型，有調(diào)之，無出錯，調(diào)用失敗。
當然可以這樣寫：
function clock(hour,minute,second){
}
clock.prototype={
constructor:clock, //必須手動設(shè)置這個屬性，不然就斷了與構(gòu)造函數(shù)的聯(lián)系了。沒有實例共享原型的意義了。
hour:12,
minute:12,
second:12,
showTime:function(){
alert(this.hour+":"+this.minute+":"+this.second)
}
}
var newClock = new clock();
newClock.showTime();
注意：實例與構(gòu)造函數(shù)原型的聯(lián)系也是通過指針來聯(lián)系的，故可以動態(tài)添加修改原型的方法。
這種純原型的模式問題也很明顯，所有的屬性，方法都是共享的，不能讓對象具體化。常常我們想每個對象有自己的屬性。于是，結(jié)合前兩種，產(chǎn)生新的模式
4.構(gòu)造-原型組合模式。
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();
這里我們將屬性放在構(gòu)造函數(shù)中，更顯得對象的具體性。
1.對象字面量。
復(fù)制代碼 代碼如下:
var clock={
hour:12,
minute:10,
second:10,
showTime:function(){
alert(this.hour+":"+this.minute+":"+this.second);
}
}
clock.showTime();//調(diào)用
2.創(chuàng)建Object實例
復(fù)制代碼 代碼如下:
var clock = new Object();
clock.hour=12;
clock.minute=10;
clock.showHour=function(){alert(clock.hour);};
clock.showHour();//調(diào)用
由此可見 屬性是可以動態(tài)添加，修改的
對象創(chuàng)建模式：
1.工廠模式：就是一個函數(shù)，然后放入?yún)?shù)，返回對象，流水線工作
復(fù)制代碼 代碼如下:
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();//調(diào)用
優(yōu)點：總算優(yōu)點抽象的概念了。但是不能識別對象的類型呢！
2.構(gòu)造函數(shù)模式
復(fù)制代碼 代碼如下:
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關(guān)鍵字是必須，如果不加，clock就不會當成構(gòu)造函數(shù)調(diào)用，而只是一個普通的函數(shù)。同時，還會意外地給他的外部作用域即window添加屬性，因為此時構(gòu)造函數(shù)內(nèi)部的this已經(jīng)映射到了外部作用域了。所以為了安全起見，可以這樣創(chuàng)建
復(fù)制代碼 代碼如下:
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");
}
}
構(gòu)造函數(shù)的缺點：由于this指針在對象實例的時候發(fā)生改變指向新的實例。這時新實例的方法也要重新創(chuàng)建，如果n個實例就要n次重建相同的方法。于是讓我們來揭開原型模式吧
3.原型模式
復(fù)制代碼 代碼如下:
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除了具有構(gòu)造函數(shù)定義的屬性和方法外（注意，只是構(gòu)造函數(shù)中的）,還有一個指向構(gòu)造函數(shù)的原型的指針，ECMAScript管他叫[[prototype]]，這樣實例化對象的時候，原型對象的方法并沒有在某個具體的實例中，因為原型沒有被實例。（廢話有點多，沒有誤導(dǎo)您吧。別暈）
所以這種模式定義的對象，在調(diào)用方法的時候過程：調(diào)用newClock.showTime();先看實例中有沒有，有調(diào)之，無追蹤到原型，有調(diào)之，無出錯，調(diào)用失敗。
當然可以這樣寫：
復(fù)制代碼 代碼如下:
function clock(hour,minute,second){
}
clock.prototype={
constructor:clock, //必須手動設(shè)置這個屬性，不然就斷了與構(gòu)造函數(shù)的聯(lián)系了。沒有實例共享原型的意義了。
hour:12,
minute:12,
second:12,
showTime:function(){
alert(this.hour+":"+this.minute+":"+this.second)
}
}
var newClock = new clock();
newClock.showTime();
注意：實例與構(gòu)造函數(shù)原型的聯(lián)系也是通過指針來聯(lián)系的，故可以動態(tài)添加修改原型的方法。
這種純原型的模式問題也很明顯，所有的屬性，方法都是共享的，不能讓對象具體化。常常我們想每個對象有自己的屬性。于是，結(jié)合前兩種，產(chǎn)生新的模式
4.構(gòu)造-原型組合模式。
復(fù)制代碼 代碼如下:
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();
這里我們將屬性放在構(gòu)造函數(shù)中，更顯得對象的具體性。
您可能感興趣的文章:
- js面向?qū)ο笾Ｒ妱?chuàng)建對象的幾種方式(工廠模式、構(gòu)造函數(shù)模式、原型模式)
- 從面試題學(xué)習(xí)Javascript 面向?qū)ο螅▌?chuàng)建對象）
- 學(xué)習(xí)javascript面向?qū)ο?掌握創(chuàng)建對象的9種方式
- 詳解JavaScript基于面向?qū)ο笾畡?chuàng)建對象（1）
- 詳解JavaScript基于面向?qū)ο笾畡?chuàng)建對象（2）
- JavaScript面向?qū)ο蟪绦蛟O(shè)計創(chuàng)建對象的方法分析
- JavaScript 三種創(chuàng)建對象的方法
- JS 創(chuàng)建對象(常見的幾種方法)
- js創(chuàng)建對象的幾種常用方式小結(jié)(推薦)
- javascript面向?qū)ο髣?chuàng)建對象的方式小結(jié)
相關(guān)文章
js面向?qū)ο笤O(shè)計用{}好還是function(){}好(構(gòu)造函數(shù))
js面向?qū)ο笤O(shè)計用{}好還是function(){}好,大家給予了回復(fù)，感覺不錯，特分享給大家。2011-10-10
項目中需要比較兩個對象是否相等，給Object對象開展了（別緊張，別說我把它污染了），一個實現(xiàn)而已，象java一樣可以只給自己想要的類重寫equals方法。2011-02-02
javascript是基于對象的編程語言。從window到document，從方法到類，從object到Array都是對象。2009-09-09
主要有三種方法: 1. this.method=Parent; this.method=Parent's constructor 2. Parent.call(this,arg,arg,arg.....);3.Parent.apply(this,arg.arg...) //for Array 還是來點實際的吧...2008-11-11
繼承,通俗地說,之前你寫過一些類,這些類中有一些是而你現(xiàn)在要寫的類的功能的子集或者基本相同,那么你不用完全重新寫一個新的類,你可以把之前寫的類拿過來使用.這樣的一種代碼重用過程就叫做繼承2011-05-05
工廠模式 初級開發(fā)者可能會這樣定義對象2009-03-03
關(guān)于javascript function對象那些迷惑分析
關(guān)于javascript function對象那些迷惑分析，學(xué)習(xí)js面向?qū)ο蟮呐笥芽梢詤⒖枷隆?/div> 2011-10-10
研究了一下 jabsorb，寫了幾個簡單的例子，希望能夠幫助菜鳥快速入門。2008-10-10
沙箱模式常見于YUI3 core,它是一種采用同一構(gòu)造器（Constructor）生成彼此獨立且互不干擾（self-contained）的實例對象，而從避免污染全局對象的方法2010-09-09
一個Base類，包含基本的方法，大家可以在這個基礎(chǔ)上拓展下功能。2009-07-07最新評論