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

Question

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

Answer 1

新手最常见的错误之一，你在对象外面执行的函数，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);

Answer 2

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

Answer 3

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)

Answer 4

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

Answer 5

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