快捷導(dǎo)航

JavaScript 嵌套函數(shù)指向this對(duì)象錯(cuò)誤的解決方法

更新時(shí)間：2010年03月15日 11:16:32 作者：

JavaScript對(duì)于全局函數(shù)內(nèi)的this綁定為全局對(duì)象，而對(duì)于嵌套函數(shù)也采用了相同的解釋。

先看一段嵌套了兩層function的JavaScript代碼：

 
var me = { 
name : 'Jimbor', 
blog : 'http://jmedia.cn/', 
sayMyName : function(){ 
var pre = 'My name is: '; 
function displayName(){ 
alert(pre + this.name); 
} 
displayName(); 
} 
} 
me.sayMyName(); 

從代碼上看，我們希望通過sayMyName()的調(diào)用來顯示me的name屬性，即：My name is: Jimbor。但瀏覽器的執(zhí)行結(jié)果是：

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

My name is:

是什么原因使name屬性沒有正確顯示呢？原來JavaScript對(duì)于全局函數(shù)內(nèi)的this綁定為全局對(duì)象，而對(duì)于嵌套函數(shù)也采用了相同的解釋。這個(gè)錯(cuò)誤產(chǎn)生的后果是不能輕易使用嵌套函數(shù)來完成某些特殊的任務(wù)，因?yàn)檫@些函數(shù)對(duì)this所指向的對(duì)象解釋不同。
當(dāng)然對(duì)于這個(gè)例子，我們完全可以不用嵌套的函數(shù)來完成相應(yīng)的功能。但是對(duì)于某些應(yīng)用可能會(huì)需要這種結(jié)構(gòu)。幸運(yùn)的是，我們還是有辦法來糾正這個(gè)錯(cuò)誤的。
方法一：用apply()函數(shù)

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

apply(this_obj, params_array)

apply()函數(shù)可以在調(diào)用某個(gè)函數(shù)時(shí)重寫this所指向的對(duì)象，它接受兩個(gè)參數(shù)，第一個(gè)this_obj即想要重寫this所指向的對(duì)象，params_array則是用來傳遞給調(diào)用函數(shù)的參數(shù)數(shù)組。我們把原來的代碼改寫為：

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

 
var me = { 
name : 'Jimbor', 
blog : 'http://jmedia.cn/', 
sayMyName : function(){ 
var pre = 'My name is: '; 
function displayName(){ 
alert(pre + this.name); 
} 
displayName.apply(me); 
} 
} 
me.sayMyName(); 

再看瀏覽器執(zhí)行結(jié)果：
My name is: Jimbor
類似的函數(shù)還有call()。區(qū)別是call()傳參的方式是一個(gè)接一個(gè)而不是打包成一個(gè)數(shù)組。
方法二：用that替換this
即我們可以在最外層的函數(shù)定義一個(gè)變量來指向this所指向的對(duì)象，一旦內(nèi)部的函數(shù)需要調(diào)用this時(shí)，我們就用這個(gè)定義的變量。通常根據(jù)習(xí)慣，會(huì)將這個(gè)變量命名為that。那么原來的代碼可以改成這樣：

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

 
var me = { 
name : 'Jimbor', 
blog : 'http://jmedia.cn/', 
sayMyName : function(){ 
var pre = 'My name is: '; 
var that = this; 
function displayName(){ 
alert(pre + that.name); 
} 
displayName(); 
} 
} 
me.sayMyName(); 

很好用，不是嗎？因?yàn)椴粫?huì)涉及到具體的對(duì)象指定，所以更推薦第二種方法。

您可能感興趣的文章: