細(xì)說 Javascript 拾遺篇（三） : 自動插入分號

mushang 發(fā)布于2019-08-19 14:48 / 1816人閱讀

摘要：此時會自動插入分號，解析器將再次嘗試。工作原理下面的代碼沒有分號，因此解析器將會自己判斷在哪些地方插入分號。前置小括號在有前置小括號的情形時，解析器將不會自動插入分號。這不僅將保證代碼整體的一致性，也將有效地避免解析器對代碼行為的錯誤改變。

盡管 Javascript 有類似 C 的句法風(fēng)格，但是它并不強(qiáng)制在代碼中使用分號，所以分號可能被省略。
Javascript 并不是一個缺少分號的語言，實際上，它需要分號來解析代碼。因此當(dāng) Javascript 解析器遇到缺少分號而導(dǎo)致錯誤時會自動插入分號。

var foo = function() {
} // parse error, semicolon expected
test()

此時 Javascript 會自動插入分號，解析器將再次嘗試。

var foo = function() {
}; // no error, parser continues
test()

自動的分號插入被認(rèn)為是 Javascript 設(shè)計的缺陷之一，因為它能改變代碼的行為。

工作原理

下面的代碼沒有分號，因此 Javascript 解析器將會自己判斷在哪些地方插入分號。

(function(window, undefined) {
    function test(options) {
        log("testing!")

        (options.list || []).forEach(function(i) {

        })

        options.value.test(
            "long string to pass here",
            "and another long string to pass"
        )

        return
        {
            foo: function() {}
        }
    }
    window.test = test

})(window)

(function(window) {
    window.someLibrary = {}

})(window)

下面是解析器自行猜想后的結(jié)果：

(function(window, undefined) {
    function test(options) {

        // Not inserted, lines got merged
        log("testing!")(options.list || []).forEach(function(i) {

        }); // <- inserted

        options.value.test(
            "long string to pass here",
            "and another long string to pass"
        ); // <- inserted

        return; // <- inserted, breaks the return statement
        { // treated as a block

            // a label and a single expression statement
            foo: function() {} 
        }; // <- inserted
    }
    window.test = test; // <- inserted

// The lines got merged again
})(window)(function(window) {
    window.someLibrary = {}; // <- inserted

})(window); //<- inserted

很明顯，解析器插入分號后已經(jīng)改變了代碼原本的行為。

前置小括號

在有前置小括號的情形時，解析器將不會自動插入分號。

log("testing!")
(options.list || []).forEach(function(i) {})

代碼將被解析器轉(zhuǎn)換為一行：

log("testing!")(options.list || []).forEach(function(i) {})

總結(jié)

基于以上研究，強(qiáng)烈建議在書寫 Javascript 代碼的時候不要省略分號，同時也建議大括號應(yīng)該與對應(yīng)的表達(dá)式處于同一行，即使 if else 語句只有一句也盡量不要省略大括號。這不僅將保證代碼整體的一致性，也將有效地避免 Javascript 解析器對代碼行為的錯誤改變。

對于是否省略 Javascript 分號，@barretlee 有篇博文寫的很好，尤其是其中的一些例子舉得很有代表性：

《Javascript分號，加還是不加？》

JavaScript Garden 接下來一章節(jié)介紹 delete 操作符，由于之前我自己已經(jīng)研究過 delete 相關(guān)機(jī)制 - 《Javascript - Delete 機(jī)制》。因此我不打算再重復(fù)總結(jié)一篇博文。

參考

http://bonsaiden.github.io/JavaScript-Garden/#core.semicolon