JavaScript自执行函数写法对比：从语法错误到最佳实践

JavaScript自执行函数写法对比：从语法错误到最佳实践

在实际开发中，我们常需要让函数立即执行，但初学者容易遇到一种错误的写法。

 
function(){alert(1);}();

这种写法之所以报错，是因为前半部分“function(){alert(1);}”被JavaScript引擎解析为函数声明（Function Declaration），而非函数表达式（Function Expression）。由于函数声明不能直接后接调用符号“();”，导致语法解析失败。

基于上述分析，虽然以下代码没有语法错误，但它并未实现自执行的目的。

 
function(){alert(1);}(1);

综上所述，核心问题在于如何明确告知JavaScript引擎，当前代码块是一个函数表达式，而不是一个函数声明语句。

正确的实现方式有多种，每种方式各有其优缺点：

常见正确写法及其优缺点分析

方法1：在函数定义的前后都加上括号

 
(function(){alert(1);}());

这是jslint工具推荐的写法。其优势在于能够向阅读代码的人清晰传达这是一个完整的代码块。

例如，在使用支持语法高亮和括号匹配的编辑器时，当光标停留在第一个左括号后，编辑器会自动高亮对应的最后一个右括号。这有助于开发者一眼识别出代码的整体结构。

然而，对于某些开发者习惯不在行尾加分号的情况，这种写法可能会引发一些潜在问题。例如，以下代码会导致运行时错误：

 
var a=1
(function(){alert(1);}());

方法2：仅在function关键字外部添加括号

 
(function(){alert(1);})();

这种做法虽然可行，但相比方法1，它失去了“代码整体性”这一视觉提示优势。

方法3：在function关键字前添加运算符，常见的是!与void。

 
!function(){alert(1);}();
void function(){alert(2);}();

显然，使用“!”或“+”等运算符的方式在书写上最为简洁。

虽然使用“void”需要多敲击五个键盘字符，但有一种说法认为它比使用“!”少执行一次逻辑运算。不过，这仅是传闻，具体原理尚不明确。

最后，从个人角度出发，强烈推荐使用jslint推荐的方法1，即完整括号包裹写法：

 
(function(){alert(1);}());