1 Execution Context

The context of variables or functions determines what data they can access and how they behave.

Each context has an associated variable object on which all variables and functions defined in that context reside. Although the variable object cannot be accessed through code, it is used for data processing in the background.

1.1 Global Context

The global context is the outermost context. Depending on the hosting environment of the ECMAScript implementation, the object representing the global context may be different. In browsers, the global context is what we call the Window object, so all global variables and functions defined by var become properties and methods of the Window object.

var myprop = "hello world"
console.log(window.myprop);  // hello world
Copy the code
let myprop = "hello world"
console.log(window.myprop) // undefined
Copy the code

Top-level declarations using lets and const are not defined in the global context, but have the same effect on scope-chain resolution.

** The context is destroyed after all of its code has been executed, including all variables and functions defined on it (the global context is destroyed before the application exits, such as closing the web page or exiting the browser). 天安门事件

1.2 Function Context

Each function call has its own context. When code execution flows into a function, the context of the function is pushed onto a context stack. After the function completes execution, the context stack pops the function context, returning control to the previous execution context.

1.3 Scope chain

When the code in the context executes, it creates a scope chain of variable objects. This chain of scopes determines the order in which the code at each level of context accesses variables and functions.

The variable object of the context in which the code is executing is always at the front of the scope chain.

If the context is a function, its activation object is used as a variable object.

Active objects initially have only one definition variable: arguments. (This variable is not available in the global context.) The next variable object in the scope chain comes from the containing context, and the next object comes from the next containing context. And so on up to the global context; The variable object of the global context is always the last variable object in the scope chain.

Identifier resolution at code execution is done by searching identifier names down the scope chain. The search process always starts at the very top of the scope chain and moves down until the identifier is found. (If the identifier is not found, an error is usually reported.)

var color = "blue";

function changeColor() {
    // Since color is a global variable, in the global context,
    // Can be accessed in changeColor
    if (color === "blue") {
      color = "red";
    } else {
      color = "blue";
    }
}

changeColor();
Copy the code

For this example, the scope chain of the function changeColor() contains two objects: its own variable object (the one that defines the arguments object) and a variable object for the global context. The variable color is accessible inside the function because it can be found in the scope chain.

In addition, variables defined in a local scope can be used to replace global variables in a local context:

var color = "blue";

function changeColor() {
  AnotherColor is a local variable
  // In the local context, so it is accessible in the context of the changeColor function
  let anotherColor = "red";

  function swapColors() {
    // swapColors is a function defined in changeColor,
    // So you can access the anotherColor variable
    let tempColor = anotherColor;
    anotherColor = color;
    color = tempColor;

    // Here you can access color, anotherColor, and tempColor
  }

  // Color and anotherColor are accessible here, but tempColor is not
  swapColors();
}

// Only color can be accessed here
changeColor();
Copy the code

Global context, local context for changeColor(), and local context for swapColors(). There is a variable color and a function changeColor() in the global context. The local context of changeColor() has a variable anotherColor and a function swapColors(), but the variable color in the global context is accessible here.

The local context of swapColors() has a variable tempColor that can only be accessed in this context. Neither the global context nor the local context of changeColor() is accessible to tempColor. In swapColors(), you can access variables in the other two contexts because they are parent contexts.

Chain of action for the above example:

window
    - color
    - changeColor()
        - anotherColor
        - swapColors()
            - tempColor
Copy the code

The internal context can access everything in the external context through the scope chain, but the external context cannot access anything in the internal context

There are three objects in the scope chain of the swapColors() local context: the variable object of swapColors(), the variable object of changeColor(), and the global variable object. The local context of swapColors() searches for variables and functions, starting with its own variable object, and searching for the upper-level variable object. A changeColor() context has only two objects in its scope chain: its own variable object and a global variable object. Therefore, it cannot access the context of swapColors().