JavaScript 嵌套函數指向this對象錯誤的解決方案

來源:互聯網
上載者:User

先看一段嵌套了兩層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()的調用來顯示me的name屬性,即:My name is: Jimbor。但瀏覽器的執行結果是: 複製代碼 代碼如下:My name is:

是什麼原因使name屬性沒有正確顯示呢?原來JavaScript對於全域函數內的this綁定為全域對象,而對於嵌套函數也採用了相同的解釋。這個錯誤產生的後果是不能輕易使用嵌套函數來完成某些特殊的任務,因為這些函數對this所指向的對象解釋不同。
當然對於這個例子,我們完全可以不用嵌套的函數來完成相應的功能。但是對於某些應用可能會需要這種結構。幸運的是,我們還是有辦法來糾正這個錯誤的。
方法一:用apply()函數 複製代碼 代碼如下:apply(this_obj, params_array)

apply()函數可以在調用某個函數時重寫this所指向的對象,它接受兩個參數,第一個this_obj即想要重寫this所指向的對象,params_array則是用來傳遞給調用函數的參數數組。我們把原來的代碼改寫為: 複製代碼 代碼如下: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();

再看瀏覽器執行結果:
My name is: Jimbor
類似的函數還有call()。區別是call()傳參的方式是一個接一個而不是打包成一個數組。
方法二:用that替換this
即我們可以在最外層的函數定義一個變數來指向this所指向的對象,一旦內部的函數需要調用this時,我們就用這個定義的變數。通常根據習慣,會將這個變數命名為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();

很好用,不是嗎?因為不會涉及到具體的對象指定,所以更推薦第二種方法。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.