javascript 函数与 ( function() { ... } ());

Question

我经常看到这样的表达方式：

(function () {
    var x = 1;
    ...
}());

我该如何解释它？从语法上来说，这本身就是一个匿名函数定义。

function() {
...
}

后面的 () 是什么？为什么要把它放在括起来的 () 中？

谢谢

Answer 1

完全一样，只是转换成函数表达式后立即调用。

// v-----first set of parentheses makes the function an expression
   (function () {
       var x = 1;
       ...
   }());
//  ^-----this set is used to invoke the function

与您所做的一样：

   var myfunc = function () {
       var x = 1;
       ...
   };
   myfunc();

或（类似）这个：

   var returnValue = function () {
       var x = 1;
       ...
   }();

去掉名称，移动括号，你会发现它们并没有那么不同。

Answer 2

我最常发现此功能最有用的领域是回调函数。当您需要在回调函数中包含变量，但需要变量状态不受函数外部发生的情况影响时，也可以使用此表示法。

 var someVal = 1;

 setTimeout( (function(one) {
      return function() {
           alert(one);  // alerts a 1 even 10 seconds after someVal++;
      }
 })(someVal), 10000);

 someVal++;  // the value in the setTimeout will remain the same as it is locked inside.

在这种情况下，setTimeout 采用一个不带参数的函数。因此，如何向该函数传递值的问题可以通过创建一个采用 1 个参数的函数来回答，该函数返回一个采用 0 个参数的函数。

我建议任何想要更多地了解此表示法的强大功能的人都可以在 Firebug JavaScript 控制台中使用它。一旦您理解了这个概念，您就会开始看到可以使用这个强大概念的领域。

Answer 3

这是一个老问题，但我的构建需要一段时间，我想我可以提供更好的答案：

简短回答：

()

运行您刚刚创建的函数。

功能

function() {
  const x = 1;
  ...
}

正如您提到的，这是一个常规的匿名函数

立即调用函数表达式

   (function () {
     const x = 1;
     ...
   }());

这个：

• 像上面一样创建一个匿名函数
• 运行函数

  ...()

这类似于创建一个数组，然后在其上运行一个方法

['one', 'two'].split()

。 你正在定义一些东西，然后用你刚刚定义的东西做一些事情。

为什么要在 2024 年使用 IIFE？

您可能会看到旧的代码库使用 IIFE 创建异步作用域来运行异步/等待代码，但没有理由再这样做了。 您现在可以在所有受支持的node.js 版本中使用顶级await 。所以你只需在 JS 文件中

await promises.readFile()

就可以了。