JS's closure Package

Closures are a feature of many languages, and in JS, closures mainly involve several other features of JS:

1) Scope chain

2) Garbage (memory) recovery mechanism

3) function nesting ... Wait a minute.

First, understand the meaning of the scope chain, in short, the scope chain is the function at the time of definition created, used to find the value of the variable used in an index.

His internal rule is to put the local variables of the function itself first, put the variables in its parent function next, put the variables in the higher-level function later, and so on until the global object.

When the function needs to query the value of a variable, the JS interpreter will go to the scope chain to find, from the first local variables to find, if not found the corresponding variable, then to the next level of the chain to find, once the variable is found, it will no longer continue.

If the desired variable is not found at the end, the interpreter returns undefined.

Then look at the JS memory recovery mechanism.

In general, a function at the beginning of execution, it will be defined in the variable memory space to save, in case of subsequent statements to use, wait until the function is finished to return, these variables are considered useless.

The corresponding memory space is also recycled. The next time the function is executed, all the variables return to their original state and are re-assigned to use. But

If another function is nested inside the function, this function is possible to be called externally. And this inner function uses some of the variables of the external function .

This memory-recycling mechanism can cause problems.

If an intrinsic function is called directly after the external function is returned, the intrinsic function cannot read the value of the variable in the external function that he needs.

So when the JS interpreter encounters a function definition, it automatically saves the function along with the variables he might use, including the local variables and the variables (free variables) of the parent and ancestor functions.

That is, building a closure, these variables will not be recycled by the memory collector, only if the internal function is not possible to be called later (for example, deleted, or without a pointer), the closure will be destroyed.

A variable that does not have any closure references is recycled when the next memory collection starts. In other words, with closures, nested function structures work, which is what we expect.

/** * Created by Xby on 2015/5/16.
* Modular Code*/varA = (function(){    varx = 1;//x is a local variable    functionBB () {//Private MethodX + +;    alert (x); }    functionCC () {//Private Methodx = x + 2;    alert (x); }    return{b:bb, c:cc}}) (); a.b (); //2A.C ();//4

Benefits of closures :

    1. Want a variable to be stationed in memory for a long time;
    2. Avoid the pollution of global variables;
    3. Existence of Private members
Usage of closures:
    1. Modular code;
    2. The index of the corresponding element is found directly in the loop.

When closures are not used:

<! DOCTYPE html>
function () {    var aLi = document.getElementsByTagName ("li");      for (var i = 0; i < ali.length;i++) {        function() {            alert (i);   // 3 3 3         };    }}
When using closures:
function () {    var aLi = document.getElementsByTagName ("li");      for (var i = 0; i < ali.length;i++) {        (function(i) {            function  () {                //0 1 2            };        }) (i)    }}
or (Another way):
function () {    var aLi = document.getElementsByTagName ("li");      for (var i = 0; i < ali.length;i++) {            = (function(i) {                return  function() {                    alert (i);//0 1 2                }            }) (i);}    }
Issues to be aware of when using closures:
IE will have a memory leak:
function () {    var odiv = document.getElementById ("div");     function () {        alert (odiv.id);    }}
The elements inside and outside of the element are referenced to each other.
Workaround 1:
function () {    var odiv = document.getElementById ("div");     function () {        alert (odiv.id);    }     function () {        null;    }}
Workaround 2:
function () {    var odiv = document.getElementById ("div");     var id  = odiv.id;     function () {        alert (odiv.id);    }     NULL ;}
　　
JS's closure Package