It will take you one minute to understand the detailed graphic code of JavaScript closures.

What is closure?

Look at a piece of code first:

function a(){
    var n = 0;
    function inc() {
        n++;
        console.log(n);
    }
    inc();  
    inc(); 
}
a(); //控制台输出1，再输出2

Simple. Let’s look at a piece of code again:

function a(){
    var n = 0;
    this.inc = function () {
        n++; 
        console.log(n);
    };
}
var c = new a();
c.inc();    //控制台输出1
c.inc();    //控制台输出2

Simple.

What is closure? This is closure!

# Functions that have access to variables in the scope of another function are closures. Here the inc function accesses the variable n in the constructor a, so a closure is formed.

Let’s look at a piece of code again:

function a(){
    var n = 0;
    function inc(){
       n++; 
       console.log(n);
    }
    return inc;
}
var c = a();
c();    //控制台输出1
c();    //控制台输出2

Look at how it is executed:

var c = couter(), this sentence couter() returns the function inc, then This sentence is equivalent to var c = inc;

c(), this sentence is equivalent to inc(); Note that the function name is just an identifier (a pointer to the function), and () is the execution function.

The translation of the last three sentences is: var c = inc; inc(); inc();, is it different from the first code? No.

What is closure? This is closure!

All textbook tutorials like to use the last paragraph to explain closure, but I think this complicates the problem. What is returned here is the function name. Students who have not seen Tan Haoqiang’s C/C++ programming may not immediately realize the difference between using () and not. In other words, this way of writing has its own trap. Although this way of writing is more elegant, I still like to simplify the problem. Look at code 1 and code 2. Are you still struggling with the function call? Are you still struggling with the value of n?

Why do you write it like this?

We know that each function of js is a small dark room. It can obtain external information, but the outside world cannot directly see the content inside. Put variable n into a small black room. Except for the inc function, there is no other way to access variable n. Moreover, defining variable n with the same name outside function a does not affect each other. This is the so-called enhanced "encapsulation" .

The reason why return is used to return the function identifier inc is because the inc function cannot be directly called outside the a function, so return inc is linked to the outside. This in code 2 also links inc to the outside. .

Common Traps

Look at this:

function createFunctions(){
    var result = new Array();
    for (var i=0; i < 10; i++){
        result[i] = function(){
            return i;
        };
    }
    return result;
}
var funcs = createFunctions();
for (var i=0; i < funcs.length; i++){
    console.log(funcs[i]());
}

At first glance, I thought it would output 0~9, but I never expected to output 10 10s?

The trap here is: the function with () is the execution function! A simple sentence like var f = function() { alert(‘Hi’); }; will not pop up a window. Only when followed by f(); will the code inside the function be executed. The translation of the above code is:

var result = new Array(), i;
result[0] = function(){ return i; }; //没执行函数，函数内部不变，不能将函数内的i替换！
result[1] = function(){ return i; }; //没执行函数，函数内部不变，不能将函数内的i替换！
...
result[9] = function(){ return i; }; //没执行函数，函数内部不变，不能将函数内的i替换！
i = 10;
funcs = result;
result = null;

console.log(i); // funcs[0]()就是执行 return i 语句，就是返回10
console.log(i); // funcs[1]()就是执行 return i 语句，就是返回10
...
console.log(i); // funcs[9]()就是执行 return i 语句，就是返回10

Why is only result collected but not i? Because i is still referenced by function. Just like a restaurant, the plates are always limited, so the waiter will patrol the table to collect the empty plates, but how dare he collect the plates that still contain vegetables? Of course, if you manually empty the dishes on the plate (=null), the plate will be taken away. This is the so-called memory recycling mechanism.

As for how the value of i can still be retained, in fact, after reading all the way from the beginning of the article, there should be nothing to worry about. Shouldn’t one piece of the food on the plate be missing after eating one piece?

To summarize

A closure is a function that refers to a variable of another function. Because the variable is referenced, it will not be recycled, so it can be used to encapsulate a private variable. This is both an advantage and a disadvantage. Unnecessary closures will only increase memory consumption! In addition, when using closures, you should also pay attention to whether the value of the variable meets your requirements, because it is like a static private variable. Closures are usually mixed up with many things. Only by getting in touch with them can you deepen your understanding. Here is just the beginning to talk about the basic things.

The above is the detailed content of It will take you one minute to understand the detailed graphic code of JavaScript closures.. For more information, please follow other related articles on the PHP Chinese website!