javascript - 为什么结果根据花括号位置而有所不同？

为什么下面的摘自this article的代码片段由于花括号的位置只有一个变化而产生不同的结果？

当左花括号{在新行上时，test()返回undefined，并且警报中显示“no-it break:undefined”。

function test()
{
  return
  { /* <--- curly brace on new line */
    javascript: "fantastic"
  };
}

var r = test();
try {
  alert(r.javascript); // does this work...?
} catch (e) {
  alert('no - it broke: ' + typeof r);
}

当花括号与return在同一行上时，test()返回一个对象，并且警告“fantastic”。

function test()
{
  return { /* <---- curly brace on same line */
    javascript: "fantastic"
  };
}

var r = test();
try {
  alert(r.javascript); // does this work...?
} catch (e) {
  alert('no - it broke: ' + typeof r);
}

最佳答案

这是JavaScript的陷阱之一:自动分号插入。不以分号结尾但可能是语句结尾的行会自动终止，因此您的第一个示例实际上是这样的:

function test()
{
  return; // <- notice the inserted semicolon
  {
    javascript: "fantastic"
  };
}

另请参见Douglas Crockford's JS style guide，其中提到了分号插入。

在第二个示例中，您返回一个对象(由花括号构建)，该对象具有javascript属性及其值"fantastic"，实际上与此相同:

function test() {
    var myObject = new Object();
    myObject.javascript = "fantastic";
    return myObject;
}