1) What is closure?

The result of a function execution is an inner function referenced by an external variable. If the inner function holds a variable in the scope of the executed function, a closure is formed.

With closures, one can read variables in a function, and two can store variables in a function in memory, protecting them from contamination. Because closures store variables in a function in memory, they consume internal memory, so you can’t abuse closures without affecting page performance. To free memory when closures are no longer needed, assign the variable of the inner function object to NULL.

2) Closure principle

Function execution is divided into two phases (precompilation phase and execution phase).

  • During the precompilation phase, if an internal function is found to use variables from an external function, a “closure” object is created in memory and the value of the strain is saved. If the “closure” already exists, the attribute value is added.
  • After execution, the function execution context is destroyed, as is the function’s reference to the closure object, but its inner function still holds a reference to the closure, so the inner function can continue to use the variables in the outer function.

Take advantage of the function scope, inside a function definition of the function will include external function of the activities of the object to add to its scope chain, function and its implementation scope chain destruction, but because of the internal function still in reference to the active object scope chain, so the activity object is not destroyed, until will be released after internal function is destroyed.

3) advantages

  • A variable in the scope of an external function can be accessed from an inner function, and the accessed variable is permanently stored in memory for later use.
  • Avoid variables contaminating the whole world.
  • Store variables in separate scopes as private members.

4) shortcomings

  • This has a negative impact on memory consumption. Because internal functions hold references to external variables, they cannot be garbage collected and increase memory usage, so improper use can lead to memory leaks.
  • It has a negative impact on processing speed. The hierarchy of closures determines the length of the scope chain that the referenced external variable passes through in the lookup.
  • Unexpected capyured values may be obtained.

5) Application scenarios

  • Application Scenario 1:The typical application is module encapsulation. Before the appearance of module specifications, closures were used to prevent variables from contaminating the whole world.
var fn = (function() {
    // This is a module private variable that cannot be accessed directly
    var foo = 0
    
    function fn() {}
    fn.proptype.bar = function bar() {
        return foo
    }
    return fn
}())
Copy the code
  • Application Scenario 2:Create closures in the loop to prevent unexpected values from being fetched.

The following code, regardless of which element triggers the event, will pop up 3. Because the function refers to the same I after it executes, and I is 3 after the loop ends.

for(var i = 0; i < 3; i++) {
    document.getElementById('id' + i).onfocus = function() {
        alert(i)
    }
}

// Can be solved by closure
function makeCallBack(num) {
    return function() {
        alert(num)
    }
}
for(var i = 0; i < 3; i++) {
    document.getElementById('id' + i).onfocus = makeCallBack(i);
}
Copy the code