Ember.js EmberJS 2.7-使用闭包操作调用函数与将该函数作为操作调用

在带有闭包动作的余烬中，您可以传递一个函数，如下所示：

  openFilePicker: function () {
    let child = this.$('div:first-child');
    child.removeClass('is-dragging');
    child.html('<h2>Upload GPX Route</h2><div class="dropzone-body-text"><h5>Drag and Drop here</h5>- or -<h5>click anywhere here</h5></div>');
    filepicker.pick({
      container: 'modal',
      maxSize: (5 * 1024 * 1024),
      services: ['COMPUTER']
    });
  }

一,

而不是像下面这样调用操作

二,

在（1）中，支持此组件的代码如下所示：

  openFilePicker: function () {
    let child = this.$('div:first-child');
    child.removeClass('is-dragging');
    child.html('<h2>Upload GPX Route</h2><div class="dropzone-body-text"><h5>Drag and Drop here</h5>- or -<h5>click anywhere here</h5></div>');
    filepicker.pick({
      container: 'modal',
      maxSize: (5 * 1024 * 1024),
      services: ['COMPUTER']
    });
  }

openFilePicker:function（）{
设child=this.$（'div:first child'）；
removeClass（'is-draging'）；
html（'Upload GPX RouteDrag and Drop here-or-click anywhere here'）；
filepicker.pick({
容器：'模态'，
最大尺寸：（5*1024*1024），
服务：[“计算机”]
});
}

这使用JQuery从DOM中删除一些元素，然后调用外部加载的JS文件中的另一个函数（filepicker.pick）

在（2）中，相同的代码在动作中：

actions: {
    openFilePicker: function () {
        let child = this.$('div:first-child');
        child.removeClass('is-dragging');
        child.html('<h2>Upload GPX Route</h2><div class="dropzone-body-text"><h5>Drag and Drop here</h5>- or -<h5>click anywhere here</h5></div>');
        filepicker.pick({
          container: 'modal',
          maxSize: (5 * 1024 * 1024),
          services: ['COMPUTER']
        });
    }
}

操作：{
openFilePicker:函数（）{
设child=this.$（'div:first child'）；
removeClass（'is-draging'）；
html（'Upload GPX RouteDrag and Drop here-or-click anywhere here'）；
filepicker.pick({
容器：'模态'，
最大尺寸：（5*1024*1024），
服务：[“计算机”]
});
}
}

这样做的利弊是什么？我知道（1）不是推荐的方法，但肯定（1）可以更容易地访问

组件中的其他代码（例如组件的属性）。像往常一样，
Ember
文档似乎没有对这一点做出任何解释（我无论如何也找不到）。我所能找到的就是这一点，不鼓励调用任意函数（否则为什么首先要执行操作？）

所以，尽管这个问题可能会产生意见，但这不是我想要的。我想了解这两种方法之间的
范围界定
区别是什么？例如，当您在操作中的函数内部时，从JS运行时的角度来看，范围有什么不同？例如，在这两种情况下，“这”是同一件事吗？
实际上没有区别。结帐玩转

唯一的区别是动作查找时间。虽然
{{action'foo'}}
要求
foo
在绑定时间存在，但
={{action'foo'}}
不需要此操作（闭包操作）

操作调用由ember绑定到当前
此
上下文。这基本上就是闭包操作的
{{action}
助手所做的。它创建一个新函数，该函数调用原始函数，在计算
{action}
帮助程序时，将
this
作为上下文

如果调用当前函数范围之外的另一个函数，则此函数将始终不同。
重要的是要理解，
此
始终绑定到功能范围

如果调用类似于
myfunction（）
的函数，则该函数中的
此
将为
null
。如果调用像
foo.myfunction（）
这样的函数，那么
中的
myfunction
将是
foo

确保您完全理解这一点。简而言之，
这与余烬没有任何不同。这是标准的Javascript。
为什么访问组件的其他代码更容易？Ember将为您的操作将
此
绑定到您的组件。如果在组件内部的函数中，您希望调用另一个函数（例如，在动态加载的外部文件中，您加载该文件只是为了在该组件中使用，这是加载项的常见场景），该怎么办这已经不受约束了，对吧？在调用嵌套函数（我想！）@Lux之前，您必须先让myComponent=这个在操作中，事实证明这并没有让它变得更容易：）这是我的误解。非常感谢您的精彩解释，这真的很有帮助。出于某种原因，我认为Ember在“this”的闭包操作方面做了一些特殊的事情，但我现在明白了，正如您所说，它只是标准的JS。
actions: {
    openFilePicker: function () {
        let child = this.$('div:first-child');
        child.removeClass('is-dragging');
        child.html('<h2>Upload GPX Route</h2><div class="dropzone-body-text"><h5>Drag and Drop here</h5>- or -<h5>click anywhere here</h5></div>');
        filepicker.pick({
          container: 'modal',
          maxSize: (5 * 1024 * 1024),
          services: ['COMPUTER']
        });
    }
}