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);

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章