Meteor：為什么我通過將function（）{}切換到（）=> {}來丟失我的數據上下文？

Question

所以我正在嘗試使用ES6，安裝了grigio：babel軟件包，並且當我遇到問題時，我開始瀏覽我的es5代碼並將其更新為一些新的ES6語法。

最初我的模板助手看起來像這樣：

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

它在Blaze中用於每個循環

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

正如您所期望的那樣，我在事件循環中的元素的所有事件處理程序都可以訪問通過this關鍵字由exampleHelper返回的Mongo Collection中的字段。 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指向全局對象，是因為這是箭頭的功能是如何工作的：他們有詞法 this ，不是動態的 。 這意味着在創建函數時（在您的情況下它是window ）， this引用靜態綁定到函數上下文，而不是在運行時動態解析。

Answer 2

此代碼不起作用（它將顯示窗口對象）：

Template.homePage.helpers({
  exampleHelper: function () {
    return [
      {text: 'this'}, {text: 'that'}, {text: 'the other thing'}
    ];
  },

  process: () => {
    console.log(this);
  }
});

因為當你使用=>語法時，它想要做這樣的事情：

var self = this;

process(function () {
  doSomethingWith(self);
});

所以在這種情況下， this確實等於window 。 解決方案是在這種情況下不使用=> 。