Summary of anonymous functions in Javascript_javascript skills

1. What is an anonymous function?

There are generally three ways to define a function in Javascript:

1. Function keyword (function) statement:

   <code>function fnMethodName(x){alert(x);}</code>

2. Function Literals:

   <code>var fnMethodName = function(x){alert(x);}</code>

3. Function() constructor:

   <code>var fnMethodName = new Function('x','alert(x);')</code>

The above three methods define the same method function fnMethodName. The first method 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 literals and Function() constructors

1. Although the function literal is an anonymous function, the syntax allows you to specify any function name for it. It can call itself when writing a recursive function, but not using the Function() constructor.

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

2. The Function() constructor allows dynamic creation and compilation of Javascript code at runtime. In this way it is similar to the global function eval().
3. 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.
4. When creating a function using the Function() constructor, it does not follow the typical scope. It always executes it as a top-level function.

   <code>var y = "global";
   function constructFunction() {
     var y = "local";
     return new Function("return y"); <span>// 无法获取局部变量</span>
   }
   alert(constructFunction()()); <span>// 输出 "global"</span>
   </code>

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. The function literal expression is very close to the function keyword definition. 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 pattern of anonymous functions

Yesterdayhedger wang introduced several anonymous function code patterns on his blog:

Error mode: It won’t work and the browser will report a syntax error.

<code>function(){
 alert(1);
}();</code>

1. Function literal: First declare a function object and then execute it.

   <code>(function(){
    alert(1);
   } ) ( );</code>

2. 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.

   <code>( function(){
    alert(2);
   } ( ) );</code>

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

   <code>void function(){
    alert(3);
   }()</code>

These three methods are equivalent. Hedge Wang prefers the third method due to personal reasons, but in practical applications, what I have seen and used is the first method.

4. Application of anonymous functions

1. The first sentence in "A Module Pattern for Javascript" 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 examples, and are also widely used in other Javascript libraries.
2. Javascript is the cornerstone of functional programming. For details, please see "Writing Beautiful JavaScript with Functional Programming Techniques" and "Functional JavaScript Programming Guide" .