Meteor:为什么我通过将function(){}切换到()=> {}来丢失我的数据上下文？

Question

所以我正在尝试使用ES6,安装了grigio:babel软件包,并且当我遇到问题时,我开始浏览我的es5代码并将其更新为一些新的ES6语法.

最初我的模板助手看起来像这样:

Template.exampleTemplateName.helpers({
   exampleHelper: function() {
      //returns an array from Mongo Collection
   }
});

它在Blaze中用于每个循环

{{#each exampleHelper}}
{{/each}}

正如您所期望的,此事件循环中元素的所有事件处理程序都可以访问Mongo Collection中exampleHelper通过this关键字返回的字段.this.exampleField将完全返回我期望它返回的东西.

所以现在我开始更新到ES6了.由于某种原因,以下语法会破坏数据上下文,因此它不会this返回您期望的内容,而是返回Window:

Template.exampleTemplateName.helpers({
    exampleHelper() {
        //returns an array from Mongo Collection
    }
});

以上是我的第一次尝试,然后我尝试了:

Template.exampleTemplateName.helpers({
    exampleHelper: () => {
        //returns an array from Mongo Collection
    }
});

所以我通过Babeljs的在线翻译运行了上面的ES6代码并收到了以下内容,这显然是不正确的,因为我不想要一个命名函数:

Template.exampleTemplateName.helpers({
     exampleHelper: function exampleHelper() {}
});

有人能告诉我正确的语法应该是什么样的吗？

Answer 1

有人能告诉我正确的语法应该是什么样子吗？

你原来的代码完全没问题。您不必滥用这些功能并只是为了使用它们而使用它们，节省一些按键操作等。在这种情况下，您应该使用普通的匿名函数。

this您对指向全局对象感到困惑的原因是因为这就是箭头函数的工作方式：它们具有lexical this，而不是dynamic。这意味着this引用在函数创建时静态绑定到函数上下文（在您的情况下是window），而不是在运行时动态解析。