javascript - 大括号在 JavaScript 中有什么作用？

Question

我在 Eloquent JavaScript 中阅读了这一行，希望能清楚一些。

...braces have two meanings in JavaScript. At the start of a statement, they start a block fo statements. In any other position, they describe an object. Fortunately, it is almost never useful to start a statement with a brace object, and...

所以，大括号比方说......一个“if 语句”创建了一个要执行的语句 block ，但是出现在比方说函数调用(作为参数)或变量赋值中的大括号变成了一个对象字面量。

是吗？其他情况是什么？我不确定我是否理解大括号何时捆绑语句以及何时描述对象的规则。

Answer 1

作为对象字面量

var a = {field1:value1, field2:value2}

作为函数体

function func() {
    // do something
}
var f = function() { /* do something */ };
var f = ()=>{}; // ditto

语句中的第一项是对象字面量

// {}.toString(); // syntax error, first brace of statement = code block
({}).toString(); // correct

作为解构赋值

var obj = {a:1, b:2, c:3};
var {a:x, c:y} = obj; // assign obj.a to x, and obj.c to y
({a:x, c:y} = obj); // ditto

注意 - 这有很多形式，所以我不会全部介绍，full info found here (感谢 RobG)

这是如何解释的

您可以假设所有 JS 代码都在某个 {} block 中。所以你的代码的开始总是在 { 之后。

无论在何处需要值，{} 并不意味着函数体。在语句的开头，这是模棱两可的，因为您可以有这样的匿名代码块:

var x = 1;
{
    var x = x+2;
    // x = 3
}
// x = 3 (!)

这是来自 C 风格语法的古老语法，它会影响范围，但在 JS 中测试它似乎没有那种效果，所以从所有意图来看，它是相当无用的语法，除了识别代码块。如果你想要这样的行为，你需要这样做:

var x = 1;
(()=>{
    var x = x+2;
    // x = 3
})()
// x = 1

如果我们在某些语句中首先需要一个对象，我们需要向 JS 澄清我们需要一个值。这就是我们使用 ({}) 而不是 {} 的原因，因为前者明确是括号内的对象文字。

---

更简单的解释

与其检查 {} 何时被解析为值，不如让我们看看何时没有解析。通常有两种情况我们不将 {} 视为对象字面量:作为函数体或作为语句组(我自己的术语)。

考虑一般控制语句 - if、for、while、with 等。这些都可以*以完全避免 {} 的方式使用。在这方面，{} 应被视为语句组，因此才有了这个术语。

if (x) x++; else x--;
if (x) {x++;} else {x--;}
{if (x) {x++;} else {x--;}}

*注意:switch是个异常，switch(1);报错SyntaxError: missing { before switch body

使用这条规则就可以解释为什么我们必须使用 () 来表示一个对象字面量，如果它是一个语句的开始 - 我们不能 在 () 中开始一个语句，所以你也不能在那里开始一个语句组，只留下一个选项(对象文字或相关语法)。

这留下了函数体。

函数体

首先，考虑一个函数声明语句:

function f () {}

它不需要分号 (;)。这意味着整个事情是一个单一的声明。这解释了为什么以下在第一种形式中给出语法错误而不是第二种形式:

function(){return 1;}(); // error: function statement requires name
var x = function(){return 1;}(); // fine

这是因为第一个被解析为语句，函数声明语句不能是匿名的。然而，第二个是在一个值上下文中并且被这样对待。这种情况与对象字面量相同，如果它可以是一个语句，它就不能是一个值，但如果我们已经深入到值(value)领域，它必须是 一个值。

除了一个异常(exception)，=> 符号的解析方式与 function 相同。 ()=>{} 形式是相同的，但实际上有所不同，因为这种类型的函数不能有 this 对象 - 它不能是对象方法(不很有意义)并且它不能构造新对象(它没有原型(prototype))，结果是其他怪癖。否则很容易看出它与 function(){} 有何相同之处。

()=>... 然而有点不同。它被视为 ()=>{return ...}。但是，如果没有明确的 } 来完成 return 语句，语法会贪婪地捕获将这样解析的最大表达式(不一定有效) .恰当的例子:

()=>1; // statement; = function that returns "1"
()=>1(); // statement; = function that returns "1()"
(()=>1()); // TypeError: 1 is not a function
(()=>1)(); // what was intended in above (you'd hope)