Parsing the ambiguity of braces '{}' in Javascript_javascript skills

Braces in JS have four semantic functions

Semantics 1, organize compound statements, this is the most common

Copy code The code is as follows:

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

Semantic 2, object literal declaration

Copy code The code is as follows:

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

The whole is an assignment statement, in which {name:'jack',age:23} is an expression.

Semantic 3, declare function or function literal

Copy code The code is as follows:

function f1(){
//...
}

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

The difference between f1 and non-f2 is that the former is in the syntax interpretation period and the latter is in the runtime. The difference is: if the code that calls the function is after the function definition, there is no difference; if the code that calls the function is before the function definition, f1 can still be called, but f2 will report an error, prompting that f2 is not defined.

Semantics 4, syntax symbols for structured exception handling

Copy code The code is as follows:

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

There is a difference between the braces here and the matching statement (semantic 1). If there is only one statement in the braces, the braces can be omitted in if/else/for, etc. But try/catch/finally cannot be omitted.

I have struggled with the following code for a long time

Copy the code The code is as follows:

function(){}() //The anonymous function is executed immediately, and the syntax analysis period reports
{}.constructor //Gets the constructor of the object literal, and the syntax analysis period reports an error

What is puzzling is why [].constructor is written like this but does not report an error. One is a constructor that wants to get the direct value of the object, and the other is just a constructor that wants to get the direct value of the array.

Of course, adding a variable to receive will not cause an error

var c = {}.constructor;

Same situation as

var fn = function(){}(), no error will be reported.

It is actually the "statement priority" of js that is causing trouble, that is, {} is understood as a compound statement block (semantic 1) rather than the semantics of an object literal (semantic 2) or a declared function (semantic 3).

function(){}(), curly brackets are understood as compound statements. Naturally, the syntax of the previous function() declaration function is incomplete, causing an error during syntax analysis.

{}.constructor, the curly braces are understood as compound statements, and the curly braces are followed by the dot operator. If there is no reasonable object before the dot operator, an error will naturally be reported.

The fix is ​​well known: add a coercion operator ()
(function(){})(), (function(){});//Force it to be understood as a function (semantics 3), "Function ()" means executing the function, that is, it is executed immediately after declaration.

({}).constructor //({}) forces the curly braces to be understood as object literals (semantic 2). "Object.xx" means to obtain the members of the object. Naturally, the following dot operator can Executed normally.