下面這段簡單的 JavaScript 代碼里藏著一個(gè)不起眼但足以讓人抓狂的錯(cuò)誤：

function getResult(a, b) {
    return 
    {
        result: a + b
    };
}

console.log(getResult(2, 3)); // 結(jié)果真的是 5 嗎？

表面看上去，這只是一個(gè)“把兩個(gè)數(shù)相加，然后返回對象”的函數(shù)，可實(shí)際運(yùn)行后卻并非預(yù)期的 { result: 5 }。乍一眼看不出任何毛病，但結(jié)果可能會(huì)讓你大吃一驚。

Bug 原因

實(shí)際輸出會(huì)是 undefined。為什么？這是 JavaScript 的自動(dòng)分號(hào)插入（Automatic Semicolon Insertion, ASI）在作祟：

• return 語句后面由于換行，JavaScript 會(huì)在此自動(dòng)插入一個(gè)分號(hào)。
• 花括號(hào) {} 便被解釋成代碼塊而不是對象字面量。
• 這樣一來，真正的返回語句被看作 return;，函數(shù)自然就返回了 undefined。

用“JS 眼中的解釋”來寫就是：

return; // 這行被自動(dòng)插入了分號(hào)
{
    result: a + b;
}

如何修復(fù)

有兩種常見做法都能解決這個(gè)問題：

讓對象字面量跟在 return 同一行：

function getResult(a, b) {
    return {
        result: a + b
    };
}

在對象外包一層小括號(hào)：

function getResult(a, b) {
    return (
        {
            result: a + b
        }
    );
}

兩種寫法都能保證沒有意外的分號(hào)插入，從而讓函數(shù)正常返回 { result: 5 }。

小結(jié)

這個(gè) Bug 并不常見，但偶爾會(huì)讓人頭疼半天。如果在代碼中習(xí)慣把大括號(hào)換行到下一行，又忘了手動(dòng)加分號(hào)，就可能被 ASI“坑”到。
平時(shí)可以多注意一下這個(gè)特性，或者手動(dòng)在 return 后面寫對象時(shí)直接跟在同一行，避免自動(dòng)分號(hào)的意外影響。自動(dòng)格式化工具有時(shí)也會(huì)發(fā)生這種失誤，看到這里或許就知道要警惕什么了。