javascript 構(gòu)造函數(shù)強制調(diào)用經(jīng)驗總結(jié)
更新時間:2012年12月02日 10:10:06 作者:
本文將介紹javascript構(gòu)造函數(shù)調(diào)用方面的案例應(yīng)用,需要了解的朋友可以參考下
興致勃勃地定義了下面這么個構(gòu)造函數(shù):
var Coder = function( nick ){
this.nick = nick;
};
定義構(gòu)造函數(shù)結(jié)束后呢?沒錯,趕緊實例化:
var coder = Coder( 'casper' );
這個coder兄弟叫什么名字?趕緊打印下:
console.log( coder.nick ); //undefined
= =b 竟然是undefined?。≡倩剡^頭看看實例化的那個語句,不難發(fā)現(xiàn)問題出在哪里:少了個new
var coder = Coder( 'casper' ); //當(dāng)作普通的函數(shù)來調(diào)用,故內(nèi)部的this指針其實指向window對象
console.log( window.nick); //輸出:casper
var coder = new Coder( 'casper' ); //加上new,一切皆不同,this正確地指向了當(dāng)前創(chuàng)建的實例
console.log( coder.nick ); //輸出:casper
關(guān)于this指針的指向問題不是本文討論的內(nèi)容,可以參考下犀牛書相關(guān)章節(jié)
這樣的錯誤貌似挺低級的,但出現(xiàn)的概率挺高的,腫么去避免或減少這種情況的發(fā)生呢?
可以在內(nèi)部實現(xiàn)里面動下手腳:
var Coder = function( nick ){
if( !(this instanceof Coder) ){
return new Coder( nick );
}
this.nick = nick;
};
其實很簡單,實例化的時候,內(nèi)部判斷下,當(dāng)前this指向的對象的類型即可,如果非當(dāng)前構(gòu)造函數(shù)的類型,強制重新調(diào)用一遍構(gòu)造函數(shù)。
突然覺得Coder這名字不夠洋氣?想用Hacker,好吧,我改。。。數(shù)了下,一共有三處要改,這不科學(xué),有沒有辦法只把構(gòu)造函數(shù)的名字改了就行?
當(dāng)然有:
var Coder = function( nick ){
if( !(this instanceof arguments.callee) ){
return new arguments.callee( nick );
}
this.nick = nick;
};
tips:據(jù)說在ES 5的嚴(yán)格模式下面arguments.callee會被禁用,不過僅當(dāng)ES 5普及同時你指定了要使用嚴(yán)格模式,否則還是可以用的發(fā)散下思維:在JQ里面包打天下所向披靡的$,大家都知道它會返回一個jquery對象,如下:
var jObject = $('#node_id');
有沒有發(fā)現(xiàn),這里同樣沒有new!應(yīng)該猜到怎么回事了吧。原理是差不多的,不過里面的實現(xiàn)要復(fù)雜得多,有空再把JQ里面的實現(xiàn)拔下寫下總結(jié)
復(fù)制代碼 代碼如下:
var Coder = function( nick ){
this.nick = nick;
};
定義構(gòu)造函數(shù)結(jié)束后呢?沒錯,趕緊實例化:
var coder = Coder( 'casper' );
這個coder兄弟叫什么名字?趕緊打印下:
復(fù)制代碼 代碼如下:
console.log( coder.nick ); //undefined
= =b 竟然是undefined?。≡倩剡^頭看看實例化的那個語句,不難發(fā)現(xiàn)問題出在哪里:少了個new
var coder = Coder( 'casper' ); //當(dāng)作普通的函數(shù)來調(diào)用,故內(nèi)部的this指針其實指向window對象
console.log( window.nick); //輸出:casper
var coder = new Coder( 'casper' ); //加上new,一切皆不同,this正確地指向了當(dāng)前創(chuàng)建的實例
console.log( coder.nick ); //輸出:casper
關(guān)于this指針的指向問題不是本文討論的內(nèi)容,可以參考下犀牛書相關(guān)章節(jié)
這樣的錯誤貌似挺低級的,但出現(xiàn)的概率挺高的,腫么去避免或減少這種情況的發(fā)生呢?
可以在內(nèi)部實現(xiàn)里面動下手腳:
復(fù)制代碼 代碼如下:
var Coder = function( nick ){
if( !(this instanceof Coder) ){
return new Coder( nick );
}
this.nick = nick;
};
其實很簡單,實例化的時候,內(nèi)部判斷下,當(dāng)前this指向的對象的類型即可,如果非當(dāng)前構(gòu)造函數(shù)的類型,強制重新調(diào)用一遍構(gòu)造函數(shù)。
突然覺得Coder這名字不夠洋氣?想用Hacker,好吧,我改。。。數(shù)了下,一共有三處要改,這不科學(xué),有沒有辦法只把構(gòu)造函數(shù)的名字改了就行?
當(dāng)然有:
復(fù)制代碼 代碼如下:
var Coder = function( nick ){
if( !(this instanceof arguments.callee) ){
return new arguments.callee( nick );
}
this.nick = nick;
};
tips:據(jù)說在ES 5的嚴(yán)格模式下面arguments.callee會被禁用,不過僅當(dāng)ES 5普及同時你指定了要使用嚴(yán)格模式,否則還是可以用的發(fā)散下思維:在JQ里面包打天下所向披靡的$,大家都知道它會返回一個jquery對象,如下:
var jObject = $('#node_id');
有沒有發(fā)現(xiàn),這里同樣沒有new!應(yīng)該猜到怎么回事了吧。原理是差不多的,不過里面的實現(xiàn)要復(fù)雜得多,有空再把JQ里面的實現(xiàn)拔下寫下總結(jié)
您可能感興趣的文章:
- js動態(tài)調(diào)用css屬性的小規(guī)律及實例說明
- JavaScript 錯誤處理與調(diào)試經(jīng)驗總結(jié)
- js下關(guān)于onmouseout、事件冒泡的問題經(jīng)驗小結(jié)
- 寫給想學(xué)習(xí)Javascript的朋友一點學(xué)習(xí)經(jīng)驗小結(jié)
- javascript 操作select下拉列表框的一點小經(jīng)驗
- JS前端框架關(guān)于重構(gòu)的失敗經(jīng)驗分享
- JS效率個人經(jīng)驗談(8-15更新),加入range技巧
- javascript 框架小結(jié) 個人工作經(jīng)驗
- jquery.validate.js插件使用經(jīng)驗記錄
- Javascript 多瀏覽器兼容總結(jié)(實戰(zhàn)經(jīng)驗)
- 使用node.js半年來總結(jié)的 10 條經(jīng)驗
- 【經(jīng)驗總結(jié)】編寫JavaScript代碼時應(yīng)遵循的14條規(guī)律
相關(guān)文章
JavaScript構(gòu)造函數(shù)原理及實現(xiàn)流程解析
這篇文章主要介紹了JavaScript構(gòu)造函數(shù)原理及實現(xiàn)流程解析,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-11-11
Easyui Tree獲取當(dāng)前選擇節(jié)點的所有頂級父節(jié)點
這篇文章主要介紹了Easyui Tree獲取當(dāng)前選擇節(jié)點的所有頂級父節(jié)點,以及easyUI Tree顯示選中節(jié)點的所有父節(jié)點的實現(xiàn)代碼,需要的朋友可以參考下2017-02-02
javascript制作照片墻及制作過程中出現(xiàn)的問題
這篇文章主要介紹了javascript制作照片墻及制作過程中出現(xiàn)的問題,感興趣的朋友可以參考一下2016-04-04
javascript 根據(jù)指定字符把字符串拆分為數(shù)組
javascript 根據(jù)指定字符把字符串拆分為數(shù)組2009-05-05
基于 Bootstrap Datetimepicker 聯(lián)動
這篇文章主要介紹了基于bootstrap datetimepicker 聯(lián)動效果,需要的朋友可以參考下2017-08-08
JavaScript實現(xiàn)內(nèi)容滾動與導(dǎo)航標(biāo)簽互動關(guān)聯(lián)方案
這篇文章主要介紹了JavaScript實現(xiàn)內(nèi)容滾動與導(dǎo)航標(biāo)簽互動關(guān)聯(lián)方案,主要根據(jù)滾動左側(cè)內(nèi)容,關(guān)聯(lián)激活右側(cè)導(dǎo)航節(jié)點展開相應(yīng)介紹,需要的小伙伴可以參考一下2022-06-06
JavaScript結(jié)合Canvas繪畫畫運動小球
這篇文章主要介紹了JavaScript結(jié)合Canvas畫運動小球,canvas被稱為畫布,可以結(jié)合javascript實現(xiàn)繪制各種圖形,制作各種炫酷的動畫效果,下面文章更多詳細(xì)內(nèi)容介紹需要的小伙伴可以參考一下2022-03-03
Javascript document.referrer判斷訪客來源網(wǎng)址
用簡單幾行的javascript,就可抓到使用的來源,以及作出一些防范的措施。2009-12-12

