How to write the function expression that js calls immediately

  • 2020-03-30 01:19:57
  • OfStack

If you do not need to display the call function, let this function in the definition of the execution, how to write it, the next step will be detailed implementation, interested friends can understand

1. Introduction
Functions need to be defined first and used later. This is basically an iron law of all programming languages.
In general, we need to call a JavaScript function, the basic situation is to define and then call. Let's look at an example
The code is as follows:
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>Say Hello</title> 
</head> 
<body> 
<script> 
//define function 
function sayHello() 
{ 
alert("hello"); 
} 
//call function 
sayHello(); 
</script> 
</body> 
</html> 

But if you don't need to show the calling function, how do you write it if you want it to execute at definition time?

2. The process of thinking
From the above examples, you are wise to combine the above situations and think:
=== "since the call is followed by a pair of function names, is it ok to add a pair of braces after the function definition? Like the following:
The code is as follows:
 
function sayHello() 
{ 
alert("hello"); 
}(); 

Unfortunately, the above method will report js syntax errors.
Because the Javascript parser resolves the global or internal function keyword into a function declaration, not a function expression, by default, when the parser resolves the global or internal function keyword.

That is, the last pair of braces is resolved by default to a function without a name, and a syntax error message is thrown because the function declaration requires a name.

=== = "and you might wonder, if I pass in the argument in braces, will it be resolved into an expression?
The code is as follows:
 
function sayHello() 
{ 
alert("hello"); 
}(1); 

Indeed, there are no mistakes. But the above is the same as the following
The code is as follows:
 
function sayHello() 
{ 
alert("hello"); 
}; 
(1); 

These two sentences are completely irrelevant, and the function still won't execute

3. Write it correctly
For JavaScript, parentheses () cannot contain statements, so at this point, the parser to parse the function keyword, the corresponding code will be parsed into function expression, rather than a function declaration so, as long as the braces will code (including function part and in the back with a pair of curly braces) all around.
The code is as follows:
 
(function sayHello() 
{ 
alert("hello"); 
}()); 

Another way to write it is to remove the curly braces from the back, as
The code is as follows:
 
(function sayHello() 
{ 
alert("hello"); 
})(); 

Recommendations are used in the first way.
However, many good js libraries currently use the second approach.
For example: drawing for web graphics: git, draw2d...

Related articles: