JavaScript closures Simple Comprehension

When it comes to closures, it must have been heard, and my simple understanding follows.
To tell the truth, there are not many scenes of actual manual closures in the work, but the third-party frameworks and components used in the project are more or less used in closures.
Therefore, it is very necessary to understand closures. Oh...

One, what is closures
In short, it is the function that can read the variables inside other functions.
Due to the nature of the JS variable scope, external variables cannot be accessed externally, and external variables can be used internally.

Second, the use of the scene
1. Implement a private member.
2. Protect namespaces and avoid polluting global variables.
3. Cache variables.

Let's look at an example of encapsulation:

var person = function () {    //variable scope is inside function, external cannot access    var name = "Default";    return {        getname:function () {            return name;        },        setname:function (newName) {            name = newname;< c14/>}}}    (); Console.log (Person.name); Direct access with the result: Undefinedconsole.log (Person.getname ()); The results were: Defaultconsole.log (Person.setname ("LANGJT")), Console.log (Person.getname ()); The result is: LANGJT

Then look at common closures in loops to solve the problem of referencing external variables:

var aLi = document.getelementsbytagname (' li '); for (Var i=0, len=ali.length; i<len; i++) {   Ali[i].onclick = Functio N () {     alert (i);//Whichever <li> element is clicked, the value that pops up is Len, indicating that I is the same as the value for printing I after for.   };}

After using closures:

var aLi = document.getelementsbytagname (' li '); for (Var i=0, len=ali.length; i<len; i++) {  Ali[i].onclick = (functi On (i) {    return function () {      alert (i);//Click the <li> element at this point and the corresponding subscript will pop up.    }  }) (i);}

Third, the matters needing attention
1. Memory leaks
Because the closure will make the variables in the function are stored in memory, memory consumption is very large, so can not abuse closures, otherwise it will cause the performance of the Web page.
Like what:

function foo () {   var odiv = document.getElementById (' J_div ');   var id = odiv.id;   Odiv.onclick = function () {     //alert (odiv.id), there is a circular reference here, Odiv is still in memory after the low version of IE page is closed. So try to cache the base type instead of the object.     alert (ID);   };   Odiv = null;}

2. Variable naming
If the variables of the intrinsic function and the variable name of the external function are the same, then the intrinsic function cannot point to the variable with the same name as the outer function.
Like what:

function foo (num) {  return function (num) {    console.log (num);   }} var f = new Foo (9); F (); Undefined

In fact, the above usage, the jargon called function currying, is to transform a function that accepts multiple parameters into a function that takes a single parameter (the first parameter of the initial function) and returns a new function that accepts the remaining parameters and returns the result. In essence, the features that can be cached by closures are also used, such as:

var adder = function (num) {    return function (y) {        return num+y;    };}; var inc = Adder (1); var dec = adder ( -1);//inc, Dec is now two new functions that will pass in parameter values (+/‐) 1alert (inc),//100alert (Dec (101));//100 Alert (Adder (2)),//102 alert (Adder (2) (100))//102

Again such as Ali Yuber's Seajs Source:

/** * util-lang.js-the Minimal language enhancement */function Istype (type) {  return function (obj) {    return {}.t Ostring.call (obj) = = "[Object" + Type + "]"  }}var IsObject = Istype ("object"); var isstring = Istype ("String");

JavaScript closures Simple Comprehension