为什么结果会因为花括号的放置而有所不同？

为什么下面的代码片段取自 这篇文章，仅仅因为花括号的位置发生了一个变化，就会产生不同的结果？

当开头的花括号 {在一个新行上时，test()返回 undefined，并且警报中显示“ no-it broke: unDefinition”。

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

34582 次浏览
小开
最佳答案

这是 JavaScript 的缺陷之一: 自动插入分号。没有以分号结尾，但可能是语句结尾的行将自动终止，因此第一个示例看起来有效地像下面这样:

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

另请参阅 道格拉斯·克罗克福特的 JS 风格指南，其中提到了分号插入。

在第二个示例中，返回一个对象(由大括号构建) ，该对象的属性为 javascript，其值为 "fantastic"，实际上与下面这个对象相同:

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

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

小开

问题实际上是上面描述的分号注入。我刚读了一篇关于这个主题的博客。它解释了这个问题以及更多关于 javascript 的内容。它还包含一些很好的参考资料。你可以读它 给你

小开

这里的大括号表示一个新对象的构造，因此你的代码相当于:

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

而如果你写:

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

已经不管用了。

小开

Javascript 在语句末尾不需要分号，但缺点是它必须猜测分号的位置。大多数时候这不是问题，但是有时候它会在你不想要的地方发明一个分号。

如果你像这样格式化代码:

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

然后是这样解释的:

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

Return 语句采用其无参数形式，参数变成其自身的语句。

同样的情况也会发生在你的代码上，这个函数被解释为:

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

我个人更喜欢奥尔曼风格的可读性(相对于 K & R 风格)。

而不是..。

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

我喜欢..。

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


return obj;
}

但这只是权宜之计，我可以接受。


提交答案