This article mainly introduces ordinary functions, anonymous functions, and closure functions
1. Introduction to ordinary functions
1.1 Example
The code copy is as follows:
function ShowName(name) {
alert(name);
}
1.2 Overwrite of functions with the same name in Js
In Js, functions are not overloaded. They define functions with the same function name and different parameter signatures. The subsequent functions will override the previous functions. When called, only the following functions will be called.
The code copy is as follows:
var n1 = 1;
function add(value1) {
return n1 + 1;
}
alert(add(n1));//The following function is called, the output is: 3
function add(value1, value2) {
return value1 + 2;
}
alert(add(n1));//Output: 3
1.3 arguments object
arguments are similar to C# params, operating variable parameters: the number of parameters passed in function is greater than the number of parameters at the time of definition.
The code copy is as follows:
function showNames(name) {
alert(name);//Zhang San
for (var i = 0; i < arguments.length; i++) {
alert(arguments[i]);//Zhang San, Li Si, Wang Wu
}
}
showNames('Zhang San','Li Si','Wang Wu');
1.4 The default range value of the function
If the function does not specify the return value, the default return is 'undefined'
The code copy is as follows:
function showMsg() {
}
alert(showMsg());//Output: undefined
2. Anonymous functions
2.1 Variable anonymous functions
2.1.1 Description
Functions can be assigned to variables and events.
2.1.2 Example
The code copy is as follows:
//Variable anonymous function, the left side can be variables, events, etc.
var anonymousNormal = function (p1, p2) {
alert(p1+p2);
}
anonymousNormal(3,6);//Output 9
2.1.3 Applicable scenarios
① Avoid function name pollution. If you declare a function with a name first and then assign it to a variable or event, it will cause abuse of the function name.
2.2 Anonymous function without name
2.2.1 Description
That is, when the function is declared, the parameters are followed. When Js syntax parses this function, the code inside is executed immediately.
2.2.2 Example
The code copy is as follows:
(function (p1) {
alert(p1);
})(1);
2.2.3 Applicable scenarios
① Only execute once. If the browser loads, it only needs to execute functions that are not executed later.
3. Closure function
3.1 Description
Suppose that function A declares a function B internally, function B refers to a variable other than function B, and the return value of function A is a reference to function B. Then function B is a closure function.
3.2 Example
3.2.1 Example 1: Global References and Local References
The code copy is as follows:
function funA() {
var i = 0;
function funB() { //Closure function funB
i++;
alert(i)
}
return funB;
}
var allShowA = funA(); //Global variable reference: cumulative output 1, 2, 3, 4, etc.
function partShowA() {
var showa = funA();// Local variable reference: only output 1
showa();
}
allShowA is a global variable that references the function funA. Repeat allShowA() and will output accumulated values such as 1, 2, 3, 4.
Execute the function partShowA(), because only the local variable showa is declared internally to reference funA. After execution, the resources occupied by showa are released due to the scope relationship.
The key to closure is scope: resources occupied by global variables will only be released after the page is changed or the browser is closed. When var allShowA = funA(), it is equivalent to allShowA referring to funB(), so that the resources in funB() are not recycled by GC, so the resources in funA() will not be.
3.2.2 Example 2: Parametered closure function
The code copy is as follows:
function funA(arg1,arg2) {
var i = 0;
function funB(step) {
i = i + step;
alert(i)
}
return funB;
}
var allShowA = funA(2, 3); //The call is funA arg1=2, arg2=3
allShowA(1);//The call is funB step=1, output 1
allShowA(3);//The call is funB setp=3, output 4
3.2.3 Example 3: Variable sharing in parent function funA
The code copy is as follows:
function funA() {
var i = 0;
function funB() {
i++;
alert(i)
}
allShowC = function () {// allShowC refers to anonymous functions and shares variable i with funB
i++;
alert(i)
}
return funB;
}
var allShowA = funA();
var allShowB = funA();//allShowB references funA, allShowC rebinds internally, and shares variable i with allShowB
3.3 Applicable scenarios
① Ensure the security of variables inside function funA, because the external cannot directly access funA variables.
Have you any idea about JavaScript's function function? If you have any questions, please leave me a message.