JavaScript scope chain and execution environment

The concepts of scope, scope chain, execution environment, execution environment stack and this are very important in JavaScript. I often confuse them, so here is a summary;

1. ## The area inside the local scope function, the global scope is window;

2. The scope chain depends on the position when the function is declared. When parsing the identifier, the current scope is first found. Then search outwards until the whole world, such an order; it has nothing to do with where the function is called;

3. The execution environment is the collection of data and variables accessible to the function, which is the scope of the function All data and variables on the chain;

4. The execution environment stack is based on the order of code execution. Each execution environment is accessed layer by layer in the form of a stack, and exits and throws away when used up; if the current If the execution environment (which stores data and variables in the current scope chain) cannot find the variable, it means it cannot be found. It will not search in the previous execution environment. It is different from the scope chain;

• If a variable is not declared within a function or declared without var, it is a global variable and has a global scope;

        <script type="text/javascript">
            function test1(){
                a = 1;//全局变量，只有在当前函数运行时，才有效            }
            test1();
            console.log(a);//1       注意test1函数必须运行，不然找不到a
        </script>

Copy after login

• Global variables can be used as properties of the window object, they are the same;

        <script type="text/javascript">    
            var b = 1;//全局变量            
            console.log(b === window.b);
            //true  全局变量可以当做window对象的属性用，他们是一样的；
        </script>

Copy after login

• All properties of the window object have global scope and can be used anywhere in the code It can be accessed anywhere;

• The variables declared inside the function are local variables and can only be used within the function body. Although the parameters of the function do not use var, they are still local variables.

        <script type="text/javascript">    
            var c = 1;//全局变量//            
            console.log(d);//ReferenceError: d is not defined    引用错误，当前作用域就是最外层作用域，依然找不到d
            function test2(d){
                console.log(c);
                //1   全局变量，哪都可以访问;（先找当前作用域，找不到，就向外层作用域找，直到window最外层，找到了）                console.log(d);//3   形参是局部变量，只有当前作用域下可以访问            }
            test2(3);        
            </script>

Copy after login

Its route has been It is fixed and has nothing to do with where the function runs;

        <script type="text/javascript">
            var a = 1;            
            var b = 2;            
            var c = 3;            
            var d = 4;            
            function inner(d) {//它的作用域链是inner---全局
                var c = 8;
                
                console.log(a);//1  当前作用域找不到a，去全局作用域找到了a=1                console.log(b);//2  当前作用域找不到b，去全局作用域找到了b=2                console.log(c);//8  当前作用域找到了c=8                console.log(d);//7  当前作用域找到了d=7,形参也是局部作用域
            //    console.log(e);//ReferenceError: e is not defined   引用错误，找不到e, 它的作用域链是inner---全局                console.log(a+b+c+d);//18            }            function outter(e) {                var a = 5;//inner()的作用域链是inner---全局,所以这个a相当于无效
                var b = 6;//inner()的作用域链是inner---全局,所以这个a相当于无效                inner(7);
            }
            outter(999);//这个999无效，里面的e根本找不到
        </script>

• Identifiers with the same name can be defined in multi-level nested scopes, which is called the "shadowing effect" ", the internal identifier "shields" the external identifier

• Through the window.a technology, you can access global variables that are shaded by variables of the same name. But if non-global variables are obscured, they cannot be accessed anyway;

        <script type="text/javascript">
            var a = &#39;Lily&#39;;            
            var b = &#39;Lucy&#39;;            
            function outer() {                
            var b = &#39;Jesica&#39;;                
            var c = &#39;Susan&#39;;                
            function inner(c) {
                console.log(a);//Lily                      
                console.log(window.b);//Lucy                    
                console.log(b);//Jesica                    
                console.log(c);//Jenifer                
                }
            inner(&#39;Jenifer&#39;);
          }
            outer();       
         </script>

Copy after login

object) that saves all variables and data accessible to the function (that is, all data and variables on the function's scope chain). Our code cannot access it, it is used by the engine;

It should be noted that if the current execution environment (which stores data and variables in the current scope chain) cannot find the variable, it is When it’s not there, it won’t search the previous execution environment, which is different from the scope chain；

• The code enters the global execution environment, and the global execution environment is put into the environment stack;

• When a function is executed, this The execution environment of the function is pushed to the top of the environment stack, followed by the previous execution environment;

• The global execution environment is entered first, so it is always at the bottom; it is similar to the concept of a stack;

• After the function is executed, its execution environment is removed from the top of the scope chain. The data and functions it saves are marked and cleared, waiting for garbage collection;

• Control is handed over to the previous execution environment and execution continues;

• The global execution environment is destroyed when the page is closed;

• Code execution enters the global execution environment, and the code in the global execution environment enters statement promotion;

• Execute line 2, assign a=1; and then line 2 Line 3 assigns b=2; then line 4 assigns c=3; then line 5 assigns d=4;

• Execute line 20, call the outer(999) function, then enter the outer(999) function execution environment, declare promotion, and pass the actual parameter 999 to the formal parameter e; now there are Two execution environments, outer(999) is the current execution environment;

• Execute line 16, assign a=5; and then assign b=6 on line 17;

• Execute line 18, call the inner(7) function, then enter the inner(7) function execution environment, declare promotion, and pass the actual parameter 7 to the formal parameter d;

• Execute line 7, assign c=8; then calculate and output;

Code optimization

Since it is necessary to find variables on the scope chain To consume performance, we should find variables as soon as possible, so when functions are nested in multiple layers, we should use local variables inside the function as much as possible;

We can say that using global variables inside the function is a A cross-scope operation. If a cross-scope value is used multiple times inside the function, then we store it in a local variable, which can improve performance.

The above is the detailed content of JavaScript scope chain and execution environment. For more information, please follow other related articles on the PHP Chinese website!