[Note] common use of JavaScript closures

The usage method summarized by myself .... Mark it!

1. Loop binding

No Use:

1 var lists = document. getElementsByTagName ('lil ');
2 for (var I = 0; I <lists. length; I <l; I ++ ){
3 lists [I]. onclick = function () {alert (I );};
4}
5

Result: The value of lists. length is displayed when you click each li.

Cause: the I value in The onclick event is only a reference, and the last loop is finished. I = lists. length.

Use:

1 var lists = document. getElementsByTagName ('lil ');
2 for (var I = 0; I <lists. length; I <l; I ++ ){
3 lists [I]. onclick = function (I) {return function () {alert (I) ;}} (I );
4}
5

Result: click each li and the I value corresponding to li is displayed.

Cause: Pass the I value to the internal function. At this time, the function has been executed. Therefore, the I value is the current value.

 

2. Configure access

No Use:

Function getType (type ){
Var list = {
'A': 'configure 1 ',
'B': 'configure 2 ',
'C': 'configure 3'
}
Return list [type];
}

Result: The required configuration value is returned.

Analysis: You need to redefine the list variable and assign values for each call;

Use:

1 var getType = function (){
2 var list = {
3 'A': 'configure 1 ',
4 'B': 'configure 2 ',
5 'C': 'configure 3'
6 };
7 return function (type ){
8 return list [type];
9 };
10 }();
11

Result: The required configuration value is returned.

Analysis: you only need to define and assign values to the list variable once.

 

3. Encapsulation class

No use:

1 function classa (name ){
2 This. Name = Name;
3 This. getname = function (){
4 return this. Name;
5}
6}

Result: The class is defined normally.

Use:

1 var classa = function (){
2 function Init (name ){
3 This. Name = Name;
4 This. getname = function (){
5 return this. Name;
6}
7}
8 return Init;
9 }();
10

Result: The class is further encapsulated. Looks more elegant.

 

4. Self-executed to avoid global variable contamination

No use:

1 var A = '1 ';
2 var B = '2 ';
3 alert (A + B );
4

Result: 12 is displayed.

Analysis: two global variables A and B are added.

Use:

1 ~ Function (){
2 var a = '1 ';
3 var B = '2 ';
4 alert (a + B );
5 }();
6

 

Result: 12 is displayed.

Analysis: After the function is executed, variables A and B disappear and no global variables exist.

 

5. Privatize common functions of JSON objects

No use:

1 var data = {
2 getA: function () {return 'A '},
3 getB: function () {return 'B '},
4 p_get: function () {return this. getA () + this. getB ();}
5}
6 data. p_get ();
7

 

Result: 'AB' is returned '.

Analysis: The geta and getb methods are only provided to p_get methods. They are private methods and should not be changed to public methods. Data. Geta () can also be accessed.

Use:

1 var data = function (){
2 function getA () {return 'A '};
3 function getB () {return 'B '};
4 var json = {
5 p_get: function () {return getA () + getB ();}
6}
7 return json;
8 }();
9 data. p_get ();
10

 

Result: 'AB' is returned ';

Analysis: geta and getb can only be accessed internally, but cannot be accessed through data. Geta. Similar to the second type.

 

For the time being, think of so many things. If the last sentence is OK, try to use as few closures as possible.