JavaScript 嵌套函數(shù)指向this對(duì)象錯(cuò)誤的解決方法
2024-05-06 14:11:03
供稿：網(wǎng)友
先看一段嵌套了兩層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é)果是：
代碼如下:
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ù)
代碼如下:
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ù)組。我們把原來的代碼改寫為：
代碼如下:
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。那么原來的代碼可以改成這樣：
代碼如下:
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ì)象指定，所以更推薦第二種方法。
