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

