Execution context

1-1 What is an execution context

An execution context is an abstraction of the context in which JavaScript code is parsed and executed. Any code that runs in JavaScript runs in an execution context

1-2 Execution context type

  1. Global execution context: Code that is not in a function resides in the global execution context. Only one global execution context can exist in a program. The global execution context creates a global object (the window object in browsers) and points the this pointer to this global object

  2. Function execution context: Each time a function is called, a new execution context is created for that function. Any number of function execution contexts can exist in a program

  3. The Eval function executes the context

1-3 Variable objects

  • Variable objects are execution context-specific data scopes that store variable and function declarations defined in the context

  • In a global context, a variable object is a global object

  • In the context of functions, we refer to variable objects as activation Objects (AO). Activation objects and variables are actually the same thing, but they are specification or engine implementation specific and cannot be accessed in a JavaScript environment. They are only activated when an execution context is entered, so they are called activation Objects. Only the active variable object, that is, the various properties on the active object, can be accessed. An active object is created when the function context is entered, and it is initialized via the function arguments property. Arguments property values are arguments objects

1-4 Execution context life cycle

The execution context life cycle consists of three phases: create phase -> execute phase -> reclaim phase

Creation phase:

  • Function execution context

Function declarations and variable declarations

The scope chain is created after the variable object is created. Because scope chains are used to parse variables, JavaScript always starts at the innermost layer of code nesting when asked to parse variables. If the innermost layer doesn’t find the variable, it jumps up to the parent scope until the variable is found.)

③ Make sure this points to

  • Global execution context

Before a JS script is executed, the code is parsed, creating a global execution context, and then promoting function declarations and variable declarations. The variable is assigned undefined, the function is declared, and then the program is executed.

Execution stage: variable assignment and code execution

Reclamation phase: The execution context is removed from the stack

2. Variable promotion

See Variable Promotion

3. Make sure this points to

Concept: The value of this is checked at function execution time, not at definition time. Because this is part of the execution context, the execution context needs to be determined before the code is executed, not when it is defined

3-1 Four basic cases

Case one: Direct callfunction foo() {
  console.log(this) 
}
foo() // Non-strict mode window The strict mode is undefined
// For calling foo directly, this must be window or undefined, no matter where foo is placedCase 2: A function defined in an object is calledlet obj = {
    name:'hzy'
    foo:function(){
        console.log(this.name)},} obj.foo()//hzy

// The position of a function's definition does not affect its this pointer. This refers only to the object on which the function is called.
let obj = { name:'hzy' }
function foo(){
    console.log(this.name)    
}
obj.foo = foo
obj.foo()	//hzyCase 3: in the constructorthis
function Foo(){
  this.name = 'hzy';
}
let f = new Foo()
console.log(f.name) // The constructor this is bound to the new object being instantiated.Case 4: Arrow functionlet p = {
  a: function () {
    var obj = {
      b: () = > {console.log(this)},
    }
    obj.b()
  }
}
p.a() // {a: ƒ} This value of the execution context of the function
// The arrow function does not bind this. It captures the this value of the location context in which it was defined as its own
Copy the code

3-2 This refers to the case

// Case 1: setTimeout & setInterval this, the normal callback function in the setTimeout & setInterval, points to window
function Person(){
    this.age = 0
    setTimeout(function(){
        console.log(this)},3000)}const p = new Person() //window

// Case 2:
function Person(){
    this.age = 0
    setTimeout(() = >{console.log(this)},3000)
  	// The arrow function captures the this value of the context in which it is defined, which is the constructor Person
  	// The constructor this is bound to the new object being instantiated
}
const p = new Person()  //Person{age:0}
Copy the code

Execute the context stack

Each time a function is called, a new execution context is created. The JavaScript engine creates an execution context stack to manage the execution context. The execution context stack can be thought of as a stack structure for storing function calls, following the principle of “first in, last out”.

Example 1:

There are several important points in the above flowchart

(1) JavaScript executes on a single thread, and all code is queued

② When the browser executes global code, it creates the global execution context first and pushes it to the top of the execution stack

(3) Each time a function is executed, the execution context of the function is created and pushed to the top of the execution stack. After the execution of the current function completes, the execution context of the current function goes off the stack and waits for garbage collection

④ The browser’s JS execution engine always accesses the execution context at the top of the stack

⑤ There is only one global context, which is pushed out when the browser is closed

Example 2:

var color = "blue";
function changeColor() {
    var anotherColor = "red";
    function swapColors() {
        var tempColor = anotherColor;
        anotherColor = color;
        color = tempColor;
    }
    swapColors();
}
changeColor();
Copy the code