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

为什么代码片段如下，取自这篇文章，产生不同的结果，由于只在大括号的放置一个变化？

当左花括号{在新行上时，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()将返回一个对象，并警告“奇妙”。

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的JS样式指南，其中提到了分号插入。

在第二个示例中，您返回一个对象（由花括号构建），该对象的属性javascript及其值为"fantastic"，实际上与此相同：

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

Javascript在语句末尾不需要分号，但是缺点是必须猜测分号在哪里。在大多数情况下，这不是问题，但有时它会发明一个您不想使用的分号。

我的博客文章中的一个示例（Javascript –几乎不是基于行的）：

如果按以下格式设置代码：

function getAnswer() {
   var answer = 42;
   return
      answer;
}

然后将其解释为：

function getAnswer() {
  var answer = 42;
  return;
  answer;
}

return语句采用无参数形式，并且参数成为其自身的语句。

您的代码也是如此。该函数解释为：

function test()
{
  return;
  {
    javascript : "fantastic"
  };
}

我个人更喜欢Allman风格的可读性（对比K＆R风格）。

代替…

function test() {
  return {
    javascript : "fantastic"
  };
}

我喜欢…

function test() 
{
  var obj =
  {
    javascript : "fantastic"
  };

  return obj;
}

但这是一种解决方法。我可以忍受。

这是因为javascript最常将“;”放到 在每行的末尾，因此基本上，当您在同一行中返回{时，javascript引擎会看到还有更多内容，而当它在新行中时，它会认为您忘记了加“;”，并为您放了它。

此处的花括号指示新对象的构造。因此，您的代码等效于：

function test() {
  var a = { javascript : "fantastic" };
  return a;
}

这有效，而如果您写：

function test() {
  var a = { javascript : "fantastic" };
  return; // ; is automatically inserted 
      a;
}

它不再起作用。

问题确实是如上所述的分号注入。我刚刚读了一篇有关此主题的不错的博客文章。它解释了此问题以及有关javascript的更多信息。它还包含一些很好的参考。你可以在这里阅读