Knowledge: global context, function context; Execute context, execute context stack

The browser creates a unique global context when opening a TAB, which is released only when closing the browser window. If you think of the execution context stack as a badminton bucket, the global context is the first badminton put into the bucket.

I need to put the corresponding graph here. I’m learning to draw

Before executing JS code, the code goes through the creation phase, which creates the execution context

Note that the global context is not the same thing as the global context scope. Var and function are created in the global context (equivalent to window). Let, const, and class are created in the global scope. The browser creates the global context when creating a TAB page, and creates the global scope before initializing a JS file.

Global execution context and global scope

The following code nicely proves that the global context is not a global scope context

// var
var _var = 'I'm var'
console.log(_var) / / I'm var
console.log(window._var) / / I'm var

// function
function _fun(){
    console.log('I am the function')
}
_fun() / / I'm a function
window._fun() / / I'm a function

// let
let _let = 'I am let'
console.log(_let) / / I am a let
console.log(window._let) // undefined

// const
const _const = 'I am a const
console.log(_const) / / I'm a const
console.log(window._const) // undefined

// class
class _class{
    constructor(){
        return 'I am a calss
    }
    say(){
        console.log('I am a calss)}}Copy the code

Each execution context contains: variable object, scope chain, this

function person(){
    var age = 20
    functon sayHello(){
        console.log('I'm B.')}}Copy the code
{ 
    /* A scope chain is an array of variable objects; The first part of the array scopeChain[0] is the VO */ of the current execution context
    scopeChain: []./* variableObject = VO(arguments), function arguments, internal variables, etc. */
    variableObject: {
        arguments: {}, // The argument object of the function execution context
        sayHello: {}, // Function declaration
        age: 20
    }, 
    /*this refers to the vo*/ of the current execution context
    this: {}}Copy the code
StateDiagram -v2 Execution context 1 --> Variable object (VO) Execution context 1 --> scope chain Scope chain --> This this --> Variable object (VO) Arguments Variable object (VO) --> sayHello variable object (VO) --> Age variable object (VO) --> first scope chain first scope chain --> Variable object (VO)

Example: The variable object VO changes during execution context creation and execution

function person(args){
    / / variable
    var age = '22'
    // Function declaration
    function personAge(){
        return age
    }
    return personAge
}
person('Xiao Ming Wang')
Copy the code
// Create phase
VO = {
    arguments: {
        0: 'Xiao Ming Wang'.length: 1
    },
    age: undefined.personAge: 'Local function execution Context' // pointer to function f()
}

// Execution phase
VO = {
    arguments: {
        0: 'Xiao Ming Wang'.length: 1
    },
    age: '22'.personAge: 'Local function execution Context' //pointer to function f()
}
Copy the code
StateDiagram -v2 Variable object (VO) --> Arguments Variable object (VO) -->... Function declaration variable object (VO) -->... Variable attributes