This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

Note: Part of the article content and pictures from the network, if there is infringement please contact me (homepage public number: small siege lion learning front)

By: Little front-end siege lion, home page: little front-end siege lion home page, source: Nuggets

GitHub: P-J27, CSDN: PJ wants to be a front-end siege lion

Copyright belongs to the author. Commercial reprint please contact the author for authorization, non-commercial reprint please indicate the source.

Execution context

The concept of an execution context is very important in JavaScript, and I understand it as an objectification of an execution environment. When I don’t understand what a context is, I understand it as an object. The context of variables or functions determines what data they can access and how they behave. It holds important information needed for function execution and has three important properties:

  • Variable Object
  • Scope chain
  • This pointer (this value)

Global context

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. (Note: top-level declarations using lets and const are not defined in the global context, but have the same effect on scope-chain resolution.)

The variable object

Each context has an associated variable object on which all variables and functions defined in that context reside. Before a function is executed, the execution engine creates a context object for the function. When the context object is created, it creates its important attribute => variable object. The procedure for creating a variable object is as follows.

  • Create arguments objects. (Variable objects in global context do not have arguments objects)

  • Variable ascension

    • Find all function declarations within a function, stored in a variable object, where key is the function name and value is a reference to the function.
    • Find all variable declarations in the function, stored in the variable object, where key is the variable name and value is undefined.

The life cycle of a context ends when all of its code has been executed, and the context object is destroyed, 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).

The context stack

JS maintains a context stack during execution. Each time a function is executed, JS creates a context object and pushes it into the context stack. Therefore, the context of the currently executing function (the current context for short) is always at the top of the stack, and as soon as the function completes its execution, its context is ejected from the stack and destroyed. Returns control to the previous execution context. The execution stack maps the order of execution. When the code starts running, a global context is placed at the top of the stack (the global context also has variable objects, scope chains, and this Pointers)

The scope chain

When the code in the context executes, it creates a scope chain of variable objects. This scope chain determines the order and scope 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. Identifier (variable) 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. (This is why outer layers cannot access inner layers and inner layers can access outer layers)

The instance

var color = "blue";
function changeColor() {
    if (color === "blue") {
            color = "red";
    } else {
                    color = "blue";
    }
}
changeColor();
Copy the code

Analysis: The scope chain of the changeColor() function 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.

Thank you for reading, I hope to help you, if there is a mistake or infringement of the article, you can leave a message in the comment area or add a public number in my home page to contact me.

Writing is not easy, if you feel good, you can “like” + “comment” thanks for your support ❤

“Welcome to the discussion in the comments section. The nuggets will be giving away 100 nuggets in the comments section after the diggnation project. See the event article for details.”