使用“this”调用回调函数的正确方法

Question

这个上下文是否适合使用正确的“this”上下文调用回调函数呢？ data.on('load', doSomething.call(this)); 或者使用额外的箭头函数更好（是的，我正在使用babel进行编译）。

data.on('load', () => {
  doSomething.call(this);
});

两种方法在Chrome中似乎有相同的结果，但尚未检查其他浏览器。是否存在最佳实践或其中一种方法得到更好的支持？

- ssylviageo

Answer 1

以下代码会立即调用 doSomething，并将返回的值赋为事件监听器：

data.on('load', doSomething.call(this));

你可能需要使用bind代替：

data.on('load', doSomething.bind(this));

你的箭头函数也可行。

- Oriol

Answer 2

你需要创建一个函数，使用你期望的 this 值。

bind 创建一个稍后调用的函数，call 只是调用函数并返回结果。

data.on('load', doSomething.bind(this));

回答你关于箭头语法的问题，虽然它在功能上类似于 call：()=> { doSomething.call(this) }，但生成的代码有一个额外的闭包层。

function() {
    doSomething.call(this);
}.bind(this);

用这种方式做会有一点性能损失，但应该可以忽略不计。

- TbWill4321