资源

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。

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

相当于上述代码段的严格ES5也会使用函数文字作为class XXXX { init() { MyOBJ.on('EVENTNAME', function(event) { this.myfunction(event)); }.bind(this)); } }的回调：

#include <iomanip>
#include <iostream>
using namespace std;

void calcPopulation(int population, int death, int birth, float birthRate, float deathRate);

int main() {

    int population = 0, death = 0, birth = 0;

    cout << "Enter the total population: ";
    cin >> population;
    if (population <= 2) {
        population = 2;
    }

    cout << "Enter annual number of births: ";
    cin >> birth;
    if (birth < 0) {
        birth = 0;
    }

    cout << "Enter annual number of deaths: ";
    cin >> death;
    if (death < 0) {
        death = 0;
    }
    cout << endl;
    cout << "Population Statistic" << endl;
    cout << endl;

    float birthRate = (birth / population);
    float deathRate = (death / population);

    cout << "Population: " << population << endl;

    calcPopulation(population, death, birth, birthRate, deathRate);

}
void calcPopulation(int population, int death, int birth, float birthRate, float deathRate) {
    cout << fixed;
    cout << "Birth Rate: " << setprecision(3) << birthRate << endl;
    cout << "Death Rate: " << setprecision(3) << deathRate << endl;

}

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 — Arrow Functions and Lexical this

ES6 Javascript标准中最令人期待的新功能之一是Arrow Function Expression。它承诺比前一个函数表达式更短的语法。此外，新箭头函数如何绑定，或实际上不绑定它自己的这个。 箭头函数在词法上绑定它们的上下文，因此这实际上是指原始上下文。

Answer 3

根据您将功能添加到对象的方式，您可以执行以下操作：

main.*.bundle.js

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

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可能会失败，因为EventEmitter实际上替换this.someMethod内的this的上下文调用。 https://github.com/sinonjs/sinon/issues/1536描述了这个问题。

如何在es6中替换`bind（this）`

3 个答案:

资源