为什么结果因大括号放置而异？

Question

为什么从本文中获取的代码片段会产生不同的结果,因为花括号的位置只有一个变化？

当开始大括号{在新行上时,test()返回undefined,并且警报中显示"no - it broke: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);
}

Answer 1

这是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;
}

Answer 2

Javascript在语句结尾处不需要分号,但缺点是它必须猜测分号的位置.大多数情况下这不是问题,但有时它会发明一个你不打算使用分号的分号.

我的博客文章中的一个例子(Javascript - 几乎不基于行):

如果您格式化代码如下:

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

然后它被解释为这样:

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

return语句采用无参数形式,参数成为它自己的声明.

你的代码也是如此.该功能被解释为:

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

Answer 3

我个人更喜欢 Allman 风格的可读性（相对于 K&R 风格）。

\n\n

而不是\xe2\x80\xa6

\n\n

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

\n\n

我喜欢\xe2\x80\xa6

\n\n

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

\n\n

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

\n