Introduction to closures in javascript

Introduction to closures in javascript

Javascript has several very important language features: object, prototype inheritance, and closure. Closure is a new language feature for programmers who use traditional static Language C/C ++. This article will start with an example to introduce the language features of Javascript closures, and combine with a little ECMAScript language specification to enable readers to better understand closures.

For a long time, I did not understand the closure. Later I learned about the scope and this issues before I understood the closure related knowledge.

Closure is also a frequent visitor to interview questions. Simply put, it is a function nested function.

Function as return value:

?

1 2 3 4 5 6 7 8 9 10

Function foo (){ Var a = 1; Return function (){ A ++; Console. log (); } } Var aaa = foo (); Aaa (); // 2 Aaa (); // 3

In fact, this code is not hard to understand. aaa refers to a new function returned by foo (), but the variable is referenced in this function. Therefore, when the foo function is executed, variable a still exists in memory and is not released. That is, a is 2 and 3 respectively.

Function as a parameter:

?

1 2 3 4 5 6 7 8 9

Var a = 10; Function foo (){ Console. log (); } Function aaa (fn ){ Var a = 100; Fn (); } Aaa (foo );

According to my previous understanding, when executing the fn function in the aaa function, if there is no a variable, I will go to the parent-level scope to find the variable, which is 100, is the result 100?

Unfortunately, the answer is no. Here the result is 10. Mr. Wang's blog says that he wants to create the function's scope value instead of the "parent scope ".

Use Cases of closures

Because I am a newbie, here is a simple example. When you click li, the position of li in ul is the index value.

Html code:

?

1 2 3 4 5

<Ul> <Li> 001 </li> <Li> 002 </li> <Li> 003 </li> </Ul>

Js Code:

Example 1:

See the following code. After running the code, it is found that no matter which li is clicked, the result is 3.

?

1 2 3 4 5 6

Var aLi = document. getElementsByTagName ('lil '); For (var I = 0; I <aLi. length; I ++ ){ ALi [I]. onclick = function (){ Alert (I ); } }

Because there is no I variable in the anonymous function, when the for is over, we will click the li label on the page. At this time, I will be 3.

Example 2:

?

1 2 3 4 5

ALi [I]. onclick = (function (I ){ Return function (){ Alert (I ); } }) (I );

In this case, when the function is returned, the variable I is passed through the self-executed function parameters, and the returned function references this I variable, so when the for loop ends, the I variable is not released. That is, the I variable value is saved in the memory. Based on this principle, it is easy to cause memory leakage in earlier ie versions.

Example 3:

?

1 2 3 4 5 6 7

For (var I = 0; I <aLi. length; I ++ ){ (Function (I ){ ALi [I]. onclick = function (){ Alert (I ); } }) (I ); }

This principle is similar to the above.

Mi front-end closure interview questions:

?

1 2 3 4 5 6 7

Function repeat (func, times, wait ){ } // This function returns a new function, for example   Var repeatedFun = repeat (alert, 10,500 0) // Call this repeatedFun ("hellworld ")   // Alert helloworld 10 times at an interval of 5 seconds

My answer:

?

1 2 3 4 5 6 7 8 9 10 11 12 13

Function repeat (func, times, wait ){ Return function (str ){ While (times> 0 ){ SetTimeout (function (){ Func (str ); }, Wait ); Times --; } } }   Var repeatedFun = repeat (alert, 10,100 ); RepeatedFun ("hellworld ");

The above is all the content of this article. I hope it will be helpful for you to learn javascript closures.