Detailed explanation of JavaScript function types_javascript skills

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

Table of Contents

• Ordinary functions: Introduces the characteristics of ordinary functions: overrides with the same name, arguments objects, default return values, etc.
• Anonymous functions: Introducing the characteristics of anonymous functions: variable anonymous functions, nameless anonymous functions.
• Closure function: Introduces the characteristics of closure function.

1. Ordinary functions
1.1 Example

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.

var n1 = 1;
 
function add(value1) {
  return n1 + 1;
}
alert(add(n1));//调用的是下面的函数，输出：3
 
function add(value1, value2) {
  return value1 + 2;
}
alert(add(n1));//输出：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.

function showNames(name) {
  alert(name);//张三
  for (var i = 0; i < arguments.length; i++) {
    alert(arguments[i]);//张三、李四、王五
  }
}
showNames('张三','李四','王五');

1.4 Default return value of function

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

function showMsg() {
}
alert(showMsg());//输出：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

//变量匿名函数，左侧可以为变量、事件等
var anonymousNormal = function (p1, p2) {
  alert(p1+p2);
}
anonymousNormal(3,6);//输出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

(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

function funA() {
  var i = 0;
  function funB() { //闭包函数funB
    i++;
    alert(i)
  }
  return funB;
}
var allShowA = funA(); //全局变量引用：累加输出1,2,3,4等
 
function partShowA() {
  var showa = funA();//局部变量引用：只输出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

function funA(arg1,arg2) {
  var i = 0;
  function funB(step) {
    i = i + step;
    alert(i)
  }
  return funB;
}
var allShowA = funA(2, 3); //调用的是funA arg1=2，arg2=3
allShowA(1);//调用的是funB step=1,输出 1
allShowA(3);//调用的是funB setp=3,输出 4

3.2.3 Example 3: Variable sharing within parent function funA

function funA() {
  var i = 0;
  function funB() {
    i++;
    alert(i)
  }
  allShowC = function () {// allShowC引用匿名函数,与funB共享变量i
    i++;
    alert(i)
  }
  return funB;
}
var allShowA = funA();
var allShowB = funA();//allShowB引用了funA，allShowC在内部重新进行了绑定，与allShowB共享变量i

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.

The above is the entire content of this article, I hope it will be helpful to everyone’s study.