JavaScript自动分号插入（ASI）机制详解与避坑指南

自动分号插入（ASI）的基本规则

JavaScript引擎仅在三种特定情况下自动插入分号：右大括号}之前、一个或多个换行符之后，以及程序输入的结尾处。

这意味着，你只能在单行代码末尾、代码块结束处或整个脚本结束时省略分号。

例如，你可以编写如下代码：

function square(x) {
var n = +x
return n * n
}

但这种写法存在风险，如果像下面这样写，代码将会报错：

function area(r) { r = +r return Math.PI*r*r }//error

错误校正机制与解析陷阱

自动插入分号的另一个触发条件是：随后的输入标记无法被当前语法正确解析时。

换句话说，分号插入本质上是一种错误校正机制。通过以下代码可以直观理解：

a = b
(f())
//能正确的解析为一条单独的语句 单价于下面这条语句
a = b(f())
a = b
f()
//被解析为两条独立的语句
a = bf();//解析有误

因此，你必须仔细检查下一条语句的起始标记，以判断是否可以合法地省略分号。

如果下一条语句以（、[、+、-或/这五个字符之一开头，最好在前一条语句后显式添加分号。

以下是一个具体示例：

a = b
['r', 'g', 'b'].forEach(function (key) {
console.log(key);
});

本来你以为没有错误，但是解析器却解析成了如下语句

a = b['r', 'g', 'b'].forEach(function (key) {
console.log(key);
});

因为第二句语句是以[开始的，所以解析器不会在第一条语句后自动插入分号，这样就解析成了如上所示，上面的式子解析时b['b'].forEach难道不是错的吗？

所以（、[、+、-、和/ 这五个字符开始的语句，那么最好前面不要省略分号。

有经验的程序员在省略分号时，会在该语句后紧跟一个声明语句，以确保解析器能正确解析。如下所示：

a = b
var x//特意在此加了声明语句以保证a = b不会和(f())解析到一块儿
(f())

因此，如果你需要省略分号，必须检查接下来的一行开始标记是否为上述五个字符导致解析器会禁用自动插入分号，或者你也可以在（、[、+、-、和/ 这五个字符前置一个分号

脚本合并时的潜在风险

省略分号导致脚本连接问题

//file1.js
(function () {
    //......
})()
//file2.js
(function () {
 //......
})()

上述两个文件连接时，就会被解析成如下

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

所以省略分号不仅需要当心当前文件的下一个标记，而且还需要当心脚本连接后可能出现在语句之后的任一标记。

为避免解析器解析错误，你可以在每个文件前缀一个额外的分号以保护脚本免受粗心连接的影响。如果文件最开始的语句以上述5个脆弱字符开关，你就应该添加额外的分号前缀。

特殊语法与运算符的限制

JavaScript语法限制产生式

JavaScript语法限制产生式：不允许在两个字符之间出现换行。

举例说明：

return
{};

上述代码就被解析成了

return;
{}
;

自增自减运算的分号插入规则

a
++
b

大家想想上述代码会被解析成什么样？说出谜底吧，因为自增运算符既可以作为前置运算符又可以作为后置运算符，但是后置运算符不能出现在换行之前，所以上述代码被解析成了

a;
++b;

分号不会作为分隔符在for循环空语句的头部被自动插入

for (var i = 0,total=1
i < length
i++) {
total*=i;
}

像上述的代码就会出现解析错误。

空循环体的while同样也需要显示的分号，否则也会导致解析错误

function mytest() {
while (true)
}

必须写成如下才不会报错哦

function mytest() {
while (true) ;
}

总结一下哦

1.仅在}标记之前、一行的结束和程序的结束处推导分号 2.仅在紧接着的标记不能被解析的时候推导分号 3.在以（、[、+、-、和/ 字符开头的语句前绝不能省略分号 4.当脚本连接的时候，在脚本之间显式的插入分号 5.在return、throw、break、continue、++或--的参数之前绝不能换行 6.分号不能作为for循环的头部或空语句的分隔符而被推导出