Example explanation of closures and callbacks in JavaScript

This article mainly explains js closures and callbacks, the concepts and characteristics of closures, and analyzes the steps and methods of use with examples

1. Closures

Closure (closure) is a difficulty and characteristic of the Javascript language. Many advanced applications rely on closures.

Closures have three characteristics:

1. Function nested functions;

2. External parameters and parameters can be referenced inside the function Variables;

3. Parameters and variables will not be recycled by the garbage collection mechanism.

A closure refers to a function that has access to a variable in the scope of another function. The most common way to create a closure is to create another function within a function and access it through another function. local variables of this function. One advantage and disadvantage of using closures is that local variables can reside in memory and global variables can be avoided. Global variables are callable in every module, which is bound to be disastrous. Therefore it is recommended to use private, encapsulated local variables. After the general function is executed, the local active object is destroyed, and only the global scope is saved in the memory. But the situation with closures is different!

Example 1:

//Closure is when the return value of a function is another function. From outside outer, you can access the local parts of outer through this returned function. Variable.

function outer(){
  var val = 0;
  return function (){
   val += 1;
   document.write(val + "<br />");
  };
}
var outObj = outer();
outObj();//1，执行val += 1后，val还在
outObj();//2
outObj = null;//val 被回收
var outObj1 = outer();
outObj1();//1
outObj1();//2

Closure will always save the variable in memory. If used improperly, it will increase memory consumption (if many outer() are defined in the above example, the memory A lot of val variables will be saved in it).

Garbage collection principle of javascript:

(1) In javascript, if an object is no longer referenced, then the object will be recycled by GC;

(2) If two objects refer to each other and are no longer referenced by a third party, then the two objects that refer to each other will also be recycled.

So what are the benefits of using closures? The benefits of using closures are:

1. Hope a variable will reside in memory for a long time

2. Avoid the pollution of global variables

3. The existence of private members

2. Callback

Principle of callback function: I’m leaving now , I will notify you when it arrives." This is an asynchronous process. During the process of "I leave" (function execution), "you" can do anything, and "notify you" (callback) when "arrives" (function execution is completed). The subsequent process.

Example 1:

##

function doSomething(callback){
  callback(1,2);
}
function numberAdd(a,b){
  document.write(a+b);
}
doSomething(numberAdd);//3

Example 2:

##

function Thing(name){
  this.name = name;
}

//Add the doSomething method to the Thing class. The constructor calling pattern is used here

Thing.prototype.doSomething = function(callback){
 callback(this.name);
};
function showName(name){
 document.write(name);
}
var t = new Thing("zhangsan");
t.doSomething(showName);//zhangsan

If you have an array of numbers, you want to write Public method of sorting, but the sorting method (from small to large or from large to small) is decided by the person who calls the sorting method. This sorting method can be implemented using callbacks. Of course, you can write two methods, one from small to large. For sorting, one is the sorting method from large to small. I personally think that the decision-making power is handed over to the actual business development engineer, and he decides how to deal with it. This idea is different from what we usually come into contact with, and it is a bit unfamiliar. But this idea is especially beneficial in asynchronous programming. I don’t know if my understanding is correct. The following example code is a typical use case of callbacks:

##

var arr = [25,13,33,8,23,32];
Array.prototype.sort = function(callback){
  var arr = this;
  var i = 0;//i在这里定义与在for循环的括号内（for(var i = 0; i < ...)）定义是一样的
  for(; i < arr.length-1; i++){
   var j = i + 1;
   for(; j < arr.length;j++){
    if(callback(arr[i],arr[j])){
     var temp = arr[i];
     arr[i] = arr[j];
     arr[j] = temp;
    }
   } 
  }
return arr;
};
//a-b>0表示数组从小到大排序
arr.sort(function(a,b){
  return a - b > 0;
});
document.write(arr.join(",") + "<br />");//8,13,23,25,32,33
//b-a>0表示数组从大到小排序
arr.sort(function(a,b){
  return b - a > 0;
});
document.write(arr.join(","));//33,32,25,23,13,8

The above is the detailed content of Example explanation of closures and callbacks in JavaScript. For more information, please follow other related articles on the PHP Chinese website!