Parsing JavaScript closures (with code)

The content of this article is about the analysis of JavaScript closures (with code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

A closure is a function that has access to a variable in the scope of another function. A common way to create a closure is to create a function inside another function. Before understanding closures, you first need to understand variable scope

Variable scope: global variables and local variables
1. Global variables
are directly defined in the global scope The variables

var name='Fakin';
function getName(){
  alert(name)
}
getName()//'Fakin'

and the function can directly read the global variables

2 and local variables
variables directly defined inside the function (before ES6, JS did not have block-level scope. )

function getName(){
  var name='Fakin';
}
alert(name)//undefined

Closure
After figuring out these two things, let’s take a look at what closure is!

Question 1: What is a closure? There are a lot of things mentioned above, but I can’t understand it?
Answer: My personal understanding of closure is a function that can read the internal variables of other functions

Question 2: How to use closure
Answer: Create a function inside a function, and in this function Reference the variables of the previous function, and finally talk about the return of this function. Isn’t it very convoluted? Here is an example

function f1(){
　　　　var n=999;
　　　　nAdd=function(){n+=1}
　　　　function f2(){
　　　　　　alert(n);
　　　　}
　　　　return f2;
　　}
　　var result=f1();
　　result(); // 999
　　nAdd();
　　result(); // 1000

In the above example, f2 is the closure function. Function f2 is returned in f1, and finally f1 is Assigned to result, result was run twice, and the result was what we wanted, which proved that in the closure, f2 quoted the variable 'n' of f1, but 'n' did not exist because after f1 was executed, then Destroying in memory, everyone should know that in JS, if a variable is not referenced by other places after the function is executed, it will be automatically destroyed.

Things to note when using closures

1: Since closure will cause the variables in the function to be stored in memory, the memory usage will be large, which will cause Rendering is stuck, etc., the browser runs slowly, and it can also cause memory leaks and other problems in IE browser
2: Since the child function references the variables of the parent function in the closure, the child function will modify the parent function variables, please Do not modify the value of the parent function variable at will

Thinking question

function count() {
    var arr = [];
    for (var i=1; i<=3; i++) {
        arr.push(function () {
            return i * i;
        });
    }
    return arr;
}

var results = count();
var f1 = results[0];
var f2 = results[1];
var f3 = results[2];
f1(); // 16
f2(); // 16
f3(); // 16

Why do f1 f2 f3 all return the same value, not what we want? So how can it not be solved with closure?
It’s actually very simple, we just need two more lines of code for the closure

function count() {
    var arr = [];
    for (var i=1; i<=3; i++) {
        arr.push((function (n) {
            return function () {
                return n * n;
            }
        })(i));
       //在自执行函数中把i传入相当于这个自执行函数的参数绑定了i，
       //当每次循环的时候不管变量怎么更改，这个函数的参数不会更改，所以返回咱们想要的结果
    }
    return arr;
}

var results = count();
var f1 = results[0];
var f2 = results[1];
var f3 = results[2];

f1(); // 1
f2(); // 4
f3(); // 9

The above is the detailed content of Parsing JavaScript closures (with code). For more information, please follow other related articles on the PHP Chinese website!