Scope and pre parsing of JavaScript functions

catalogue

Scope

Division of scope

Global and local variables

From the perspective of execution efficiency, global variables and local variables

Scope chain

  case

Scope chain analysis diagram

Pre analysis

  1. Our js engine runs js in two steps:   Pre analysis   Code execution

  2. Pre parsing is divided into variable pre parsing (variable promotion) and function pre parsing (function promotion)

3. Pre analysis can be divided into:

Scope

In JavaScript, the scope is a collection of accessible variables, objects and functions.

The code name (variable) plays a role and effect in a certain range. The purpose is to improve the reliability of the program, and more importantly, to reduce naming conflicts

Division of scope

Global scope: the whole script tag or a separate js file. It is called global scope within the script tag and outside the function body

 <script> 
 var num = 10;
        var num = 30;
        console.log(num);
</script>

  Local scope: the local scope (private scope) formed by function execution is the local scope within the function. The name of this code only plays an effect and role within the function

 function fn() {
            // Local scope
            var num = 20;
            console.log(num);

        }
        fn();

Global and local variables

Global variables (global functions): variables defined under the global scope belong to global variables and can be used or modified anywhere

 // Note that if there is no declaration inside the function, the directly assigned variable is also a global variable
        var num = 10; // num is a global variable
        console.log(num);

        function fn() {
            console.log(num);

        }
        fn();

Local variable (local function): variables defined under the local scope belong to local variables and can only be used or modified under the current scope

  // Note: the formal parameters of a function can also be regarded as local variables
        function fun(aru) {
            var num1 = 10; // num1 is a local variable and can only be used inside a function
            num2 = 20;
        }
        fun();

From the perspective of execution efficiency, global variables and local variables

  •       (1) Global variables are destroyed only when the browser is closed, which takes up more memory resources
  •       (2) Local variables will be destroyed after the execution of our program, which saves memory resources
     js There is no block level scope in  js Scope: global scope local scope at this stage js No block level scope
        We js Also in es6 New block level scope
        Block level scope {}   if {}  for {}
        java 
        if(xx) {
            int num = 10;
        }
        The outside cannot be called num of
        if (3 < 5) {
            var num = 10;
        }
        console.log(num);

Scope chain

First, the scope chain is a search mechanism. A variable or method (function) is used in the current scope. If it is private, use its own private first. If it is not private, it will search the upper scope. If it cannot be found, it will search the upper scope. Until the global scope is found, an error may be reported if it cannot be found

Scope chain  : The internal function accesses the variables of the external function and uses the chain search method to determine the value. This structure is called the scope chain  

 //    Proximity principle
        var num = 10;

        function fn() { // External function
            var num = 20;

            function fun() { // Internal function
                console.log(num);

            }
            fun();
        }
        fn();

  case

 var a = 100;
        var b = 200;
        var c = 300;

        function test1(num1) {
            console.log(num1);
            var a = 10;
            var b = 20;
            var num1 = 1000;

            a++;
            b++;
            c++;
            num1++;
            console.log(a, b, c, num1);

            function test2() {
                var c = 30;
                a++;
                b++;
                c++
                console.log(a, b, c);
            }
            test2();
        }
        test1(5);
        console.log(a, b, c);

Scope chain analysis diagram

 

Pre analysis

  1. Our js engine runs js in two steps:   Pre analysis   Code execution

    (1) . the pre parsing js engine will put all var in js   Also, function is promoted to the front of the current scope

    (2) . code execution   Execute from top to bottom in the order of code writing

  2. Pre parsing is divided into variable pre parsing (variable promotion) and function pre parsing (function promotion)

    (1) Variable promotion is to promote all variable declarations to the front of the current scope   Do not promote assignment

    (2) Function promotion is to promote all function declarations to the front of the current scope   Do not call function

3. Pre analysis can be divided into:

  • Pre resolution under global scope

  • Pre resolution under local scope

  Preparse happens before the js code is executed. The advanced parsing operation preprocesses all the key with var and functiuon. var pre parse is only declared undefined. funtion is declared + definition when parsing is predefined.

  • Declaration: var a;

  • Definition: a = 100;

Function execution forms a private scope. The code in this scope is executed from top to bottom. It is also pre parsed before execution. This private scope belongs to the stack area, and the formal parameter assignment of the function is before pre parsing

Automatically destroy after function execution (garbage collection mechanism)

console.log(a, b); //undefined undefined
var a = 10;
var b = 20;
console.log(a, b); //10,20


sum();

function sum() {
    console.log(c, d); //undefined undefined
    var c = 10;
    var d = 20;

    function test() { //At the time of pre parsing, declare that + definition has been completed
        console.log("ha-ha");
    }
}

sum();

 

Tags: Javascript Front-end

Posted on Sun, 31 Oct 2021 07:24:18 -0400 by jomama