首页 > 下面这段代码为什么不能实现正确逻辑?

下面这段代码为什么不能实现正确逻辑?

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

函数调用的时候,函数内部的this指向调用该函数的对象。而,helper函数的调用对象相当于是window.


新手最常见的错误之一,你在对象外面执行的函数,this就是Window,把this绑定给另一个变量就好了

var myNumber = {
  value: 1,
  add: function(i){
    var that = this;
    var helper = function(i){
        console.log(this);
          that.value += i;
    }
    helper(i);
  }
}
myNumber.add(1);

var myNumber = {
  value: 1,
  add: function(i){
    var helper = function(i){
        console.log(this);
          this.value += i;
    }.bind(this)
    helper(i);
  }
}
myNumber.add(1);
myNumber.add(1);
console.log(myNumber.value);

--update2--
对题主的代码进行了一点修改

var myNumber = {
  value: 1,
  add: function(i){
    var helper = function(i){
        console.log(this);
          this.value += i;
    }
    helper.call(myNumber,i);
  }
}
myNumber.add(1);

区别在于原来使用helper(i),改成了helper.call(myNumber, i);
这样子可以保证在helper函数内部的this对象指向的是myNumber,而不是原来的window对象。
如果不用helper函数的,可以简单点,

var MyNumber = {
        value : 1,
        add: function(i) {
                MyNumber.value += i;
        }
};

MyNumber.add(1);
console.log(MyNumber.value);

这样子呢?

--update--

var MyNumber = (function() {
        var value = 1;
        var helper = function(i) {
            value += i;
        };
        return {
            add: function(i) {
                helper(i);
            },
            get: function() {
               return value;
            }
        }
})();

MyNumber.add(1);
console.log(MyNumber.get());
MyNumber.add(1);
console.log(MyNumber.get());

this关键字指向错误,在这里如果你执行add方法里的逻辑this关键字指向是正确的,但是你这里还内部定义了一个函数闭包并执行,所里在内部定义的函数的关键字的指向就发生了改变

var myNumber = {
  value: 1,
  add: function(i){
    var helper = function(i){
        console.log(myNumber.value);
          myNumber.value += i;
    }
    helper(i);
  }
}

myNumber.add(1)
【热门文章】
【热门文章】