Detailed explanation of the usage, advantages and disadvantages of anonymous functions in JavaScript (graphic tutorial)

Below I will bring you a detailed explanation of the usage, advantages and disadvantages of anonymous functions in JavaScript. Let me share it with you now and give it as a reference for everyone.

Anonymous functions can effectively ensure that Javascript is written on the page without causing pollution of global variables.

This is very effective and beautiful when adding Javascript to a page that is not very familiar.

1. What is an anonymous function?

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

Function keyword (function) statement:

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

Function Literals:

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

Function() constructor:

##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 It specifies any function name and can call itself when writing a recursive function, but not using the Function() constructor.

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

Function() constructor Allows dynamic creation and compilation of Javascript code at runtime. 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.

var y = "global";

function constructFunction() { var y = "local"; return new Function("return y"); // Unable to obtain local variables} alert( constructFunction()()); // Output "global" and function keyword definition have their own characteristics and are much more difficult to use than the Function() constructor,

so this technology is usually rarely used .

The function literal expression and the function keyword definition 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,

but what we usually call anonymous Functions refer to anonymous functions in the form of function literals.

3. Code mode of anonymous function

Error mode: It cannot work and the browser will report a syntax error.

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

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

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

Priority expression:

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

void operator:

void function(){ alert(3); }()These three methods are equivalent , hedger wang prefers the 3rd option for personal reasons, but in practical applications I see and use the 1st option.

4. Application of anonymous functions

The first sentence in "A Module Mode of Javascript" is "Global variables are the devil" ".

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 beautiful when adding Javascript to a page that is not very familiar.

In fact, anonymous functions are widely used in YUI and its corresponding examples, and are also widely used in other Javascript libraries.

The cornerstone of functional programming in Javascript.

For details, please see "Writing Beautiful JavaScript with Functional Programming Techniques" and "Functional JavaScript Programming Guide".

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Detailed explanation of javascript prototype prototype (basic course)

Detailed explanation of JavaScript cookie and simple example application (picture Text tutorial)

Several ways to comment code in javascript (Graphic tutorial)

The above is the detailed content of Detailed explanation of the usage, advantages and disadvantages of anonymous functions in JavaScript (graphic tutorial). For more information, please follow other related articles on the PHP Chinese website!