The ancients said, "It is better to teach a person how to fish than to teach him a fish." If you don't have a teacher, you can only learn to "fish" by yourself. Let’s start simple!
The following lines of code are the most familiar, but do you know why they are written like this? Why add these few lines of code to the page? The jQuery object has already been introduced.
(function($){
//Function The implementation code
})(jQuery);
I’ll start from this! Programmers all know how to google and baidu. So do I... Oh! It turns out that this is an anonymous function of javascript.
What is this anonymous function? Take your time and learn!
There are generally three ways to define a function in JavaScript:
1. Function keyword (function) 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 one is the most commonly used method. The last two methods copy a function to the variable Name. These two functions have no names. Are these so-called anonymous functions? See the explanation below!
There is a difference between function literals and Function() constructors!
(1). The function literal is an anonymous function, and 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 does not.
var f = function fact(x) {
if (x < = 1)
return 1;
else
return x*fact(x-1);
};
(2). Function The () constructor allows Javascript code to be dynamically created and compiled 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.
var y = "global";
function constructFunction () {
var y = "local";
return new Function("return y"); // Unable to obtain local variable
}
alert(constructFunction()()); // Output "global"
There is also a name involved here, which is the Function object. The Function object is an inherent object in JavaScript. All functions are actually a Function object. So the three above are all function objects.
The above can be summarized as follows: function objects can create functions in ordinary and conventional ways and construction methods, and functions can also have no names (anonymous functions).
Continuing with anonymous functions, as the name suggests, anonymous functions are functions without actual names. For example, let's take the example above. Remove the name of the function, and then determine whether 2 and 3 are the same function:
alert(typeof function(){}); // "function"
alert(typeof function(a){return a;}); // "function"
alert(typeof new Function( "a","return a;")) // "function"
All return function objects. It seems to have no name but it is still a function. So how do we call an anonymous function?
To call a function, we must have a way to locate it and reference it. So, we'll need to find a name for it. This is the role of "Name" in Examples 2 and 3. And this is also the format we often see.
There is actually another way to do it here, that is, the jQuery code given at the beginning is to use () to enclose the anonymous function, and then add a pair of parentheses (including the parameter list) after it. Let’s take a look at the code below!
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? Maybe you will understand if you look at the code again when you are not busy.
// Assign the anonymous function object to abc
var abc=function(x,y){return x y;};
alert((abc).constructor==(function(x,y){return x y;}).constructor);
// abc The constructor is the same as the constructor of the anonymous function. In other words, the implementation of the two functions is the same.
If you think this application is still strange, just take a look at this explanation I read online.
Parentheses 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, the pair of parentheses plus the 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.
Finally let’s look at the code pattern of anonymous functions!
Error mode: It won't work and 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. 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 .
( function(){ alert(2); } ( ) );
3. Void operator: Use the void operator to perform a single operand that is not surrounded by parentheses.
void function(){ alert(3); }()
These three methods are equivalent, it depends on what you think.
Haha! That’s almost it! This time I understood that the first few sentences of jQuery turned out to be function literals!
(Anonymous function)(parameter) (function($){})(jQuery);
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
