用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

首先是一个愚蠢的人：我可以通过this.Foo在函数内部访问它而不是传递Foo？ 我猜想，这只是一种代码样式吗？

是的，您可以直接通过this.Foo访问它，但这仅是因为当前功能范围已绑定到window Object（因为您使用的是箭头功能 ），并且因为Foo是window一部分（可能是因为它只是在全局范围内定义）。

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

在这里可以了解有关箭头功能和this上下文的更多信息。

最后一行（window.Foo）是什么意思？ 有什么用

您的整个构造（请参见下文）是一个IIFE ：立即调用的函数表达式。 您正在使用箭头功能，因此它也绑定了上下文（请参见上文）。

最后一部分(window.Foo)意味着您使用参数window.Foo调用了所调用的函数，该函数随后在函数中以Foo提供。

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

最后，为什么使用：

$（（e）=> {Foo.select.init（）; Foo.select.otherInit（）;}）;

而不仅仅是：

Foo.select.init（）; Foo.select.otherInit（）;

这是一个jQuery函数调用，在DOM准备就绪后执行 。 触发DOMContentLoaded事件后，将调用$(...)的函数。

如果不存在，则可以在DOM准备就绪之前执行代码（因此可能找不到那些函数中引用的DOM元素）。 不过，这取决于您将JavaScript代码放置在哪里（如果您将其放置在</body>之前），则应该是安全的。