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è)偷哪J絾栴}也很明顯,所有的屬性,方法都是共享的,不能讓對(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è)偷哪J絾栴}也很明顯,所有的屬性,方法都是共享的,不能讓對(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ū)ο笾R妱?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)文章
javascript 設(shè)計(jì)模式之單體模式 面向?qū)ο髮W(xué)習(xí)基礎(chǔ)
單體是在腳本加載時(shí)創(chuàng)建的,能將一系列有關(guān)聯(lián)的變量和方法組織為一個(gè)邏輯單元,邏輯單元里面的內(nèi)容通過單一的變量進(jìn)行訪問,也是筆記基礎(chǔ)與常用的面向?qū)ο蟮亩x方法。2010-04-04- JavaScript 原型繼承,學(xué)習(xí)js面向?qū)ο蟮呐笥芽梢钥纯础?/div> 2011-12-12
javascript 面向?qū)ο缶幊?萬物皆對(duì)象
javascript幾乎成了如今web開發(fā)人員必學(xué)必會(huì)的一門語言,但很多人卻只停在了一些表單驗(yàn)證等基礎(chǔ)操作層面上,在面向?qū)ο笳Z言大行其道的當(dāng)下,我們需要去學(xué)習(xí)javascript的面向?qū)ο蟮闹R(shí),以便更好的掌握javascript、為深入理解各種腳本框架打好基礎(chǔ)。2009-09-09編寫可維護(hù)面向?qū)ο蟮腏avaScript代碼[翻譯]
編寫可維護(hù)面向?qū)ο蟮腏avaScript代碼[翻譯],學(xué)習(xí)js面向?qū)ο缶帉懙呐笥芽梢詤⒖枷隆?/div> 2011-02-02學(xué)習(xí)面向?qū)ο笾嫦驅(qū)ο蟮幕靖拍?對(duì)象和其他基本要素
學(xué)習(xí)面向?qū)ο笾嫦驅(qū)ο蟮幕靖拍?對(duì)象和其他基本要素2010-11-11JavaScript 類的定義和引用 JavaScript高級(jí)培訓(xùn) 自定義對(duì)象
在Java語言中,我們可以定義自己的類,并根據(jù)這些類創(chuàng)建對(duì)象來使用,在Javascript中,我們也可以定義自己的類,例如定義User類、Hashtable類等等。2010-04-04最新評(píng)論
大家感興趣的內(nèi)容
- 1JavaScript 三種創(chuàng)建對(duì)象的方法
- 2JS 創(chuàng)建對(duì)象(常見的幾種方法)
- 3JS類的封裝及實(shí)現(xiàn)代碼
- 4詳解new function(){}和function(){
- 5javascript復(fù)制對(duì)象使用說明
- 6js創(chuàng)建對(duì)象的幾種常用方式小結(jié)(推薦)
- 7Javascript 面向?qū)ο螅ㄒ唬?共有方法,私有方法,特
- 8改變javascript函數(shù)內(nèi)部this指針指向的三種方法
- 9Javascript Object.extend
- 10JavaScript定義類或函數(shù)的幾種方式小結(jié)
最近更新的內(nèi)容
- javascript 面向?qū)ο缶幊?萬物皆對(duì)象
- 詳解new function(){}和function(){}() 區(qū)別分析
- javascript new后的constructor屬性
- Javascript面向?qū)ο缶幊蹋ㄈ?非構(gòu)造函數(shù)的繼承
- jabsorb筆記_幾個(gè)小例子
- JavaScript 面向?qū)ο缶幊蹋?) 基礎(chǔ)
- JavaScript 基于原型的對(duì)象(創(chuàng)建、調(diào)用)
- javascript 對(duì)象定義方法 簡(jiǎn)單易學(xué)
- js創(chuàng)建對(duì)象的幾種常用方式小結(jié)(推薦)
- 收集的幾個(gè)不錯(cuò)的javascript類小例子