The ancients said, "It is better to teach fishing than to teach fishing." Without a teacher, you can only learn "fishing" by yourself. Let’s start with a simple one!
The following codes are the most familiar, but do you know why they are written like this? Why do you have added these few codes to the page and the jQuery object has been introduced?
(function($){
// Function implementation code
})(jQuery);
I'll start from this! Programmers know how to google and baidu. The same goes for me...oh! It turns out that this is an anonymous function of javascript.
What is this anonymous function? Take your time to learn!
JavaScript generally defines a function in three ways:
1. Function keyword statement:
function Name(a) {
return a;
}
2. Function Literals:
var Name = function(a){
return a;
}
3. Function() constructor:
var Name = new Function('a','return a;')
The above three methods define the same method function Name. The first is the most commonly used method. The latter two are copying a function to the variable Name, and these two functions have no names. Is this the so-called anonymous function? See the explanation below!
There is a difference between function literals and Function() constructors!
(1). A function literal is an anonymous function. The syntax allows you to specify any function name. You can call it yourself when writing a recursive function, but it cannot be done using the Function() constructor.
var f = function fact(x) {
if (x < = 1)
return 1;
else
return x*fact(x-1);
};
(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 every time it is executed and creates a new function object. Therefore, the efficiency of calling the Function() constructor in a loop or frequently executed function is very low. On the contrary, function literals are not recompiled every time they encounter it.
(4). When creating a function with the Function() constructor, it does not follow the typical scope, and it always executes it as a top-level function.
var y = "global";
function constructFunction() {
var y = "local";
return new Function("return y"); // Cannot get local variables
}
alert(constructFunction()()); // Output "global"
Here we also involve a name, that is, the Function object. The Function object is an inherent object in JavaScript. All functions are actually a Function object. Therefore, the three above are function objects.
The above can be summarized as: function objects can be created in general and constructed ways, and functions can also be named (anonymous functions).
Continue to anonymous functions, as the name implies, anonymous functions are functions without actual names. For example，Let's take the above example。 Remove the name of the function and determine whether 2 and 3 are a function:
alert(typeof function(){}); // "function"
alert(typeof function(a){return a;}); // "function"
alert(typeof new Function("a","return a;")) // "function"
All return function objects, which seem to have no name but are indeed functions. So how do we call an anonymous function?
To call a function, we must have a method to locate it and reference it. So, we will need to find a name for it. This is what this example 2 and 3 "Name" play. And this is also a format we often see.
There is actually another way here, that is, the jQuery code that is given just opened is, that is, use() to enclose the anonymous function, and then add a pair of brackets (including parameter list). Let's take a look at the following code!
alert((function(x,y){return x+y;})(2,3)); // "5"
alert((new Function("x","y","return x*y;"))(2,3)); // "6"
Many people may wonder why this method can be called successfully? If you don’t hurry and look at the code, you may understand.
// Assign anonymous function object to abc
var abc=function(x,y){return x+y;};
alert((abc).constructor==(function(x,y){return x+y;}).constructor);
// Abc's constructor is the same as anonymous function's constructor. That is to say, the implementation of the two functions is the same.
If you think this application is still very strange, just take a look at the explanation I read from the Internet.
Brackets can divide our expressions into pieces, and each piece, that is, each pair of braces, has a return value. This return value is actually the return value of the expression in brackets. Therefore, when we enclose an anonymous function with a pair of brackets, the parentheses return a Function object of an anonymous function. Therefore, adding an anonymous function to a pair of brackets is like a named function and we obtain its reference position. So if you add a parameter list after this reference variable, the call form of the ordinary function will be implemented.
Finally, let’s take a look at the code pattern of anonymous functions!
Error mode: It cannot work, the browser will report a syntax error.
function(){ alert(1); }();
1. Function literal: First declare a function object, and then execute it.
(function(){ alert(1); } ) ( );
2. Preferential expression: Since Javascript execution expressions are from the inside and outside of parentheses, declared functions can be enforced with parentheses.
( function(){ alert(2); } ( ) );
3. Void operator: Use the void operator to execute a separate operand that is not surrounded by parentheses.
void function(){ alert(3); }()
These three methods are equivalent, and it depends on your thoughts.
hehe! This is almost done! This time I understand that the first few sentences of jQuery turned out to be a function literal!
(Anonymous function)(parameter) (function($){})(jQuery);
The following codes are the most familiar, but do you know why they are written like this? Why do you have added these few codes to the page and the jQuery object has been introduced?
Copy the codeThe code is as follows:
(function($){
// Function implementation code
})(jQuery);
What is this anonymous function? Take your time to learn!
JavaScript generally defines a function in three ways:
1. Function keyword statement:
Copy the codeThe code is as follows:
function Name(a) {
return a;
}
2. Function Literals:
Copy the codeThe code is as follows:
var Name = function(a){
return a;
}
3. Function() constructor:
var Name = new Function('a','return a;')
The above three methods define the same method function Name. The first is the most commonly used method. The latter two are copying a function to the variable Name, and these two functions have no names. Is this the so-called anonymous function? See the explanation below!
There is a difference between function literals and Function() constructors!
(1). A function literal is an anonymous function. The syntax allows you to specify any function name. You can call it yourself when writing a recursive function, but it cannot be done using the Function() constructor.
Copy the codeThe code is as follows:
var f = function fact(x) {
if (x < = 1)
return 1;
else
return x*fact(x-1);
};
(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 every time it is executed and creates a new function object. Therefore, the efficiency of calling the Function() constructor in a loop or frequently executed function is very low. On the contrary, function literals are not recompiled every time they encounter it.
(4). When creating a function with the Function() constructor, it does not follow the typical scope, and it always executes it as a top-level function.
Copy the codeThe code is as follows:
var y = "global";
function constructFunction() {
var y = "local";
return new Function("return y"); // Cannot get local variables
}
alert(constructFunction()()); // Output "global"
Here we also involve a name, that is, the Function object. The Function object is an inherent object in JavaScript. All functions are actually a Function object. Therefore, the three above are function objects.
The above can be summarized as: function objects can be created in general and constructed ways, and functions can also be named (anonymous functions).
Continue to anonymous functions, as the name implies, anonymous functions are functions without actual names. For example，Let's take the above example。 Remove the name of the function and determine whether 2 and 3 are a function:
Copy the codeThe code is as follows:
alert(typeof function(){}); // "function"
alert(typeof function(a){return a;}); // "function"
alert(typeof new Function("a","return a;")) // "function"
All return function objects, which seem to have no name but are indeed functions. So how do we call an anonymous function?
To call a function, we must have a method to locate it and reference it. So, we will need to find a name for it. This is what this example 2 and 3 "Name" play. And this is also a format we often see.
There is actually another way here, that is, the jQuery code that is given just opened is, that is, use() to enclose the anonymous function, and then add a pair of brackets (including parameter list). Let's take a look at the following code!
Copy the codeThe code is as follows:
alert((function(x,y){return x+y;})(2,3)); // "5"
alert((new Function("x","y","return x*y;"))(2,3)); // "6"
Many people may wonder why this method can be called successfully? If you don’t hurry and look at the code, you may understand.
Copy the codeThe code is as follows:
// Assign anonymous function object to abc
var abc=function(x,y){return x+y;};
alert((abc).constructor==(function(x,y){return x+y;}).constructor);
// Abc's constructor is the same as anonymous function's constructor. That is to say, the implementation of the two functions is the same.
If you think this application is still very strange, just take a look at the explanation I read from the Internet.
Brackets can divide our expressions into pieces, and each piece, that is, each pair of braces, has a return value. This return value is actually the return value of the expression in brackets. Therefore, when we enclose an anonymous function with a pair of brackets, the parentheses return a Function object of an anonymous function. Therefore, adding an anonymous function to a pair of brackets is like a named function and we obtain its reference position. So if you add a parameter list after this reference variable, the call form of the ordinary function will be implemented.
Finally, let’s take a look at the code pattern of anonymous functions!
Error mode: It cannot work, the browser will report a syntax error.
function(){ alert(1); }();
1. Function literal: First declare a function object, and then execute it.
(function(){ alert(1); } ) ( );
2. Preferential expression: Since Javascript execution expressions are from the inside and outside of parentheses, declared functions can be enforced with parentheses.
( function(){ alert(2); } ( ) );
3. Void operator: Use the void operator to execute a separate operand that is not surrounded by parentheses.
void function(){ alert(3); }()
These three methods are equivalent, and it depends on your thoughts.
hehe! This is almost done! This time I understand that the first few sentences of jQuery turned out to be a function literal!
(Anonymous function)(parameter) (function($){})(jQuery);