javascript - 如何在ES6中使用 "this"中的类的 "callbacks"？

Question

我正在使用 Babel 和 ES2015。并想在方法内部的callback内部使用this。

class baz {
  bar = "xxx";
  foo() {
    x(function() {
      console.log(this.bar);
    });
  }
}

function x(callback) {
  return callback();
}
var y = new baz();
y.foo();

https://jsfiddle.net/dnthehnt/7/我得到了

TypeError: this is undefined

因为据我了解，这是指x()中的回调函数。作为解决方案，我使用

class baz {
  bar = "xxx";
  foo() {
    var bar = this.bar;//<=====
    x(function() {
      console.log(bar);//<=====
    });
  }
}

function x(callback) {
  return callback();
}
var y = new baz();
y.foo();

https://jsfiddle.net/dnthehnt/6/并得到

xxx

这是解决方案，但如果您有大量代码，它会变得非常困惑且难以编写。使用this有更好的解决方案吗？或者任何其他 ES6 使用回调和 this 的规则。

Answer 1

研究箭头函数，特别是与经典函数相比，箭头函数处理 this 的方式。

class baz {
  constructor() { this.bar = "xxx"; }
  foo() {
    x(() => {
      console.log(this.bar);
    });
  }
}

如果在调用 x 和调用回调之间更改 bar，则使用经典函数的解决方案将不起作用。

这就是你应该如何使用经典函数来做到这一点

class baz {
  constructor() { this.bar = "xxx"; }
  foo() {
    const self = this;
    x(function () {
      console.log(self.bar);
    });
  }
}

或者我想你可以使用bind。

class baz {
  constructor() { this.bar = "xxx"; }
  foo() {
    x((function () {
      console.log(this.bar);
    }).bind(this));
  }
}