The scope chain and closure of JS Learning notes

Before we learn about closures, it's important to understand what a scope chain is.

I. SCOPE CHAIN

A scope chain is an orderly access to all variables and functions that guarantee access to the execution environment.

This sentence is actually quite abstract, but through the following example, we can clearly understand the scope chain.

1 varColor= "Blue";2     functionChangeColor () {3         varAnothercolor= "Red";4         functionswapcolors () {5             varTempcolor=Anothercolor;6Anothercolor=color;7Color=Tempcolor;8             //This gives you access to color, Anothercolor, and Tempcolor.9         }Ten         //This can be accessed anothercolor and color One     } A     //only color can be accessed in this

The code above covers 3 execution environments: The global Environment, the ChangeColor () local environment, and the Swapcolor () Local environment. only his own environment and the parent execution environment can be accessed in a variable environment. the parent execution Environment of Swapcolor () is ChangeColor (), and the parent execution Environment of ChangeColor () is the global environment. If it's not clear, you can refer to

In the local environment of the F2 () function, access to the b,a can be accessed by itself and higher than its rank, i.e. A,b,c, F1 () function environment, and the global environment can only access C.

At this point we will find that the outside of the function cannot access the internal local environment, but what if we want to break through the scope chain? At this point, there is a closure sharing scope . The noun of closure appears.

Second, closed package

Closures are explained in red Cookbook: Functions that have access to variables in another function scope.

Down to give a simple example

1  functionF1 () {2         varA=1;3         return function(){4             returnA;5         }6     }7alert (a);/*results for a is undefined*/8     varTASK=F1 ();/*a task is a closure that has access to other function scope variables*/9Alert (Task ());/*result is 1*/

Let's give another example of closures.

1 functionF1 () {2       varN=0;3task=function(){//Anonymous Functions4N+=1;5       }6       //This part is the closure7       functionF2 () {8 alert (n);9       }Ten       returnF2//Return        A   } -     vartext=F1 (); - alert (text ()); the task (); -Alert (text ());//The result is 0,undefined,1,undefined

Text is a F2 closure function, in fact F2 () is given a global variable, F2 () is always in memory, F1 () is its parent function, so F1 () is always in memory and will not be destroyed. Once the task () is executed, the value becomes 2. As for why undefined occurs because undefined is the return value of text, that is, the closure function has no return value.

Sometimes we want to change the variables in other function scopes, and then we can use closures to solve them. Set two additional functions to access the intrinsic functions.

1 varSetvalue,getvalue;2(function(){3     varN=0;4Getvalue=function(){5         returnN6     }7Setvalue=function(x) {8n=x;9     }Ten})();//Call directly OneAlert (GetValue ());//result is 0 ASetValue (456); -Alert (GetValue ());/*The result is 456*/

At this point we find that externally we can change the values of the internal variables.

Come down and get another. Use the closure loop to iterate through the values of the array. There are two programs, you can compare the difference between two programs

Example 1:

1 functionF1 () {2     varA=[];3     varI=0;4      for(i=0;i<3;i++){5a[i]=function(){6             returni;7         }8     }9     returnA;Ten } One   vartext=F1 (); AAlert (text[0]());  -Alert (text[1]()); -Alert (Text[2] ());//the results are all 3 .

Because the closures point to the local variable i, only the pointer link is given, and the reference to the variable does not change the value. So the results are all 3.

Example 2:

1  functionF1 () {2        functionF2 (x) {//Closed Package3            return function(){4                returnx;5            }6        }7        varA=[];8        varI=0;9         for(i=0;i<3;i++){Tena[i]=F2 (i); One        } A        returnA; -    } -     vartext=F1 (); theAlert (Text[0] ());//result is 1 -Alert (Text[1] ());//result is 2 -Alert (Text[2] ());//result is 3

Using a function parameter, the closure is used to get the value of the internal variable.

This is how the program goes: First judge who comes in--"call closure--" closure returns internal function parameters--"and then create an array.

Three, the disadvantage of closure

The above examples do realize the power of closures, but closures also have obvious drawbacks, which allow variables in the function to be stored in memory, consuming memory, causing the page to load slowly. So before exiting the function, delete the unused local variables.

Iv. Summary

The above is my study of closure of the summary of a little knowledge. Everyone exchanges with each other O (∩_∩) O.

Attached to Nanyi Teacher's understanding of closures: http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html?20120612141317#comments

　　

The scope chain and closure of JS Learning notes