Function function in JavaScript

A function is a reusable block of code that is event-driven or executed when it is called. Next, follow the editor to learn the function function in JavaScript. Friends, come and join us. Let’s learn

First of all, I will introduce you to several ways to define functions in JavaScript:

1. The most basic Used as a separate function declaration.

The code is as follows:

function func(){

or

var func=function(){}

2. Use as a class constructor:

function class(){}
class.prototype={};
var item=new class();

3. Use as closure:

(function(){
//独立作用域
})();

4. Can be used as selector:

var addEvent=new function(){
   if(!-[1,]) 
      return  function(elem,type,func){
         attachEvent(elem,'on'+type,func);
      };
   else 
      return function(elem,type,func){
          addEventListener(elem,type,func,false);
      }
};//避免了重复判断

5. Mixed application of the above four situations:

var class=new function(){
var privateArg;//静态私有变量
function privateMethod=function(){};//静态私有方法
return function(){/*真正的构造器*

Types of JavaScript function functions: Mainly introduce ordinary functions, anonymous functions, and closure functions

1. Introduction to ordinary functions

1.1 Example

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

1.2 Coverage of functions with the same name in Js

In Js, functions are not overloaded. Define functions with the same function name and different parameter signatures, and the following functions Will overwrite the previous function. 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 parameters when it was defined quantity.

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

1.4 Default range 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

can be Functions are 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 Unnamed anonymous function

2.2.1 Description
is when the function is declared, 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 Scenario

①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, and function B references outside function B. variable, 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 and references the 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, the resources occupied by showa are released due to the scope.

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 the 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 variables inside function funA, because the variables of funA cannot be directly accessed from the outside.

The above content is this article’s introduction to the function function in js. I hope you like it. For more related tutorials, please visit JavaScript Video Tutorial!