Javascript closure Application

Javascript closure Application

In my impression, the closure of javascript belongs to the advanced category and is nothing more than a force installation during the interview. You see, one of the boys around me, one day I forced him to ask him what is a javascript closure, and he never heard of it. However, he started his front-end stuff very quickly, just like other young guys I have ever seen.

This shows that it does not seem important to know the closure.

However, I have written some front-end code over the past few days, and I think I should understand it.

The so-called closure, in my understanding, is a javascript function (parent function) contains a subfunction, and the outside can use this subfunction to access the variables in the parent function. The function of the closure is to protect the variables in these parent functions, so that these variables will survive after the runtime of the parent function, and will not be recycled by the javascript garbage collection mechanism.

How can this problem be solved? Examples.

For example, we output a bunch of list items on the page. Each list item has an onclick event:

• I am 1
• I am 2
• ...

We will find that there are a lot of repeated code in the list items, resulting in a lot of Page code. If we do not give each

Set events. After the page is loaded, bind the onclick events to them, which simplifies the page and reduces bandwidth consumption.

 

So how to bind events? Assume that we write:

Function hi (number) {alert (I am + number + !);} $ (Function () {for (var I = 1; I <= 100; I ++) {$ (# li + I ). bind (click, function () {hi (I );});}});

Then, when you click on each list item, "I am 100!" is displayed !". The reason is that I is 100 after the loop ends.

If this is the case:

Function hi (number) {return function () {// subfunction. The closure mechanism stores the incoming number in alert (I am + number + !); };}$ (Function () {for (var I = 1; I <= 100; I ++) {$ (# li + I ). bind (click, hi (I ));}});

Then we can get the expected results. The reason is that in the function hi (number), a closure is created to store the passed I when the event is bound.

To understand the preceding statement, it is necessary to bind the event here:

$ (# Li + I). bind (click, function definition );

It means that the element event is bound to the function definition, not a function running statement! Be sure to understand this. For example, function hi (numbert ){...} Is a function definition, and hi (I) is a function running statement.

Let's make a slight modification to the code. Let's take a look at the comparison:

Function hi (number) {// The function body is a normal execution statement alert (I am an acute subnode + number + !);} Function hi_bb (number) {// return a subfunction instance return function () {// subfunction, closure alert (I am + number + !); };}$ (Function () {for (var I = 1; I <3; I ++) {// at this time, the hi command is executed. A one-time message is displayed, binding failed $ (# li + I ). bind (click, hi (I); // when hi_bb is executed, a function definition is returned and bound successfully $ (# li + I ). bind (click, hi_bb (I ));}});

When the event is bound, the hi and hi_bb functions are executed. Hi, It is a normal execution statement. After hula completes the execution, the list item cannot be bound to the event. After hi_bb is executed, the function definition is returned, so the list item event is successfully bound.

Let's review the function of the closure:Protect the variables in the parent function so that these variables will survive after the runtime of the parent function, and will not be recycled by the javascript garbage collection mechanism.In this example, hi_bb is executed when the event is bound, and I is passed as a parameter. If the loop statement and the onload function of the page end, I should not exist. However, because hi_bb has a closure, every I value is saved and plays its due role in future click events.

These words seem a little stubborn and forced, and I am also trying to understand them. If it is an object-oriented language, it is easy to understand that the object is constructed from the same class, while the values of attributes and variables in the object are different. After parameters are passed to the object's attributes or member variables through constructors, member methods, or attribute settings, the objects will save them. Javascript is not object-oriented, has no class, and has only functions. Perhaps the closure is an object-oriented simulation of it. That's what I understand.