快捷導(dǎo)航

javascript 構(gòu)造函數(shù)強(qiáng)制調(diào)用經(jīng)驗(yàn)總結(jié)

更新時(shí)間：2012年12月02日 10:10:06 作者：

本文將介紹javascript構(gòu)造函數(shù)調(diào)用方面的案例應(yīng)用，需要了解的朋友可以參考下

興致勃勃地定義了下面這么個(gè)構(gòu)造函數(shù)：

 
var Coder = function( nick ){ 
this.nick = nick; 
}; 

定義構(gòu)造函數(shù)結(jié)束后呢？沒錯(cuò)，趕緊實(shí)例化：
var coder = Coder( 'casper' );
這個(gè)coder兄弟叫什么名字？趕緊打印下：

復(fù)制代碼代碼如下:

 
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)下手腳：

復(fù)制代碼代碼如下:

 
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)然有：

復(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會(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é)

您可能感興趣的文章: