为什么结果会因花括号的位置而异？

IT技术 javascript syntax
2021-01-22 00:30:56

为什么下面摘自本文的代码片段会因为花括号位置的单一变化而产生不同的结果？

当左花括号{在新行上时，test()返回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);
}

6个回答

这是 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;
}
@SeanMcMillan 我确实阅读过有关它的文章，但我似乎无法通过快速搜索找到其中的任何一篇。我记得在旧版本的 chrome中放置return /*然后*/{ 会有效地注释掉隐藏的分号。不确定这是否仍然适用
2021-03-12 00:30:56
有趣的事实：在某些引擎上，您可以注释掉自动插入的分号
2021-03-19 00:30:56
由于这些怪癖，我在 10 年前对自己做出了Promise：远离网络！我祈祷互联网会消失……不幸的是它没有按计划进行，现在我也必须与这些问题作斗争。业力是ab * tch :)
2021-03-29 00:30:56
@ChrisT：什么？哪个？这是在任何地方探索吗？
2021-04-01 00:30:56
我见过一些人在 JavaScript 中坚决反对分号，我一直想知道他们如何利用不使用分号节省的额外时间。
2021-04-02 00:30:56

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

但这是一种变通方法。不过我可以忍受它。

我认为我们应该避免偏离主流的个人偏好。我们应该遵循大多数人的选择，这会促进一致性，从而增加可读性
2021-03-14 00:30:56
我发现他的代码比 K&R 更具可读性。当您的意思是“可读”时非常主观
2021-03-14 00:30:56
我也更喜欢 Allman...但是由于 ASI，当我需要返回一个对象时，我将 Semi 与返回的放在同一条线上。我更喜欢这个而不是添加一个“var x=”行......
2021-03-18 00:30:56

这是因为 javascript 最常放置“;” 在每一行的末尾，所以基本上当你在同一行中返回 { 时，javascript 引擎会看到会有更多的东西，当它在新行中时，它认为你忘记放置“;”，并为你放置它。

我不明白为什么 cichy 的、Darin 的和 Ivo 的答案被否决了？
2021-04-02 00:30:56

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

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

哪个有效，而如果你写：

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

它不再有效。

其它你可能感兴趣的问题
上一篇event.returnValue 已弃用。请改用标准 event.preventDefault() 下一篇Javascript：运算符重载