JS closure of the use of the basic knowledge _

Let's look at the closure's purpose. In fact, we can do a lot of things by using closures. For example, simulate object-oriented code style, more elegant, more concise expression of code, in some ways to improve the efficiency of code execution.

1 anonymous self-execution functions

We know all the variables, if not the var keyword, then the default is added to the global object's properties, such a temporary variable to join the global object has a lot of disadvantages,
For example, other functions may misuse these variables, causing the global object to be too large, affecting the speed of access (because the value of the variable is required to traverse from the prototype chain).
In addition to using the var keyword for each variable, we often encounter situations where a function needs to be executed once and its internal variables are not maintained.
such as the initialization of the UI, then we can use the closure:

Copy Code code as follows:

var Datamodel = {
Table: [],
Tree: {}
};

(function (DM) {
for (var i = 0; i < dm.table.rows; i++) {
var row = Dm.table.rows[i];
for (var j = 0; j < Row.cells; i++) {
Drawcell (i, j);
}
}

Build Dm.tree
}) (Datamodel);

We created an anonymous function and executed it immediately, because the external cannot reference the variable inside it,
So it will be released soon after execution, and the key is that this mechanism will not pollute the global object.

2 Cache

To take another example, imagine that we have a function object that is time-consuming to process, and each call takes a long time,
Then we need to store the computed values, and when we call this function, we first look in the cache, and if we can't find it, we do the calculation.
It then updates the cache and returns the value, and if found, returns the lookup value directly. Closures are exactly what can be done because it does not release external references,
Thus the value within the function can be preserved.

Copy Code code as follows:

var Cachedsearchbox = (function () {
var cache = {},
Count = [];
return {
Attachsearchbox:function (DSID) {
if (Dsid in cache) {//If the result is in the cache
Return cache[dsid];//directly to the object in the cache
}
var FSB = new Uikit.webctrl.SearchBox (DSID);/new
CACHE[DSID] = fsb;//Update cache
if (Count.length > 100) {//Yasumasa cache size <=100
Delete Cache[count.shift ()];
}
return FSB;
},

Clearsearchbox:function (DSID) {
if (Dsid in cache) {
Cache[dsid].clearselection ();
}
}
};
})();

Cachedsearchbox.attachsearchbox ("input1");

So, when we call Cachedsearchbox.attachserachbox ("INPUT1") for the second time,
Instead of creating a new SearchBox object, we can go through the object from the cache.

3 Implementation Package

You can take a look at an example of encapsulation, where you can't access variables outside of person, and access it by providing a closure:

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;
}
}
}();

Print (person.name);//Direct access, the result is undefined
Print (Person.getname ());
Person.setname ("Abruzzi");
Print (Person.getname ());

The results were as follows:

Undefined
Default
Abruzzi

Another important use of 4 closures is to implement object-oriented objects, and traditional object languages provide template mechanisms for classes,
Such different objects (instances of the class) have independent members and states, Non-interference. Although there are no such mechanisms in JavaScript, but by using closures,
We can simulate such a mechanism. Or in the example above:

Copy Code code as follows:

function person () {
var name = "Default";

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


var john = person ();
Print (John.getname ());
John.setname ("John");
Print (John.getname ());

var jack = person ();
Print (Jack.getname ());
Jack.setname ("Jack");
Print (Jack.getname ());

The results of the operation are as follows:

Default
John
Default
Jack
This code shows that both John and Jack can be referred to as instances of the class of person, since these two instances are independent and unrelated to the access of name to this member.

The above is the role of JS closure, very simple to understand it, I hope that the small partners to help