How to understand JS anonymous functions

The basic form of an anonymous function is (function(){...})(); the first bracket contains the function body, and the second bracket is to pass parameters to the anonymous function and execute it immediately. The function of the anonymous function is to avoid global variables. pollution and function name conflicts.

1. The function of parentheses

Pencillums can divide our expression combination into blocks, and each block, that is, each pair of parentheses, has a return value. This return value is actually the return value of the expression in parentheses. Therefore, when we use a pair of parentheses to surround an anonymous function, what the pair of parentheses actually returns is a Function object of the anonymous function. Therefore, a pair of parentheses plus an anonymous function is referenced by us just like a named function. So if you add a parameter list after this reference variable, the calling form of an ordinary function will be achieved.

Simply put, parentheses have a return value, which is the return value of the function or expression within the parentheses, so the return value of the function within the parentheses is equal to the return value of the parentheses

2. How to write anonymous functions

Method 1, call the function and get the return value. The coercion operator causes the function call to execute

(function(x,y){

alert(x+y);

return x+y;

}(3,4));

Method 2, call the function and get the return value. Forcing the function to be executed directly and then return a reference, the reference is then called and executed

(function(x,y){

alert(x+y);

return x +y;

})(3,4);

This method is also a favorite calling method used by many libraries, such as jQuery and Mootools.

Method 3, use void

void function(x) {

x = x-1;

alert(x);

}(9);

Method 4, use -/+ operator

-function(x,y){

alert(x+y);

return x+y;

}(3,4);

+function(x,y){

alert(x+y);

return x+y;

}(3,4);

--function(x,y){

alert(x+y );

return x+y;

}(3,4);

++function(x,y){

alert(x +y);

return x+y;

}(3,4);

Method 5, use the tilde (~)

~ function(x, y) {

alert(x+y);

return x+y;

}(3, 4);

Method 6, anonymous function execution is placed within square brackets

[function(){

console.log(this) // The browser’s console output window

} (this)]

Method 7, add typeof

typeof function(){

console.log(this) // The browser’s console output window

}(this)

Method 8, add delete before the anonymous function

delete function(){

console.log(this) // Browse The console output window

}(this)

Method 9, add void

void function(){

console.log before the anonymous function (this) // The browser has console output window

}(this)

Method 10, use new method, pass parameters

new function(win){

console.log(win) // window

}(this)

Method 11, use new, do not pass parameters

new function(){

console.log(this) // This here is not window

}

Method 12, comma operator

function(){

console.log(this) // window

}();

Mode 13, bitwise XOR operator

^function() {

console.log(this) // window

}();

Mode 14, comparison operator

function(){

console.log(this) // window

}();

Finally look at the wrong calling method

function(x,y){

alert(x+y);

return x+y;

}(3,4);

N ways of writing anonymous functions are as follows Display

The anonymous function has no actual name and no pointer. How to execute it?

Regarding the writing method of anonymous functions, it is very divergent~ The

+ sign is to convert the function declaration into a function expression. Let’s summarize the most common usage of

:

The code is as follows:

(function() {

alert('water');

})();

Of course you can also take parameters:

The code is as follows:

(function(o) {

alert(o) ;

})('water');

Want to use chain calls of anonymous functions? Very simple:

The code is as follows:

(function(o) {

console.log(o);

return arguments.callee;

})('water')('down');

We all know the common anonymous functions, let’s take a look at the uncommon ones:

The code is as follows:

~(function(){

alert('water');

})();//The writing is a bit cool~

The code is as follows:

void function(){

alert('water');

}();//It is said to be the most efficient~

The code is as follows:

+function(){

alert('water');

}();

The code is as follows:

-function(){

alert('water');

}();

The code is as follows:

~function(){

alert ('water');

}();

The code is as follows:

!function(){

alert('water');

}();

The code is as follows:

(function(){

alert('water');

}());//It feels a bit forced~

Related recommendations:

PHP callback function And detailed explanation of anonymous functions

Sharing the concept and usage of JS anonymous functions

Detailed explanation of PHP anonymous functions and anonymous classes

The above is the detailed content of How to understand JS anonymous functions. For more information, please follow other related articles on the PHP Chinese website!