首頁 > web前端 > js教程 > 主體

js閉包中this指向的解決方法(程式碼)

不言
發布: 2018-08-23 15:47:01
原創
2312 人瀏覽過

這篇文章帶給大家的內容是關於js閉包中this指向的解決方法(程式碼),有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。

下面是一個問題,物件方法中定義的子函數,子函數執行時this指向哪裡? 
三個問題:  
#    (1)以下程式碼中列印的this是個什麼物件? 
   (2)這段程式碼能否實現讓myNumber.value加1的功能? 
   (3)在不放棄helper函數的前提下,有哪些修改方法可以達到正確的功能?

var myNumber = {
  value: 1,
  add: function(i){
    var helper = function(i){
        console.log(this);          
        this.value += i;
    }
    helper(i);
  }
}
myNumber.add(1);
登入後複製

1.this指向window物件(因為匿名函數的執行具有全域性,所以其this物件指向window);
2. 無法實作value加1(每個函數在被呼叫時都會自動取得兩個特殊變量,this和arguments,內部函數在搜尋這兩個物件時,只會搜尋到其活動物件為止,所以無法實作存取外部函數的this物件); 
3. 修改程式碼實作正確功能 
方法一:

var myNumber={
    value:1,
    add:function(i){
        var that=this;//定义变量that用于保存上层函数的this对象
        var helper=function(i){
             console.log(that);
        that.value+=i;
    }
    helper(i);
    }
}
myNumber.add(1);
登入後複製

方法二:

var myNumber={
    value:1,
    add:function(i){
        var helper=function(i){
            this.value+=i;
        }
        helper.apply(this,[i]);//使用apply改变helper的this对象指向,使其指向myNumber对象
    }
}
myNumber.add(1);
登入後複製

方法三:

var myNumber={
    value:1,
    add:function(i){
        var helper=function(i){
            this.value+=i;
        }.bind(this,i);//使用bind绑定,和apply相似,只是它返回的是对函数的引用,不会立即执行
        helper(i);
    }
}
myNumber.add(1);
登入後複製

相關推薦:

##js如何判斷瀏覽器是pc端還是行動端? (兩種方法)

js中自執行函數進行呼叫的兩種方法#

以上是js閉包中this指向的解決方法(程式碼)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!