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

而不只是：

EndColor

谢谢你！

Answer 1

首先是愚蠢的一个：我可以通过它访问它而不是传递Foo this.Foo里面的功能？我猜是这样，它只是一种代码风格？

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

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

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

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

您的整个构造（见下文）是IIFE：立即调用的函数表达式。您正在使用箭头函数，因此这也会绑定上下文（请参阅上面的内容）。

最后一部分this.Foo表示您使用参数(window.Foo)调用您调用的函数，然后在函数中将其作为window.Foo使用。

Foo

最后，为什么要使用：

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

而不只是：

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

这是jQuery function call, which is executed once the DOM is ready。一旦((Foo) => { ... })(window.Foo);事件被触发，就会调用$(...)内的函数。

如果不存在，则可以在DOM准备好之前执行代码（因此可能找不到这些函数中引用的DOM元素）。这取决于您放置JavaScript代码的位置（如果您在DOMContentLoaded之前放置它应该是安全的）。

用es6学习js

1 个答案: