JavaScript Closure Usage Example Analysis _javascript skills

The concept and usage of JavaScript closure are analyzed in this paper. Share to everyone for your reference. Specifically as follows:

Mention closure, presumably everyone has heard, the following is my simple understanding.
To be honest, there are not many scenarios in which you actually manually write closures in your work, but the Third-party frameworks and components used in your project are more or less used for closures.
Therefore, it is very necessary to understand the closure. Oh...

One, what is closure

In short, it is a function that can read the internal variables of other functions.
Because of the nature of the JS variable scope, the external can not access internal variables, internal external variables.

Second, the use of the scene

1. Implement private members.
2. Protect namespaces and avoid polluting global variables.
3. Cache variables.

Let's look at one of the encapsulated examples:

Copy Code code as follows:

var person = function () {
Variable scope is internal to function and cannot be accessed externally
var name = "Default";

return {
Getname:function () {
return name;
},
Setname:function (newName) {
name = NewName;
}
}
}();

Console.log (Person.name); Direct access, the result is: undefined
Console.log (Person.getname ()); The result is: Default
Console.log (Person.setname ("LANGJT"));
Console.log (Person.getname ()); The result is: LANGJT

Then look at the commonly used closures in the loop to solve the problem of referencing external variables:

Copy Code code as follows:

var aLi = document.getelementsbytagname (' li ');
For (Var i=0, len=ali.length i<len; i++) {
Ali[i].onclick = function () {
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:

Copy Code code as follows:

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

III. Matters of note

1. Memory leaks

Because closures will allow variables in the function to be stored in memory, memory consumption is very large, so can not abuse the closure, otherwise it will cause Web page performance problems.
Like what:

Copy Code code as follows:

function foo () {
var odiv = document.getElementById (' J_div ');
var id = odiv.id;
Odiv.onclick = function () {
alert (odiv.id); There is a circular reference here, ie low version of the page after the shutdown Odiv is still in memory. So cache the base type as much as possible rather than the object.
alert (ID);
};
Odiv = null;
}

2. Variable naming

If the variables of the internal function are the same as the variable names of the external functions, then the intrinsic function can no longer point to the variable with the same name as the external function.
Like what:

Copy Code code as follows:

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

In fact, the use of the above, the technical term is called the function of currying, is to accept multiple parameters of the function to accept a single parameter (the first parameter of the original function) of the function, and return to accept the remaining parameters and return the results of the new function of the technology. It also uses the features that the closures can cache, such as:

Copy Code code as follows:

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 the parameter values (+/‐) 1
Alert (inc (99));//100
Alert (Dec (101));//100
Alert (Adder (100) (2));//102
Alert (Adder (2) (100));//102

Again such as Ali Yuber's Seajs source code:

Copy Code code as follows:

/**
* Util-lang.js-the Minimal language enhancement
*/
function Istype (type) {
return function (obj) {
return {}.tostring.call (obj) = = "[Object] + type +"]
}
}

var IsObject = Istype ("Object");
var isstring = Istype ("String");

I hope this article will help you with your JavaScript programming.