A brief discussion on the types of JavaScript functions_Basic knowledge

This article mainly introduces ordinary functions, anonymous functions, and closure functions

1. Introduction to common functions
1.1 Example

Copy code The code is as follows:

function ShowName(name) {
alert(name);
}

1.2 Overwriting of functions with the same name in Js

In JS, functions are not overloaded. If you define functions with the same function name and different parameter signatures, the later functions will overwrite the previous functions. When called, only the following functions will be called.

Copy code The code is as follows:

var n1 = 1;

function add(value1) {
Return n1 1;
}
alert(add(n1));//The following function is called, output: 3

function add(value1, value2) {
Return value1 2;
}
alert(add(n1));//Output: 3

1.3 arguments object

arguments is similar to C#'s params, operating variable parameters: the number of parameters passed into the function is greater than the number of parameters when defined.

Copy code The code is as follows:

function showNames(name) {
alert(name);//Zhang San
for (var i = 0; i alert(arguments[i]);//Zhang San, Li Si, Wang Wu
}
}
showNames('Zhang San','Li Si','Wang Wu');

1.4 Default range value of function

If the function does not specify a return value, the default return value is 'undefined'

Copy code The code is as follows:

function showMsg() {
}
alert(showMsg());//Output: undefined

　

2. Anonymous function

2.1 Variable anonymous function

2.1.1 Description
Functions can be assigned to variables and events.

2.1.2 Example

Copy code The code 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 first declare a function with a name and then assign it to a variable or event, you will abuse the function name.

2.2 Nameless anonymous function

2.2.1 Description
That is, when the function is declared, it is followed by the parameters. When JS syntax parses this function, the code inside is executed immediately.

2.2.2 Example

Copy code The code is as follows:

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

2.2.3 Applicable Scenarios
①It only needs to be executed once. If the browser is loaded, the function only needs to be executed once and will not be executed later.

3. Closure function

3.1 Description

Assume that function A declares a function B inside, function B refers to a variable outside 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 reference and local reference

Copy code The code 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 function funA. Repeatedly running allShowA() will output the accumulated values ​​​​of 1, 2, 3, 4, etc.

Execute the function partShowA(), because only the local variable showa is declared internally to reference funA. After execution, due to the scope, the resources occupied by showa are released.

The key to closure is scope: the resources occupied by global variables will only be released when the page changes or the browser is closed. When var allShowA = funA(), it is equivalent to allShowA referencing funB(), so that the resources in funB() will not be recycled by GC, so the resources in funA() will not be recycled either.

3.2.2 Example 2: Parametric closure function

Copy code The code 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 within parent function funA

Copy code The code is as follows:

function funA() {
var i = 0;
function funB() {
         i ;
alert(i)
}
AllShowC = function () {// allShowC refers to the anonymous function and shares the variable i
with funB          i ;
alert(i)
}
Return funB;
}
var allShowA = funA();
var allShowB = funA();//allShowB refers to funA, allShowC is re-bound internally and shares the variable i
with allShowB

3.3 Applicable Scenarios

① Ensure the safety of the variables inside the function funA, because the variables of funA cannot be directly accessed from the outside.

Have you guys learned anything about the JavaScript function? If you have any questions, please leave me a message.