Question

不知道问题的标题是否过于混乱，但我在这里。

如果我有类似的话：

var Test = function(){
    this.foo = a;
}

Test.prototype.init = function() {
    $(document).on('change', '.form-control', this.myFunction);
}

Test.prototype.myFunction = function() {
    console.log(this.foo);
    console.log(this);
}

我的理解是，当打印＆＃39;在myFunction中，它将打印调用函数的执行上下文，在这种情况下，它将打印 .on的执行上下文（＆＃39;更改＆＃39; ...）。因此，当打印 this.foo 时，由于它不存在于该上下文中，因此将打印出 undefined 。

要解决此问题并访问 this.foo ，请执行以下操作：

Test.prototype.init = function() {
    $(document).on('change', '.form-control', (this.myFunction).bind(this));
}

Test.prototype.myFunction = function() {
    console.log(this.foo);
    console.log(this);
}

我绑定＆＃39; 此＆＃39;到函数调用，所以 this.foo 会被打印出来，这是好的，但我的问题是，在这种情况下我怎样才能访问 .on的执行上下文（＆＃39;改变＆＃39; ...） ???意思是，我如何访问＆＃39; 此＆＃39;我在绑定之前最初访问过的？

由于

Answer 1

而不是绑定，只需使用引用变量。它将维护上下文，并且仍然允许您使用.on的上下文this

Test.prototype.init = function () {

    var context = this;

    $(document).on('change', '.form-control', function () {
        context.myFunction();
        console.log(this); // `this` has context to the onchange
    });
};

Answer 2

绑定函数this将始终绑定到相同的值。这意味着您无法再访问＆＃34;原始＆＃34;值。

如果你想同时使用this es，你必须使用一个this而另一个作为参数。或两者都作为参数。

＆＃13;

var Test = function(a) {
  this.foo = a;
  this.init();
}

Test.prototype.init = function() {
  // Set `this` to the calling test object, and window
  // (which would be the original context in this case)
  // as first parameter of `myFunction`. Swap the arguments
  // if you wish to use them the other way around.
  window.setTimeout(this.myFunction.bind(this, window), 500);
};

Test.prototype.myFunction = function(that) {
  console.log(this.foo);
  console.log(that.foo);
};

new Test(5);

＆＃13;

顺便说一下，ES6 arrow functions保留了他们定义的环境，这意味着this会指向您的测试对象。</ p>

Test.prototype.init = function() {
  window.setTimeout(() => this.myFunction(window), 500);
};

访问当前元素＆＃39;这个＆＃39;对象当外部＆＃39;这个＆＃39;是绑定

2 个答案: