How to understand the execution context in JS?

For more content, please visit Enjoytoday https://www.enjoytoday.cn/2022/11/14/js%E4%B8%AD%E5%A6%82%E4%BD%95%E7%90%86% E8%A7%A3%E6%89%A7%E8%A1%8C%E4%B8%8A%E4%B8%8B%E6%96%87%EF%BC%8Cjs%E6%9C%89%E5% 93%AA%E5%87%A0%E7%A7%8D%E6%89%A7%E8%A1%8C%E4%B8%8A%E4%B8%8B%E6%96%87%EF%BC% 9F/

Execution context is a relatively important concept in JS. The execution context where the current function and variable are located directly determines which data the current variable and object can access. Generally, execution contexts can be divided into two types according to the execution area:

• global execution context
• function execution context

execution context

global execution context

Generally, the global execution context is the outermost execution context, which is always at the bottom of the execution stack. We can understand the windowobject as an object of the global execution context. Therefore, all defined varglobal variables and functions can windowaccess the corresponding properties and methods. The global execution context is created when a page is opened automatically, and the global execution context will be recycled until the page is closed.

function execution context

As above, JSthe execution is executed in sequence. JSWhen starting, a stack structure of an execution context will be created, and a global execution context will be created at the bottom of the stack at the same time, and then executed in order. At this time, if a function needs to be executed, JSa corresponding function execution context will be created and pushed onto the stack, and after the function execution is completed, the function execution context will be popped out of the stack.

var a=1;//1.进入全局执行上下文环境
function outter(){
  var b=2;
  function inner(){
    var c=3;
    console.log(a+b+c);
  }
  inner();//3.进入inner函数上下文环境
}
outter();//2.进入outter函数上下文环境

The above code is a relatively common code that introduces the execution context. As shown above, JSwhen the execution starts, a global execution context will be created, and then running to the outter()function will trigger the creation of the function execution context, and outtera sub-function execution context will be created internally inner(). Let's briefly review the process of context creation and destruction:

1. Open the page and JScreate a global execution context when running the code
2. Call outter()the function and create outter()a function execution context
3. Run the execution outterfunction, call the internal function inner()function, and create inner()the function execution context environment
4. inner()After the function is executed, destroy innerthe function execution context
5. outter()After the function is executed, destroy outterthe function execution context
6. Close the current page and destroy the global execution context

Execution context composition

The execution context generally consists of a variable environment and a lexical environment. The variable environment can be understood as our global variables, global functions, or the function variable part in the function execution context. The lexical environment is mainly the call chain of js code execution, that is, the code scope.