用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);

由于我是一位首席执行官，所以我想知道几件事：

首先，愚蠢的一个:与其传递Foo，我可以在函数中通过this.Foo访问它吗？我想是的，这只是一种代码风格吗？

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

最后，为什么要使用：

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

而不仅仅是：

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

谢谢!

Answer 1

首先，愚蠢的一个:我可以通过函数内部的this.Foo来访问Foo，而不是传递Foo？我想是的，这只是一种代码风格吗？

是的，您可以通过this.Foo直接访问它，但只因为当前的函数范围绑定到window对象(因为您使用的是箭头函数)和因为Foo是window的一部分(可能是因为它是在全局范围中定义的)。

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

上下文。

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

整个构造(见下面)是一个生平：立即调用的函数表达式。您使用的是箭头函数，因此这也会绑定上下文(参见上面的要点)。

最后一部分(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>之前，您应该是安全的)。