Question

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

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：这是未定义的

因为据我所知，这引用了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使用回调的任何其他规则。

Answer 1

查看箭头函数，尤其是与经典函数相比，箭头函数处理this的方式。

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

如果在调用x和调用回调之间更改了条形码，那么使用经典函数的解决方案将无效。

这是你应该如何使用经典功能

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

如何在ES6的“回调”中使用“this”类？

1 个答案: