javascript - JavaScript 中的初始化函数及其工作原理

Question

我经常看到下面的代码:

(function () {
  // init part
})();

但我始终无法理解它是如何工作的。我发现最后一个括号特别令人困惑。有人可以根据执行上下文 (EC) 和变量对象 (VO) 解释它是如何工作的吗？

Answer 1

我通常向人们解释它的方式是展示它与其他 JavaScript 模式的相似之处。

首先，您应该知道有两种声明函数的方法(实际上，至少有五种，但这是两种主要的罪魁祸首):

function foo() {/*code*/>

和

var foo = function() {/*code*/};

即使这种结构看起来很奇怪，您也可能在附加事件时一直使用它:

window.onload=function(){/*code*/};

您应该注意到第二种形式与常规变量声明没有太大区别:

var bar = 5;
var baz = 'some string';
var foo = function() {/*code*/};

但在 JavaScript 中，您始终可以选择是直接使用值还是通过变量使用值。如果 bar 是 5，那么接下来的两个语句是等价的:

var myVal = bar * 100; // use 'bar'
var myVal = 5 * 100;   // don't use 'bar'

好吧，如果你可以单独使用 5，为什么你不能单独使用 function() {\*code*\}？事实上，你可以。这就是所谓的匿名函数。所以这两个例子也是等价的:

var foo = function() {/*code*/}; // use 'foo'
foo();                           

(function(){/*code*/})();        // don't use 'foo' 

您应该看到的唯一区别在于额外的括号。这只是因为如果您以关键字 function 开始一行，解析器会认为您正在使用此答案顶部的第一个模式声明一个函数并抛出语法错误异常。因此，将整个匿名函数包裹在一对大括号中，问题就消失了。

换句话说，以下三个语句是有效的:

5;                        // pointless and stupid
'some string';            // pointless and stupid
(function(){/*code*/})(); // wonderfully powerful

---

[2020 年编辑]

我的回答的前一个版本推荐了 Douglas Crockford 对这些“立即调用的匿名函数”的 parens-wrapping 形式。用户@RayLoveless 在 2012 年推荐使用现在显示的版本。那时，在 ES6 和箭头函数之前，没有明显的惯用差异；您只需阻止以 function 关键字开头的语句。事实上，有很多方法可以做到这一点。但是使用括号，这两个语句在句法和惯用语上是等价的:

( function() { /* code */}() );
( function() { /* code */} )();

但是用户@zentichinc 下面的评论提醒我箭头函数改变了这一切。所以现在这些说法中只有一个是正确的。

( () => { /* code */ }() ); // Syntax error
( () => { /* code */ } )();

为什么这很重要？其实证明起来很容易。请记住，箭头函数可以有两种基本形式:

() => { return 5; };       // With a function body
() => { console.log(5); };

() => 5;                   // Or with a single expression
() => console.log(5);

如果没有括号包裹第二种类型的箭头函数，您最终会遇到惯用的困惑:

() => 5();              // How do you invoke a 5?
() => console.log(5)(); // console.log does not return a function!