JavaScript 中的 (function() { } )() 结构是什么？

Question

我想知道这意味着什么：

(function () {

})();

这基本上是在说 document.onload 吗？

原文由 Exitos 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这是一个 立即调用的函数表达式，简称 IIFE 。它在创建后立即执行。

它与任何事件的任何事件处理程序（例如 document.onload ）无关。

考虑第一对括号内的部分： ( function(){} )(); ….它是一个正则函数表达式。然后看最后一对 (function(){}) () ; ，这通常被添加到表达式中以调用函数；在这种情况下，我们之前的表达。

当试图避免污染全局命名空间时，经常使用这种模式，因为在 IIFE 内部使用的所有变量（就像在任何其他 普通 函数中一样）在其范围之外是不可见的。

这就是为什么，也许，您将此构造与 window.onload 的事件处理程序混淆了，因为它经常这样使用：

 (function(){
 // all your code here
 var foo = function() {};
 window.onload = foo;
 // ...
 })();
 // foo is unreachable here (it's undefined)

Guffa 建议的更正：

该函数在创建后立即执行，而不是在解析后执行。在执行其中的任何代码之前解析整个脚本块。此外，解析代码并不自动意味着它已被执行，例如，如果 IIFE 在函数内部，那么在调用函数之前它不会被执行。

更新

由于这是一个非常流行的话题，值得一提的是，IIFE 也可以用 ES6 的箭头函数 编写（就像 Gajus 在评论中指出的 那样）：

 ((foo) => {
 // do something with foo here foo
 })('foo value')

原文由 gion_13 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

它只是一个在创建后立即执行的匿名函数。

就好像你将它分配给一个变量，然后立即使用它，只是没有变量：

 var f = function () {
};
f();

在 jQuery 中，您可能会想到一个类似的结构：

 $(function(){
});

这是绑定 ready 事件的简短形式：

 $(document).ready(function(){
});

但是上面的两个构造不是 IIFE s。

原文由 Guffa 发布，翻译遵循 CC BY-SA 4.0 许可协议