Braces in js have four semantic functions
Semantic 1, organize compound statements, this is the most common
if( condition ) {
//...
}else {
//...
}
for() {
//...
}
Semantic 2, object direct quantity declaration
var obj = {
name : 'jack',
age : 23
};
The whole is an assignment statement, where {name:'jack',age:23} is an expression, and there will be no syntax errors when it exists alone.
Semantic 3, declare function or function direct quantity
function f1(){
//...
}
var f2 = function(){
//...
}
The difference between f1 and non-f2 is that the former is in the grammatical interpretation period and the latter is in the runtime. The difference is that 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, f2 will report an error, prompting that f2 is not defined.
Semantic 4, syntax symbols for structured exception handling
try {
//...
}catch( ex ){
//...
}finally{
//...
}
The braces here are different from those in the sentence (semantics 1). If there is only one statement in the braces, braces can be omitted in if/else/for, etc., but try/catch/finally cannot be omitted.
The following code has been confused for a long time
function(){}() //Anonymous function is executed immediately, and an error is reported during the syntax analysis period
{}.constructor //Get the constructor of the direct quantity of the object, and report an error during the syntax analysis period
What is puzzled is why [].constructor does not report an error when written like this. One is a constructor that wants to obtain the direct quantity of the object, and the other is a constructor that obtains the direct quantity of the array.
Of course, adding a variable to receive will not report an error
var c = {}.constructor;
The same situation is like
var fn = function(){}(), and there will be no error.
In fact, it is the "statement priority" of js that is, {} is understood as the semantics of composite statement blocks (semantics 1) rather than the object's direct quantity (semantics 2) or declare function (semantics 3).
function(){}(), braces are understood as compound statements, and naturally the syntax of the function() declaration function is incomplete, resulting in errors during the syntax analysis period.
{}.constructor, braces are understood as compound statements, followed by braces are dot operators, and there is no reasonable object before the dot operator, and it will naturally also report an error.
The repair method is well known: add a mandatory operator ()
(function(){})(), (function(){});//Force it to be understood as a function (semantics 3), "function()" means that the function is executed, that is, it is executed immediately after declaration.
({}).constructor //({}) Force the braces to be understood as the object's direct quantity (semantics 2). "Object.xx" means to obtain the member of the object, and the dot operators behind it can be executed normally.
Extension: JQUERY plug-in writing requires pre-run
If you pay attention to some JQ plugins, you will often find the following code:
(function($){$(function(){/*code*/})}($))
If you read the above article, you will find out why this thing is there? Many JQ plugins need to be pre-run when they are not used. However, when I write, I rarely encounter such plugins. However, it is also beneficial in many cases~~
Semantic 1, organize compound statements, this is the most common
Copy the codeThe code is as follows:
if( condition ) {
//...
}else {
//...
}
for() {
//...
}
Semantic 2, object direct quantity declaration
Copy the codeThe code is as follows:
var obj = {
name : 'jack',
age : 23
};
The whole is an assignment statement, where {name:'jack',age:23} is an expression, and there will be no syntax errors when it exists alone.
Semantic 3, declare function or function direct quantity
Copy the codeThe code is as follows:
function f1(){
//...
}
var f2 = function(){
//...
}
The difference between f1 and non-f2 is that the former is in the grammatical interpretation period and the latter is in the runtime. The difference is that 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, f2 will report an error, prompting that f2 is not defined.
Semantic 4, syntax symbols for structured exception handling
Copy the codeThe code is as follows:
try {
//...
}catch( ex ){
//...
}finally{
//...
}
The braces here are different from those in the sentence (semantics 1). If there is only one statement in the braces, braces can be omitted in if/else/for, etc., but try/catch/finally cannot be omitted.
The following code has been confused for a long time
Copy the codeThe code is as follows:
function(){}() //Anonymous function is executed immediately, and an error is reported during the syntax analysis period
{}.constructor //Get the constructor of the direct quantity of the object, and report an error during the syntax analysis period
What is puzzled is why [].constructor does not report an error when written like this. One is a constructor that wants to obtain the direct quantity of the object, and the other is a constructor that obtains the direct quantity of the array.
Of course, adding a variable to receive will not report an error
var c = {}.constructor;
The same situation is like
var fn = function(){}(), and there will be no error.
In fact, it is the "statement priority" of js that is, {} is understood as the semantics of composite statement blocks (semantics 1) rather than the object's direct quantity (semantics 2) or declare function (semantics 3).
function(){}(), braces are understood as compound statements, and naturally the syntax of the function() declaration function is incomplete, resulting in errors during the syntax analysis period.
{}.constructor, braces are understood as compound statements, followed by braces are dot operators, and there is no reasonable object before the dot operator, and it will naturally also report an error.
The repair method is well known: add a mandatory operator ()
(function(){})(), (function(){});//Force it to be understood as a function (semantics 3), "function()" means that the function is executed, that is, it is executed immediately after declaration.
({}).constructor //({}) Force the braces to be understood as the object's direct quantity (semantics 2). "Object.xx" means to obtain the member of the object, and the dot operators behind it can be executed normally.
Extension: JQUERY plug-in writing requires pre-run
If you pay attention to some JQ plugins, you will often find the following code:
(function($){$(function(){/*code*/})}($))
If you read the above article, you will find out why this thing is there? Many JQ plugins need to be pre-run when they are not used. However, when I write, I rarely encounter such plugins. However, it is also beneficial in many cases~~