The last article introduced scope in detail, introducing terms such as Lexical Environment. For those of you who have seen the previous article, you can understand the component of scope, but when JS is running, is our scope a separate data structure? How does it run along with pushing and pushing? Let’s look at the scope position of JS at runtime.

Next, we first introduce the concept of EC, and then use EC to connect the scope to the stack.

Execution Context

The specification states that EC is the data structure that makes up the JS stack.

The data structure components of EC are specified in the specification:

  • LexicalEnvironment: Points to an object that records information under the current scope.

  • VariableEnvironment: Points to an object that records information under the current scope. So isn’t LE the same as VE? Lol, please refer to above. To understand this article, you need to understand the previous article, which described LE and VE in detail.

  • ThisBinding: Remember we used this keyword in JS? The this we are accessing is also an object, and this object is what ThisBinding refers to.

Reading this far from the JavaScript scope, I expect the reader will have an overview of the JS stack and how the scope and stack relate to each other.

In ES, the specification defines three types of executable code that creates the EC when run.

Global code: code that is not in any function, such as importing js files through script.

Function code: is the code in the function body.

Eval Code: The code that is run during the eval() execution.

Next, let’s take a look at the in-stack dynamics of JS in detail with a piece of code. (For the convenience of drawing, we do not distinguish between LexicalEnvironment and VirableEnvironment pointing to the same object)

var a = 'windowa';
function fn() {
    var b = 'fnb';
}
fn();
Copy the code

The reader can just look at the simplified memory map; the real memory map was drawn out of compulsion.

1. When the browser engine is ready, the Execution Context Stack (ECS) presses the global object Window.

Simplified memory map:

Real memory map (this map requires some basic knowledge, should be in the understanding of the prototype chain, scope chain basis to understand) :

2. Improve variable declarations and function declarations.

Simplified memory diagram:

Real memory map (this map requires some basic knowledge, should be in the understanding of the prototype chain, scope chain basis to understand) :

3. Execute fn(), promote variable declaration, promote function declaration, variable assignment, establish the running context of FN, establish the current scope of FN.

Simplified memory diagram:

Real memory map (this map requires some basic knowledge, should be in the understanding of the prototype chain, scope chain basis to understand) :

4. Fn () is unstacked.

Simplified memory diagram:

Real memory map (this map requires some basic knowledge, should be in the understanding of the prototype chain, scope chain basis to understand) :

5. The browser is closed and the Global Object is removed.