Global variables and local variables

// Global variables: Variables that can be accessed from anywhere are called global variables
Global variables are stored in memory from the moment they are created
var age = 20;
function a(){
   console.log(age); 
}
a();	/ / 20

// Local variables: for example, a variable defined by var in a function can only be accessed inside the function
// The local variable is destroyed when the function is finished
function b(){
    var age = 20;
}
console.log(age); // Uncaught ReferenceError: age is not defined
Copy the code

All free variable lookups are made to the parent scope where the function is defined

What is a closure?

2-1 Closure principle

Closures are based on the normal garbage collection mechanism, that is, when a function (function scope) is executed, all declared variables are released and collected by the garbage collector. Closures, however, use a trick that allows variables in a scope to survive the execution of the function without being garbage collected.

Advantages and disadvantages of 2-2 closures

Advantages: Easy to call local variables declared in the context, logic close, you can create a function in a function, avoid the problem of parameter passing

Disadvantages: Because closure is used, functions and variables can not be destroyed after execution, but remain in memory, if the use of a large number of closures will cause memory leaks, memory consumption

Common closure writing method

The formation of a 3-1 closure

In a nested function, the parent function calls and returns a child function that uses a local variable defined in the parent function’s scope, resulting in a closure that is not garbage collected after the parent function completes execution

function bar(){
    var num = 0;
    function foo(){
        num ++;
        console.log(num);
    }
    return foo;
}
var f = bar();
f(); / / 1
f(); / / 2
Copy the code

In the bar function, declare a variable num that belongs to the scope of the bar function. The bar function returns a function foo, which is nested, with num popped inside the function. Var f = bar(); Bar is carried out, but after the execution, num variable has not been released recycling, because bar inside the function return value also waiting to use this variable, this time foo () that contains the bar () within the scope of closure, has kept the scope can live, and will not be rid of garbage collection mechanism, that is the role of the closure, For foo() to reference at any time.

var a = (function(){
    var num = 0;
    function b(){
        num ++;
        console.log(num);
    }
    returnb; }) (); a();/ / 1
a(); / / 2
Copy the code

Closure classic scenario

var btnList = document.getElementsByClassName("btn")
for(var i = 0; i < 6; I ++) {btnList[I]function(){
    	console.log("The first"+i+"A button was clicked.")}}// No matter which BTN is clicked, it will print "button 6 is clicked"
Copy the code
var btnList = document.getElementsByClassName("btn")
for(var i = 0; i < 6; i++）{
     (function(j){
         btnList[j].onclick = function(){
         	console.log("The first"+j+"A button was clicked.")
         }   
    })(i)
}
// Each time the for loop executes a self-executing function, each time the variable I is passed as an argument to the self-executing function, the self-executing function creates a variable j at a time.
// Then the JTH element btnList is bound to an onclick event, which is required to execute the function, but you did not click it, so j is not cleaned, so it is kept in the argument.
// Every self-executing function does the same thing, so the closure is generated. The variable j is not recycled, but is still waiting for you to use it.
Copy the code