解析JavaScript中大括号“{}”的多义性与语法歧义

JavaScript大括号的四种语义概述

在JavaScript中，大括号“{}”具有四种不同的语义作用。

语义一：组织复合语句

第一种语义是组织复合语句，这是最为常见的用法。

if( condition ) {
  //... 
}else {
  //... 
} 
for() {
  //... 
} 

var obj = {
name : 'jack',
age : 23
}; 

整个代码是一个赋值语句，其中{name:'jack',age:23}构成一个对象直接量表达式。

语义三：函数声明与直接量

第三种语义用于声明函数或函数直接量。

function f1(){
    //... 
} 
var f2 = function(){
    //... 
} 

f1与f2的区别在于：f1在语法解释期（解析阶段）进行处理，而f2在运行期处理。如果调用该函数的代码位于函数定义之后，两者没有区别；但如果调用代码位于定义之前，f1仍然可以正常调用，而f2则会报错，提示f2未定义。

语义四：结构化异常处理

第四种语义是作为结构化异常处理的语法符号。

try {
    //... 
}catch( ex ){
    //... 
}finally{
    //... 
} 

这里的大括号与复合语句（第一种语义）有区别：在if/else/for等结构中，若大括号内仅有一条语句，大括号可以省略；但在try/catch/finally结构中，大括号不可省略。

语法歧义与修复方案

以下代码曾导致许多开发者困惑：

function(){}() //匿名函数立即执行，语法分析期报错
{}.constructor //获取对象直接量的构造器，语法分析期报错

令人不解的是，为何[].constructor这样写却不报错？前者试图获取对象直接量的构造器，后者获取数组直接量的构造器，区别仅在于此。

当然，如果添加一个变量来接收结果，也不会报错。

var c = {}.constructor;

同样的情况如

var fn = function(){}()，也不会报错。

这实际上是JavaScript“语句优先”解析机制在起作用：{}被解析器理解为复合语句块（第一种语义），而不是对象直接量（第二种语义）或函数声明（第三种语义）。

对于function(){}()，大括号被理解为复合语句，导致前面的function()声明函数语法不完整，从而在语法分析期出错。 对于{}.constructor，大括号被理解为复合语句，其后的点运算符前没有合理的对象，因此报错。

修复方式众所周知：添加强制运算符()。 (function(){})()，(function(){});//强制将其理解为函数（第三种语义），“函数()”表示执行该函数，即声明后立即执行。 ({}).constructor //({})强制将大括号理解为对象直接量（第二种语义），“对象.xx”表示获取对象的成员，因此点运算符可以正常执行。