This is the 9th day of my participation in the More text Challenge. For details, see more text Challenge

When you talk about closures, it’s a little hard to understand what a closure is, and some people think that anonymous functions are closures. In JavaScript advanced programming, closures are referred to as functions that refer to variables in the scope of another function, usually implemented in nested functions. In general terms, the child scope can access variables in the parent scope, but the parent scope cannot access variables in the child scope. The child scope forms a closure.

As you all know, the JS scope is divided into global scope and local scope. Js scope environment variable access sequence is made up of outside introversion, within the scope can access the variables under the current scope, but also can access to the current scope outside of the scope of variables, but the external scope cannot access to the internal scope of variables, so the inner scope to the closure of some private variables and can also be called a closure privatisation.

Here’s a simple closure example:

    function outFun(){
        var xx = 'xixi'
        return function() {
            return xx
        }
    }
    var newFun = outFun()
    console.log(newFun()) / / output xixi
Copy the code

Perhaps the following examples will become more common in the development process

    for(var i=1; i<5; i++) {
        setTimeout(function(){
            console.log(i)
        }, 100)}Copy the code

In general, the above case would have printed 1,2,3,4, but it ended up printing 5 four times, so why?

Js is a single threaded language, only one task can be executed at a time, each task is executed in sequence, for loop is a synchronous task, will be executed directly, setTimeout is a macro task, will be placed in the macro task queue, so when the loop is finished, I has become 5, when it is time to execute the timer task, The output of each timer can only be 5.

We can actually improve the output of this code by using closures

    for(var i=1; i<5; i++) {
        (function(i) {
            setTimeout(function(){
                console.log(i)
            }, 100)
        })(i)
    }
Copy the code

In this case, the code outputs 1,2,3,4, uses the closure to save the variable I, puts setTimeout in the immediate execution function, passes the loop value I in the for loop as an argument, and prints 1,2,3,4 after 100 milliseconds.

    for(var i=1; i<5; i++) {
        (function(i) {
            setTimeout(function(){
                console.log(i)
            }, 100)
        })(i*100)}Copy the code

In the above code, it is equivalent to starting 4 timers at the same time, I *100 is set for the 4 timers at different times, but the execution time is different, each timer interval is 100 milliseconds, to achieve the effect of printing every 100 milliseconds

To summarize the pros and cons of using closures:

Advantages:

  • Protect variables within functions
  • You can do variable caching
  • Anonymous self-executing functions can reduce memory consumption

Disadvantages:

  • A referenced private variable cannot be destroyed, increasing memory consumption and causing a memory leak. The solution is to manually assign the variable to null after use
  • Closures involve cross-scope access and incur performance penalties, which can be mitigated by storing cross-scope variables in local variables and accessing local variables directly