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