(reprint) Javascript Advanced scope scope chain

Please indicate the source: http://blog.csdn.net/lmj623565791/article/details/25076713

Always feel that JS is very powerful, because the long-term do not write JS code, recently just temperature so warm.

1, JavaScript does not have the concept of code block scope, local scope is for the function.

[JavaScript]View Plaincopy

2. function Fun ()
4. {
6. For ( var i = 0; i < i++)
8. {}
10. //If in Java I should belong to an undeclared variable at this time, but the scope of I in JS still exists
12. Console.log (i); //10
16. if (true)
18. {
20. var b = "HelloWorld";
22. }
24. Console.log (b); //helloworld
26. }
28. Fun ();

2. If a variable declared with VAR is not used, the default is the global variable

[JavaScript]View Plaincopy

1. function Fun02 ()
2. {
3. A = "HelloWorld";
4. var B = "Welcome";
5. }
6. Fun02 ();
7. Console.log (a); //HelloWorld
8. Console.log (b); //b is not defined

3, JS in the scope chain

Let's look at a simple example: there is only one function object, and the function object, like any other object, has properties that can be accessed through code and a series of internal properties that are accessible only by the JavaScript engine. One of the internal properties is [[Scope]], defined by the ECMA-262 Standard third edition, which contains a collection of objects in the scope of the function being created, called the scope chain of the function, which determines which data can be accessed by the function.

[JavaScript]View Plaincopy

1. var a = "Hello";
3. function fun04 ()
4. {
5. A = "world";
6. var B ="Welcome";
7. }

Diagram of the scope chain:

Note: Omitted in the figure, window,document in Global scope, etc., arguments,this in each function object are not drawn.

[JavaScript]View Plaincopy

2. function Fun03 ()
4. {
6. var a = 10;
8. return function () {
10. A*= 2;
12. return A;
14. };
16. }
20. var f = fun03 ();
22. f ();
24. var x = f ();
26. Console.log (x); //40
30. var g = fun03 ();
32. var y = g ();
34. Console.log (y); //20

Observing the above code, there are fun03,f,g three function objects.

The following is a diagram of the scope chain:

Note: Each function object has a scope chain, which is directly drawn together, and for the variable lookup, start with the 0 of the chain.

The function object F executes 2 times in the code, so a*2*2 = 40, and the function object G executes 1 times in the code, so a = 20;

4. Closed Package

As you can see from the example above, the instance of a is not destroyed after the execution of the FUN03, which is the closure. The individual's understanding of closures is that when the function is executed, the variables in the function are not destroyed and are referenced by the child functions it returns.

The following is a particularly classic example of using a scope chain to parse:

[JavaScript]View Plaincopy

2. Window.onload = function ()
4. {
6. var elements = document.getElementsByTagName ("Li");
8. For (var i = 0; i < elements.length; i + +)
10. {
12. Elements[i].onclick = function ()
14. {
16. alert (i);
18. }
20. }
24. }

Believe that the above code is definitely written by everyone, the intention is to click on each Li, print out their index, but in fact the print is elements.length. What is this for?

Look at the simple scope chain above (omitted a lot of parts, mainly understanding), at this time each onclick function of I, pointing to the I at the onload i = element.length.

See the solution below:

[JavaScript]View Plaincopy

2. Window.onload = function ()
4. {
6. var elements = document.getElementsByTagName ("Li");
8. For (var i = 0; i < elements.length; i++)
10. {
12. (function (n)
14. {
16. Elements[n].onclick = function ()
18. {
20. alert (n);
22. }
24. }) (i);
26. }
30. }

In the outer layer of the onclick function, a layer of immediately executed functions is wrapped, so n at this point is immediately executed and all are 1~elements.length.

----------------------------------------

The above Atom excerpt (link at the beginning of the article)

----------------------------------------

In fact, about the above loop, I get to always be the problem of elements.length, just need to define the value of I a variable stored, can also be resolved.

(reprint) Javascript Advanced scope scope chain