如何在 es6 中替换`bind(this)`

Question

我读了一些代码：

class XXXX {
  init() {
    MyOBJ.on('EVENTNAME', this.myfunction.bind(this)); // Line3, MyOBJ extends EventEmitter
  }
}

只是好奇如何使用箭头功能来代替Line3？谢谢

Answer 1

Function.prototype.bind

创建一个新函数，在调用时，将其 this 关键字设置为提供的值，并在调用新函数时在任何提供的参数之前提供给定的参数序列。

这个具体示例 -

this.myFunction.bind(this)

- 实现的目标是能够传递对函数的引用（该函数恰好也被 this.myFunction 引用），同时确保对该函数的任何调用都是在

this

。

在 ES2015+ 中我们可以这样做：

class XXXX {
    init() {
        MyOBJ.on('EVENTNAME', (event) => this.myfunction(event));
    }
}

对于 ES2015 箭头函数

this

将在主体内作为箭头函数的声明 context。因此，在我们的例子中，

this.myFunction

在箭头函数中被调用，其上下文是调用

init()

的上下文，又名

this

内的

init

。

关键的区别在于，现在您实际上创建了一个调用表达式，而不是仅仅传递对函数的引用。这次给

MyOBJ.on

的参考是箭头函数。

严格的 ES5 相当于上面的代码片段，也会使用函数文字作为给

MyOBJ.on

:

的回调

class XXXX {
    init() {
        MyOBJ.on('EVENTNAME', function(event) {
            this.myfunction(event));
        }.bind(this));
    }
}

Answer 2

从此替换

this.myfunction.bind(this)

到此

() => {}

您的事件绑定如下所示：

class XXXX {
  someMethod() {}
  init() {
    MyOBJ.on('EVENTNAME', () => {
        this.someMethod(); // The originating context it's actually your class XXXX
    });
  }
}

资源

• Javascript ES6 — 箭头函数和词法

  this

ES6 Javascript 标准中最受期待的新功能之一是箭头函数表达式。它承诺比它的前身函数表达式更短的语法。此外，新的箭头函数如何绑定，或者实际上不绑定它自己的 this。 箭头函数按词法绑定其上下文，因此 this 实际上指的是原始上下文。

Answer 3

根据您如何将函数添加到对象中，您可以简单地执行以下操作：

MyOBJ.on('EVENTNAME', this.someMethod);

使用这样的箭头函数会将方法绑定到类的实例。

class XXXX {
  constructor() {
    this.init();
  };

  someMethod = () => {
    console.log('someMethod() called');
  };

  init = () => {
    MyOBJ.on('EVENTNAME', this.someMethod);
  };
}

const x = new XXXX();
const MyOBJ = new EventEmitter();
MyOBJ.emit('EVENTNAME'); // someMethod() called

注意：如果使用此方法，使用模拟来测试

this.someMethod

是否被调用可能会失败，因为在调用时，EventEmitter 实际上会替换

this

内的

someMethod

的上下文。 https://github.com/sinonjs/sinon/issues/1536描述了这个问题。