javascript - 为什么方法引用不跟踪这个？

Question

我正在使用 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 中)？

Answer 1

Is this the correct behavior, even though it seems weird?

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

只有箭头函数对 this 的处理方式不同。

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

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

另见 How to access the correct `this` / context inside a callback?