How to use js closures in actual projects

This time I will show you how to use js closures in practical projects, and what are the precautions for using js closures in practical projects. The following is a practical case, let's take a look.

A closure is a collection of a function and the environment of its internal public 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 externally defined variables be called inside displayName? name, because the js internal function has the permission to obtain the variables in the external function.

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 a syntax error will be reported....

console.log(i); found that i output 3 times, that is to say, After setTimeout 1000 milliseconds, when the closure function is executed, the for loop has ended. i is a fixed value, which does not achieve the effect we expected.

console.log(this); It is found that this points to Window, which means that 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:

How to use the website generator VuePress

VuePress generates a website

The above is the detailed content of How to use js closures in actual projects. For more information, please follow other related articles on the PHP Chinese website!