Question

我有一个ES6＆＃34;箭头＆＃34;用作（Knockout）订阅处理程序的函数：

this.foo = 'test'
callback = () => console.log(this.foo)
bar.subscribe(callback);

根据MDN：

箭头函数捕获封闭上下文的此值

所以我希望在callback被调用时，它会记录'test'。但事实并非如此。当我放入调试器时，我可以看到this实际上是ko.subscription（当然，它没有foo属性。）

我可以通过手动绑定回调来解决问题：

callback = callback.bind(this)

但正如我所理解的那样，因为我的this应该在callback subscribe =>之前被绑定，所以我不应该这样做。

有人可以解释一下我对新Vagrantfile运营商不了解的内容，以及它何时/不保留上下文？

Answer 1

首先，感谢大家的帮助。事实证明这只是某种棘手的Chrome开发者工具错误。

这是我的原始（不是简化的）代码：

this.snapshot_profile = ko.observable('1');
this.foo = 5;
this.snapshot_profile.subscribe((value) => {
    console.log(this.foo);
    debugger
    // rest of the method
});

事实证明，console.log将正确返回5。但是，如果您在调试器行上暂停并将鼠标悬停在this上，您会看到它不是我的类的实例，而是ko.subscription。如果我在控制台中“检查”this，它将如下所示：

callback: (value)
dispose: ()
disposeCallback: ()
target: observable()
__proto__: ko.subscription

不就像我班级的一个实例。但是（奇怪的是）console.log行会正确记录5。

通过直接或通过Knockout的绑定机制绑定函数，可以“修复”上述所有内容。这让我很困惑：在调试器绑定/不绑定中，箭头函数确实改变了一些东西！

但是，看起来它确实没有改变任何有意义的东西;它刚刚暴露了Chrome调试器中的一个错误。

可以＆＃34; =＆gt;＆＃34;功能丢失上下文？

1 个答案: