理解 JavaScript 中的函数表达式与函数声明

理解 JavaScript 中的函数表达式与函数声明

熟悉闭包用法的开发者对以下代码结构应当十分熟悉：

//通常的闭包写法
(function () {
 ...
}())

这里引出一个关键问题：为什么必须在 `function () {...}()` 外部添加圆括号？要解答这一疑问，必须深入理解 JavaScript 中函数表达式与函数声明的本质差异。

函数定义引发的错误

函数定义引发的错误

尽管 `function () {...}` 在形式上看似函数声明，但由于缺乏函数名，其本质实为函数表达式。参考 ECMAScript 规范中关于函数声明与函数表达式的定义：

由此可见，函数声明必须包含函数名。因此，直接执行 `function () {...}()` 会触发语法错误，根本原因在于解析器尝试将函数表达式解析为函数声明时，未能找到必需的函数名。

接着我们尝试为函数添加名称的情况：

function fn () {...}()

此时依然会提示语法错误，但报错位置转移到了末尾括号 `)` 处。

暂不解释具体原因，先观察后续示例：

从运行结果可以看出，函数声明后的 `()` 被解析器识别为分组运算符，而非函数调用操作符。那么，究竟该如何正确执行该函数呢？

正确解析函数表达式的方法

正确解析函数表达式的方法

依据规范，函数表达式必须处于 Expression（表达式）上下文中才能进行正确的语法解析。恰好，当 `()` 作为分组运算符使用时，其内部内容会被视为 Expression。

(function () {...}())
(function () {...})()

上述两种写法均符合规范。第一种写法逻辑清晰，函数表达式被正确解析并调用。在第二种写法中，解析器首先处理 `(function () {...})` 部分，由于分组运算符不会对内部内容执行 GetValue 操作，因此语句结束时，内部的函数表达式被直接返回，随后的 `()` 则表示对该返回值的函数调用。

我们可以通过一个简化的示例来辅助理解：

var a = function () {...}
(a()) //形同 (function () {...}())
(a)() //形同 (function () {...})()

该示例略显不严谨，因为直接执行 `a()` 是可行的，而直接执行 `function () {...}() ` 则不行。原因在于前文所述，`function () {...} ` 被尝试解析为函数声明，从而引发了语法错误。

其他执行方式

其他执行方式

前文提到，利用 `()` 分组运算符可以将匿名函数正确解析为函数表达式。同理，我们还可以借助其他多种运算符来正确执行函数表达式。

!function () {}()
void function () {}()
+function () {}()
-function () {}()
if (function () {}()) {} 
...

由于许多操作符会改变函数的返回值，例如 ` !function () {return 0}`、`void function () {}()`、`+ function () {}()` 等，因此我们通常推荐使用 `()` 将匿名函数包裹，使其被正确解析为函数表达式。

参考文章

http://www.zhihu.com/question/40902815/answer/88787368

http://www.zhihu.com/question/20292224