javascript - 为什么方法引用没有对此进行跟踪？

我正在使用Babel转换ES2015类:

class Foo {
    constructor(foo) {
        this.foo = foo;
    }

    sayFoo() {
        console.log(this.foo);
    }
}

如果我说类似fooVar.sayFoo()，则该类的工作与我期望的完全一样。但是，如果我尝试将该方法视为典型的JavaScript函数并将其作为参数(element.click(fooVar.sayFoo))传递，则当该方法实际运行时，其词法this是事件对象，而不是Foo的实例，因此this.foo是未定义的。

相反，由于我指定了Foo的实例，因此我希望fooVar.sayFoo绑定(bind)到fooVar的值。我必须编写一个额外的包装函数，以使其按预期工作。

我试图查看ES6规范，但无法弄清楚范围规则。根据规范，这种奇怪的作用域行为是否正确，还是某个地方的错误(例如，在Babel中)？

最佳答案

是。对于分配给prototype属性的函数，方法或多或少是语法糖。

仅箭头函数对this的处理不同。

但是，您可以将实例显式绑定(bind)到方法上，而无需编写包装函数:

element.click(fooVar.sayFoo.bind(fooVar));

另请参阅How to access the correct `this` / context inside a callback?