Explanation of anonymous functions in Javascript_Experience exchange

1. What is an anonymous function?
There are generally three ways to define a function in Javascript:

Function keyword (function) statement:

Copy code Code As follows:

function fnMethodName(x){alert(x);}

Function Literals ):

Copy code The code is as follows:

var fnMethodName = function(x){alert (x);}

Function() constructor:

Copy code The code is as follows:

var fnMethodName = new Function('x','alert(x);')

The above three methods define the same method function fnMethodName. The first is the most commonly used method. The latter two copy a function to the variable fnMethodName, and this function has no name, that is, an anonymous function. In fact, quite a few languages ​​have anonymous functions.

2. The difference between function literal and Function() constructor
Although the function literal is an anonymous function, the syntax allows you to specify any function name for it. When writing a recursive function, you can call it yourself, but using the Function() constructor cannot.

Copy code The code is as follows:

var f = function fact(x) {
if (x else return x*fact(x-1);
};

Function() constructor allows runtime Javascript code Dynamic creation and compilation. In this way it is similar to the global function eval().
The Function() constructor parses the function body and creates a new function object each time it is executed. Therefore, the efficiency of calling the Function() constructor in a loop or frequently executed function is very low. In contrast, function literals are not recompiled every time they are encountered.
When you create a function using the Function() constructor, it does not follow the typical scope. It always executes it as a top-level function.

Copy code The code is as follows:

var y = "global";
function constructFunction() {
var y = "local";
return new Function("return y"); // Unable to obtain local variable
}
alert(constructFunction()()); / / Output "global"

Compared with function keyword definition, the Function() constructor has its own characteristics and is much more difficult to use, so this technology is usually rarely used. Function literal expressions and function keyword definitions are very close. Considering the previous difference, although there is news that literal anonymous functions have bugs in some webkit engines under OS X 10.4.3, the anonymous functions we usually refer to refer to anonymous functions in the form of function literals. For more details, you can read the Functions chapter of "JavaScript: The Definitive Guide, 5th Edition".

3. Code patterns of anonymous functions
Yesterday hedger wang introduced several code patterns of anonymous functions on his blog:

Error pattern: other It won't work, the browser will report a syntax error.

Copy code The code is as follows:

function(){
alert(1) ;
}();

Function literal: first declare a function object, and then execute it.

Copy code The code is as follows:

(function(){
alert(1 );
} ) ( );

Priority expression: Since Javascript executes expressions from the inside to the outside of the parentheses, you can use parentheses to force the execution of the declared function.

Copy code The code is as follows:

( function(){
alert(2 );
} ( ) );

Void operator: Use the void operator to perform a single operand that is not surrounded by parentheses.

Copy code The code is as follows:

void function(){
alert(3 );
}()

These three methods are equivalent. hedger wang prefers the third method for personal reasons, but in practical applications, what I have seen and used is the first method.
4. Application of anonymous functions

《A module mode of Javascript》 The first sentence in is "Global variables are the devil". Combined with the var keyword, anonymous functions can effectively ensure that Javascript is written on the page without causing pollution to global variables. This is very effective and elegant when adding Javascript to an unfamiliar page. In fact, anonymous functions are widely used in YUI and its corresponding paradigms, and are also widely used in other Javascript libraries.
Javascript is the cornerstone of functional programming. For details, please see "Writing beautiful JavaScript with functional programming techniques" and "Functional JavaScript Programming Guide》.​