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

Question

我正在使用Babel转换ES2015类：

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

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

如果我说fooVar.sayFoo()类的东西，这个类就像我期望的那样fooVar.sayFoo() 。 但是，如果我尝试将方法视为典型的JavaScript函数并将其作为参数传递（ element.click(fooVar.sayFoo) ），当该方法实际运行其词法时， this是事件对象，而不是Foo的实例，所以this.foo是未定义的。

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

我试图查看ES6规范，但无法弄清楚范围规则。 根据规范，这种奇怪的范围行为是否正确，或者它是某个地方的错误（例如，在巴别塔中）？

Answer 1

这是正确的行为，即使它看起来很奇怪吗？

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

只有箭头功能对待this不同。

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

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

另请参阅如何在回调中访问正确的`this` / context？