scope

1. A deep understanding of scope

Execution-time context When function code is executed early, an internal object AO of the executor context is created (AO is the real scope)

This internal object is created at precompile time because the function is precompiled when it is called

An executor context object, GO, is created early in global code execution

2. A shallow understanding of scope

Global scope

1The global scope is created when the page is opened and destroyed when the page is closed2Variables and functions in the script tag are global in scope and can be accessed anywhere on the page3There are global objects in the global scopewindowRepresents a browser window that is created by the browser and can be called directly4Variables and functions declared in the global scope are treated aswindowObject properties and methods are savedCopy the code

Global scope precompilation

1, create the GO object2, find the variable declaration, take the variable name as the attribute name of the GO object, and its value isundefined 
3Find the function declaration and assign the value to the function bodyCopy the code

Function scope

1When a function is called, the function scope is created, and when the function is finished, the function scope is destroyed2A new function scope is created each time a function is called, and they are opposed to each other3When a variable is in the global scope, it cannot be accessed outside the function scope4When accessing a variable or function in a function scope, the system searches for the variable or function in its own scope first. If no variable or function is found, the system searches for the function in the upper scope until the global scopeCopy the code

Function scope precompiled

1Create an AO object2Find the parameter and variable declaration, take the variable and parameter name as the attribute name of the AO object, value isundefined
3, and the parameters are unified4Find the function declaration inside the function body, and assign the value to the function bodyCopy the code

Note: Precompiled objects created are called GO globally and AO internally

// Precompile an example
function fn(a,c) {
    console.log(a); // function a () {}
    var a = 123;
    console.log(a); / / 123
    console.log(c); // function c () {}
    function a () {}; // (this is function declaration)
    if(false) {
        var d = 678;
    }
    console.log(d); // undefined
    console.log(b); // undefined
    var b = function () {}; // This is a function expression, not a function declaration.
    console.log(b); // function () {}
    function c () {}; // (this is function declaration)
    console.log(c); // function c () {}
}

fn(1.2)

// Parse precompile
1Create an AO object2Find the parameter and variable declaration, take the variable and parameter name as the attribute name of the AO object, value isundefined(No need to consider whether the judgment condition can be entered)3, and the parameters are unified4Add AO {to the body of the function.// Variable declaration: value: parameter unity: the value is assigned to the function body
    a : undefined : 1 ： function a () {}
    c : undefined : 2 :  function c () {}
    d : undefined 
    b : undefined
}
3, and the parameters are unifiedCopy the code

The scope chain

[[scope]] is stored in an implicit property, which is inaccessible to our users, but does exist. Let the JS engine access it, which stores the scope chain AO, GO, AO and GO sets

// Example of scope chain
var global
function a () {
    // a is defined by executing B
    function b () {
        // The AO of function B, the AO of function A, and finally the global GO
        var bb = 123;
        aa = 0;
    }
    var aa = 123
    b()
}

a()
Copy the code