Scope in JS

Scope

identifier （ Variable and function names ） Where can I be visited , Those places are the scope of this identifier .

These places refer to ： Inside the code block of a function and inside the code block of a function

The rules 1： The code inside the function can access the identifier inside the function , You can also access the identifier outside the function （ Look up one level at a time , Until the global scope is found window）.

The rules 2： Code outside the function can access identifiers outside the function , But you cannot access the identifier inside the function

    <script>
        var num1 = 10;         // Function external identifier 
        function fn(){
            var num2 = 20;     // Function internal identifier 
            console.log(num1,num2); //10  20
        }
        console.log(num1,num2); //10  Not found num2
    </script>

Usually ： The identifier inside a function is called a local identifier . 

    <script>
        function fn(a){
            // Implicitly declare  var a = 200
            function fm(a){
                // Implicitly declare ： var a = 200
                console.log(a,111111);  //200
                a = 90;                 // hold fm scoped a  Change it to 90
                console.log(a,222222);  //90
            }
            fm(a);   //fm(200)
            console.log(a,333333333);   //fn Scope a=200
        }
        var a = 200;   //
        fn(a);   // a = 200, Pass in fn  fn(200)
        console.log(a,44444444);   // Unable to access the inside of the function , You can only access a = 200
    </script>

Change it ：

    <script>
        function fn(a){
            // Implicitly declare  var a = 200
            function fm(){    // Although it was introduced a, But the function did not receive 
                console.log(a,111111);   //fm There is no a, Go to fn Find a = 200
                a = 90;                  // hold fn in a Change it to 200          
                console.log(a,222222);   // Go to the fn In looking for a by  90
            }
            fm(a);  
            console.log(a,333333333);    //fn in a Has been changed to 90
        }
        var a = 200;   
        fn(a);   
        console.log(a,44444444);        // It is still the overall situation a  by 200
    </script>

The rules 3: The call of a function is to run its function body once , Every call will re execute all the code , In different memory spaces ,（ The body of the function executed by each call , They don't influence each other ）

The difference between local and global variables ：

Local variables are functions that are regenerated every time they are called , The global variable is no matter how many times the function is called , The moment when the code of global variables runs , Generate only once .

    <script>
        var total = 0;   // Global variables 
        function increment(){
            var total = 0;    // local variable 
            total += 2;
            console.log(total);
        }
        increment();    //2
        increment();    //2
    </script>

 

The promotion of identifications with the same name

The rules 1: Each scope at run time ,js The engine will implicitly scan the keywords within the scope in advance , And declare , But the assignment did not improve .

The rules 2： Functions will also be implicitly promoted , The variable is to raise the declaration , A function is the entire body of a function that is promoted .

The rules 3： Only variable And the declarative writing of functions will be improved , Methods inside objects do not implicitly promote .

The rules 4： If the declared function name is the same as the variable name , First raise the variable name , Raise the function name

    <script>
        console.log(a);  // Get is a function 
        var a = 10;
        function a(){
            console.log(999);
        }
        /*
             because ： Variables are raised first , Post function promotion 
            var a;
            function a(){console.log(999);} 
            console.log(a);  // That's why I got a function 
            a = 10
         */
    </script>

The rules 5： Design to implicit declaration , The law of function promotion and variable promotion ： Shape real function     The order ： Before and after

shape ： Formal parameter and variable declaration promotion are together

real ： Assignment arguments    The actual parameter passed in is assigned to the variable

Letter ： Function declaration promotion

shipment  ： Run the following code

    <script>
        var a = 20;

        function fn(a) {
            /*
                 Design to implicit declaration , The law of function promotion and variable promotion ： Shape real function 
                var a;     // shape ： Implicit declaration of formal parameters var a  and   Promotion of variable declaration  var a It's together  
                a = 20;    // real ： The actual parameter passed in is assigned to the variable a
                function a() {console.log(66666); } // Letter : Function declaration promotion 
                          // shipment    Run the following code 
            */
            console.log(a, 1); //  Easy to mistake is 20  , yes a function 
            a = 90;
            console.log(a, 2); //90
            var a = 100;
            console.log(a, 3);//100

            function a() {
                console.log(66666);
            }
            console.log(a, 4);  //100
        }
        fn(a);
    </script>

The rules 6： A function is a reference data , Identifiers can reference a function at any scope , however ： The scope of function runtime is when the function is generated ( Definitions and statements ) when , Scope . 

Generally speaking, it means ： Function operation is to run the code containing the code where the function block code is written , Not running code where the function is called （ Because it's possible ： The place where the function is declared is far from the place where the function is called . But to understand is ： The scope of function runtime is when the function is generated ( Definitions and statements ) when , Scope .）

    <script>
        function fn(a){
            // Implicitly declare  var a = 10   // First call fm The function is changed to 11   The second call is changed to 12
            function fm(){
                a = a + 1;
                console.log(a);
            }
            return fm;
        }
        var f1 = fn(10); // return fm function 
        f1();   //11
        f1();   //12
    </script>

analysis ：fn Call it once , Only one fn Scope ,fm Call twice , Generate two fm Scope , But the two one. fm The scope is in fn Inside , therefore fn The variables inside a By two internal fm In scope a=a+1, It's changed twice , Change it for the first time and then print it as 11, Change it for the second time and print it as 12. So the result is 11, One time for 12 

    <script>
        function fn(a) {
            function fm() {
                a = a + 1;
                console.log(a);
            }
            return fm;
        }
        var f1 = fn(10); // return fm function 
        f1(); //11
        var f2 = fn(10);
        f2(); //11
    </script>

  analysis :fn Called twice , Two are generated fn Scope , Every fn Generate a fm Scope , So it's a fn The scope contains a fm Scope , So the two one. fn Scope a By their respective fm scoped a =a+1 Modify a , So both are printing 11