This is the 10th day of my participation in the August More Text Challenge. For details, see:August is more challenging

preface

TIP 👉 JS execution context and related call stack level is only, has been the JS language class questions inside the very body map and the underlying investigation point.

What is the execution context

An execution context, by definition, is “the environment in which the code is executed.”

Classification of execution contexts

  • Global context The context in which the global code is located, no longer functions the Chinese year in which the code is executed in the global context
  • Function context The context created when a function is called
  • Eval Execution context The environment that is created when code in the Eval function is run. Eval has been criticized for many years and is not discussed

1. Creation and composition of the global context

When our JS script runs, the first execution context to be created is the global context.

When a line of code page in our script is missing, the global context only has two things:

  • Global objects (Windows for browsers, Global for Node environments)
  • The this variable, this in this case, refers to the global again
varName = "qinglian"var tel = '18519999999'
function getName() {
    return {
        name: name
    }
}
Copy the code

Create phase global context

2. Context lifecycle

  • Creation phase —– The initialization state of the execution context, at which point no line of code is executed
  • Execution phase —– Line by line code in the script

In the creation phase

  • Creating a global object
  • Create this to point to the global
  • Allocate memory space for variables and functions
  • By default, the variable is assigned undefined, which puts the function declaration in memory
  • Create a scope chain

Everything that should have a value in the execution phase has a value, because the JS engine is already assigning values line by line.

For example, if you execute the first line but do not execute the second line, then only name has a value and tel is undefined. If you execute the next line, tel has a value

Understand the nature of “variable promotion” from an execution context perspective

In fact, there is no “promotion” at all, the variables are always where they are, the so-called “promotion” is an illusion caused by the asynchronous creation (context creation) and assignment (context execution) of the variable.

The different work that the execution context does at different stages is the essence of variable promotion

The creation and composition of a function context

The function context does not create a global object, but a parameter object (arguments) : this is created that no longer points to the global object, but depends on how the function is called ———- If it is called by a reference object, then this points to that object; Otherwise, the value of this is set to live undefined for the global object

varName = "qinglian"var tel = '18999999999'
function getNameTel() {
    retunr {
        name: name,
        tel: tel
    }
}

getNameTel()
Copy the code

When the engine executes the getNameTel call line, it first enters the function context creation phase,

Then it enters the execution stage and executes the code inside the function line by line. Here we only have one line of code. During the execution of the code, there is no variable modification involved, so the content of the function context remains unchanged.

The call stack

When the function is executed, its corresponding execution context also disappears, this process, we call it “out of the stack”, in the JS code execution process, the engine will create “execution context stack” for us, which is the call stack

function testA() {
    console.log('Logic to execute the first test function')
    testB();
    console.log('Execute the logic of the first test function again')}function testB() { 
    console.log('Logic to execute the second test function')
}

testA()
Copy the code

At the beginning of execution, the global context is created:

At the call to testA, the function context for testA is created:

At the call to testB, the function context for testB is created:

TestA and global context are left:

When testA is finished, the corresponding execution context is off the stack, leaving the global context:

The call stack for the entire procedure:

Understand the scope in terms of the call stack

The scope is simply the current execution context.

Note: searching along the scope chain is not all the way up the call stack. The call stack is formed during execution, but the scope chain is determined during the writing phase