如何在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()，也就是this在init.

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

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

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

Answer 2

替换这个

\n\n

this.myfunction.bind(this)\n

\n\n

对此

\n\n

\n() => {}\n

\n\n

您的事件绑定如下所示：

\n\n

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

\n\n

资源

\n\n

\n
• Javascript ES6\xe2\x80\x8a\xe2\x80\x94\xe2\x80\x8a箭头函数和词法this\n\n

  \n

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

  \n

\n

\n