On the closure in JavaScript

There are several very important language features in JavaScript-objects, prototype inheritance, closures. The closures are a new language feature for programmers who use the traditional static language C/S. In this paper, we will introduce the language features of JavaScript closures with an example, and combine a little ECMAScript language specification to enable readers to understand the closure more deeply.

For a long time did not understand the closure, and then understand the scope, and this related issues to understand the closure related knowledge.

Closure (closure), but also a regular face test. The simple point is the function nesting function.

function as the return value:

?

1 2 3 4 5 6 7 8 9 10

function foo () {var a = 1; return function () {a++; Console.log (a);}} var aaa = foo (); AAA (); 2 aaa (); 3

In fact, this code is not difficult to understand, AAA is a new function to point to Foo (), but in this function reference a variable, so when the Foo function is executed, the variable a also exists in memory does not release. That is 2 and 3 respectively.

function as an argument:

?

1 2 3 4 5 6 7 8 9

var a = 10; function foo () {console.log (a);} function aaa (FN) {var a = n-fn ();} aaa (foo);

According to my previous understanding, when performing the FN function in the AAA function, if you do not have a variable, go to the parent scope to find a variable, this is 100, the result is 100?

Unfortunately, the answer is no, the result is 10, Wang Fu Bung's blog is better, he said to create the scope of the function value, not "parent scope."

Closures using the scene

Because I am still relatively rookie, here to take a simple example. When you click on Li, Pop-up Li in the UL position 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:

Look at the code below and find out after the run that the result is 3, regardless of the one you clicked on.

?

1 2 3 4 5 6

var aLi = document.getelementsbytagname (' li '); for (var i = 0; i<ali.length; i++) {Ali[i].onclick = function () {alert (i);}}

Because there is no I variable in the anonymous function, so when the for is over, we click on the Li tag of the page, and I am already 3.

Example 2:

?

1 2 3 4 5

Ali[i].onclick = (function (i) {return function () {alert (i);}}) (i);

The practice is to pass the function as the return value, passing the variable i through the parameters of the function, and then because the return function will refer to the I variable, the I variable will not be released when the For Loop ends. That is, the value of the I variable is saved in memory. Based on this principle, it is easy to create a memory leak in the lower version of IE.

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.

Millet front-end closure interview questions:

?

1 2 3 4 5 6 7

function repeat (func, times, wait) {}//It returns a new function, such as using var Repeatedfun = repeat (alert, 10, 5000)//Calling this REPEATEDFU N ("Hellworld")//Will alert 10 times HelloWorld, each interval 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);},wai T); times--; }} var Repeatedfun = Repeat (alert, 10, 100); Repeatedfun ("Hellworld");

The above is the entire contents of this article, I hope that you learn JavaScript closures can help.