Detailed explanation of the use of js closures

This time I will bring you a detailed explanation of the use of js closures. What are the precautions when using js closures? The following is a practical case, let’s take a look.

closure is the combination of a function and the lexical environment within which that function was declared.

Closure is the combination of a function and the environment within which it exposes variables.

Simply put, closure = function environment

The first example of closure

function init() {
 var name = 'Mozilla'; // name is a local variable created by init
 function displayName() { // displayName() is the inner function, a closure
 alert(name); // use variable declared in the parent function 
 }
 displayName(); 
}
init();
because inner functions have access to the variables of outer functions, displayName() can access the variable name declared in the parent function, init().

In fact, this chestnut is very simple, displayName( ) is the closure function inside init(), and why can the externally defined variable name be called inside displayName? Because jsinternal function has the permission to obtain variables in external functions.

Second example

var data = [
 {'key':0},
 {'key':1},
 {'key':2}
];
function showKey() {
 for(var i=0;i<data.length;i++) {
   setTimeout(function(){
    //console.log(i); //发现i输出了3次3
   //console.log(this); // 发现 this 指向的是 Window
   data[i].key = data[i].key + 10;
   console.log(data[i].key)
   }, 1000);
 }
}
showKey();

Can the above example correctly output 10 11 12?

The answer is: No, and it will also report Syntax error....

console.log(i); found that i was output 3 times 3. In other words, after setTimeout 1000 milliseconds, when the closure function is executed, for loop has ended, i is a fixed value, and the effect we expected has not been achieved.

console.log(this); found that this points to Window, that is to say, the closure function implemented inside the function has been converted into a global function and stored in memory. .

So we need to define another execution function

var data = [
 {'key':0},
 {'key':1},
 {'key':2}
];
function showKey() {
 var f1 = function(n){
  data[i].key = data[i].key + 10;
  console.log(data[i].key)
 }
 for(var i=0;i<data.length;i++) {
   setTimeout(f1(i), 1000);
 }
}
showKey();
// 得到预期的 10 11 12

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

Detailed explanation of the use of Vue custom dynamic components

Detailed explanation of the steps of using js time-sharing function

The above is the detailed content of Detailed explanation of the use of js closures. For more information, please follow other related articles on the PHP Chinese website!