javascript - 用es6学习js

Question

我有以下简单的代码:

window.Foo = window.Foo || {};

((Foo) => {
  'use strict';

  Foo.select = Foo.select || {};

  Foo.select.init = (selector, options) => {
    ...
  };

  Foo.select.otherInit = () => {
    ...
  };

  $((e) => {
    Foo.select.init();
    Foo.select.otherInit();
  });

})(window.Foo);

由于我是一名 js 校长，所以我想知道一些事情:

第一个是愚蠢的:我可以在函数内通过 this.Foo 访问它，而不是传递 Foo 吗？正如我所猜测的那样，这只是一种代码风格吗？

最后一行中的(window.Foo)是什么意思？有什么用？

最后，为什么使用:

$((e) => {
  Foo.select.init();
  Foo.select.otherInit();
});

不仅仅是:

Foo.select.init();
Foo.select.otherInit();

谢谢!

Answer 1

First the stupid one: instead of passing Foo can I access it by this.Foo inside the function? As I guess so, is it just kind of code style?

是的，您可以直接通过 this.Foo 访问它，但这只是因为当前函数作用域绑定(bind)到 window对象(因为您使用的是 arrow function )并且因为 Foo是 window 的一部分(可能是因为它刚刚在全局范围内定义)。

如果您要在另一个对象内的函数调用中尝试此操作，this.Foo会失败的。我不建议这样做，除非您有充分的理由这样做。

Here can learn more about arrow functions and the this context.

what does (window.Foo) in the last line mean? what's for?

您的整个构造(见下文)是 IIFE :立即调用的函数表达式。您正在使用箭头函数，因此这也绑定(bind)了上下文(参见上面的点)。

最后一部分，(window.Foo) ，意味着您调用使用参数 window.Foo 调用的函数，然后可用作 Foo在您的职能范围内。

((Foo) => {
    ...
})(window.Foo);

Lastly, why using:

$((e) => { Foo.select.init(); Foo.select.otherInit(); });

and not just:

Foo.select.init(); Foo.select.otherInit();

这是一个jQuery function call, which is executed once the DOM is ready 。 $(...)内的函数一旦 DOMContentLoaded 被调用事件被触发。

如果不存在，则可以在 DOM 准备好之前执行代码(因此可能找不到这些函数中引用的 DOM 元素)。这取决于您放置 javascript 代码的位置(如果您将其放置在 </body> 之前，您应该是安全的)。