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

javascript syntax

2022-08-30 02:45:15

为什么下面的代码片段（取自本文）由于大括号位置的单个更改而产生不同的结果？

当左大括号位于新行上时，将返回，并在警报中显示“否 - 它已中断：未定义”。{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);
}

当大括号与位于同一行时，将返回一个对象，并提醒“fantasy”。returntest()

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

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

答案 2

Javascript不需要在语句的末尾使用分号，但缺点是它必须猜测分号的位置。大多数时候这不是问题，但有时它会发明一个分号，而你并不打算这样做。

如果按如下方式设置代码的格式：

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

然后它被解释为这样：

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

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

您的代码也会发生同样的情况。该函数被解释为：

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