Braces have four semantic functions in JS
Semantics 1, organize compound sentences, this is the most common
Copy the code code as follows:
if(condition) {
//...
}else {
//...
}
for() {
//...
}
Semantics 2, object literal declaration
Copy the code code as follows:
var obj = {
name: 'jack',
age: 23
};
The whole thing is an assignment statement, in which {name:'jack',age:23} is an expression.
Semantics 3, declare function or function literal
Copy the code code 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 notation for structured exception handling
Copy the code code 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 been struggling with the following code for a long time
Copy the code code as follows:
function(){}() //Anonymous function is executed immediately, syntax analysis periodic report
{}.constructor //Get the constructor of the object literal, and an error will be reported during syntax analysis
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;
The same situation is like
var fn = function(){}() will not report an error.
In fact, it is 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 (semantic 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 (semantics 2). "Object.xx" means obtaining the members of the object. Naturally, the subsequent dot operator can be executed normally.