如何替换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将在主体中作为箭头函数的声明上下文。因此，在我们的例子中，在一个箭头函数中调用this.myFunction，该函数的上下文是调用init()的上下文。init中的this。

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

与上述代码片段等效的严格ES5也将使用函数文字作为对MyOBJ.on的回调

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

Answer 2

根据您将函数添加到对象的方式，您可以简单地执行以下操作：

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被调用时，它实际上替换了someMethod中this的上下文。https://github.com/sinonjs/sinon/issues/1536描述了这个问题。