javascript 構(gòu)造函數(shù)強制調(diào)用經(jīng)驗總結(jié)
更新時間:2012年12月02日 10:10:06 作者:
本文將介紹javascript構(gòu)造函數(shù)調(diào)用方面的案例應用,需要了解的朋友可以參考下
興致勃勃地定義了下面這么個構(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' ); //當作普通的函數(shù)來調(diào)用,故內(nèi)部的this指針其實指向window對象
console.log( window.nick); //輸出:casper
var coder = new Coder( 'casper' ); //加上new,一切皆不同,this正確地指向了當前創(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)部判斷下,當前this指向的對象的類型即可,如果非當前構(gòu)造函數(shù)的類型,強制重新調(diào)用一遍構(gòu)造函數(shù)。
突然覺得Coder這名字不夠洋氣?想用Hacker,好吧,我改。。。數(shù)了下,一共有三處要改,這不科學,有沒有辦法只把構(gòu)造函數(shù)的名字改了就行?
當然有:
var Coder = function( nick ){
if( !(this instanceof arguments.callee) ){
return new arguments.callee( nick );
}
this.nick = nick;
};
tips:據(jù)說在ES 5的嚴格模式下面arguments.callee會被禁用,不過僅當ES 5普及同時你指定了要使用嚴格模式,否則還是可以用的發(fā)散下思維:在JQ里面包打天下所向披靡的$,大家都知道它會返回一個jquery對象,如下:
var jObject = $('#node_id');
有沒有發(fā)現(xiàn),這里同樣沒有new!應該猜到怎么回事了吧。原理是差不多的,不過里面的實現(xiàn)要復雜得多,有空再把JQ里面的實現(xiàn)拔下寫下總結(jié)
復制代碼 代碼如下:
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' ); //當作普通的函數(shù)來調(diào)用,故內(nèi)部的this指針其實指向window對象
console.log( window.nick); //輸出:casper
var coder = new Coder( 'casper' ); //加上new,一切皆不同,this正確地指向了當前創(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)部判斷下,當前this指向的對象的類型即可,如果非當前構(gòu)造函數(shù)的類型,強制重新調(diào)用一遍構(gòu)造函數(shù)。
突然覺得Coder這名字不夠洋氣?想用Hacker,好吧,我改。。。數(shù)了下,一共有三處要改,這不科學,有沒有辦法只把構(gòu)造函數(shù)的名字改了就行?
當然有:
復制代碼 代碼如下:
var Coder = function( nick ){
if( !(this instanceof arguments.callee) ){
return new arguments.callee( nick );
}
this.nick = nick;
};
tips:據(jù)說在ES 5的嚴格模式下面arguments.callee會被禁用,不過僅當ES 5普及同時你指定了要使用嚴格模式,否則還是可以用的發(fā)散下思維:在JQ里面包打天下所向披靡的$,大家都知道它會返回一個jquery對象,如下:
var jObject = $('#node_id');
有沒有發(fā)現(xiàn),這里同樣沒有new!應該猜到怎么回事了吧。原理是差不多的,不過里面的實現(xiàn)要復雜得多,有空再把JQ里面的實現(xiàn)拔下寫下總結(jié)
您可能感興趣的文章:
- js動態(tài)調(diào)用css屬性的小規(guī)律及實例說明
- JavaScript 錯誤處理與調(diào)試經(jīng)驗總結(jié)
- js下關(guān)于onmouseout、事件冒泡的問題經(jīng)驗小結(jié)
- 寫給想學習Javascript的朋友一點學習經(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代碼時應遵循的14條規(guī)律
相關(guān)文章
TypeScript中的interface與type實戰(zhàn)
這篇文章主要介紹了TypeScript中的interface與type詳解,它們都是用來定義類型的強大工具,在實際開發(fā)中,你可以根據(jù)具體情況選擇使用 interface 或 type,或者甚至將它們結(jié)合起來使用,需要的朋友可以參考下2023-06-06
微信小程序?qū)崿F(xiàn)購物車選擇規(guī)格顏色效果
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)購物車選擇規(guī)格顏色選中效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-01-01
javascript監(jiān)聽頁面刷新和頁面關(guān)閉事件方法詳解
本文主要介紹了javascript監(jiān)聽頁面刷新和頁面關(guān)閉事件的方法,具有一定的參考價值,下面跟著小編一起來看下吧2017-01-01
three.js實現(xiàn)圍繞某物體旋轉(zhuǎn)
本篇文章主要介紹了three.js實現(xiàn)圍繞某物體旋轉(zhuǎn)的示例代碼。具有很好的參考價值,下面跟著小編一起來看下吧2017-01-01

