In-depth understanding of JavaScript series (11) Execution Contexts_javascript skills

Introduction
Starting from this chapter, I will continue (translate, reprint, organize) http://dmitrysoshnikov.com/ website’s good articles on understanding ECMAScript standards.

What we are going to explain in this chapter is the execution context and various types of related executable code in the ECMAScript standard.

Original author: Dmitry A. Soshnikov
Original release: 2009-06-26
Original Russian text: http://dmitrysoshnikov.com/ecmascript/ru-chapter-1-execution-contexts /

English Translation: Dmitry A. Soshnikov.
Published: 2010-03-11
English Translation: http://dmitrysoshnikov.com/ecmascript/chapter-1-execution-contexts/

This article refers to the Chinese translation of blog garden justinw and made some error corrections. Thanks to the translator.
Copy code
Definition
Every time the controller switches to ECMAScript executable code, it enters an execution context. Execution context (-EC for short) is an abstract concept in the ECMA-262 standard, used to distinguish it from the concept of executable code.

The standard specification does not define the exact type and structure of EC from a technical implementation perspective. This should be an issue to be considered when specifically implementing the ECMAScript engine.

Active execution context groups logically form a stack. The bottom of the stack is always the global context, and the top is the current (active) execution context. The stack is modified (pushed or popped) when EC types enter and exit the context.

Executable code type
The concept of executable code type is related to the abstract concept of execution context. At some point, it is entirely possible that executable code and execution context are equivalent.

For example, we can define the execution context stack to be an array:

ECStack = [];
Every time a function is entered (even if the function is called recursively or as a constructor) or When the built-in eval function works, this stack will be pushed.

Global code
This type of code is handled at the "program" level: for example, loading external js files or code within local <script></script> tags. Global code does not include any code within a function body.

In the initialization (program startup) phase, ECStack looks like this:

Copy code The code is as follows:

ECStack = [
globalContext
];

Function code
When entering funtion function code (all types of funtions), ECStack is suppressed Incorporate new elements. It should be noted that the specific function code does not include inner function code. As shown below, we make the function adjust itself recursively once:

Copy the code The code is as follows:

(function foo(bar) {
if (bar) {
return;
}
foo(true);
})();

Then, ECStack is changed in the following way:

Copy the code The code is as follows:

/ / The first activation call of foo
ECStack = [
functionContext
globalContext
];

// The recursive activation call of foo
ECStack = [
functionContext – recursively
functionContext
globalContext
];

Every time it returns, the current execution context will be exited accordingly. The ECStack will pop up and the stack pointer will automatically move. This is a typical stack implementation. A thrown exception may exit from one or more execution contexts if not intercepted. After the relevant code is executed, ECStack will only contain the global context until the entire application ends.

Eval code
The eval code is a bit interesting. It has a concept: calling context, for example, the context generated when the eval function is called. eval (variable or function declaration) activities affect the calling context.

Copy code The code is as follows:

eval('var x = 10');

(function foo() {
eval('var y = 20');
})();

alert(x); // 10
alert( y); // "y" prompt does not declare

ECStack change process:

Copy codeThe code is as follows:

ECStack = [
globalContext
];

// eval('var x = 10');
ECStack.push(
evalContext,
callingContext: globalContext
);

// eval exited context
ECStack.pop();

// foo funciton call
ECStack.push(
// eval('var y = 20');
ECStack.push(
evalContext,
callingContext: functionContext
);

// return from eval
ECStack.pop();

// return from foo
ECStack.pop();

That is A very common logical call stack.

In the implementation of SpiderMonkey (built-in Firefox, Thunderbird) with version number 1.7 or above, the calling context can be passed to eval as the second parameter. Well, if this context exists, it is possible to affect "private" (some people like to call it) variables.

Copy code The code is as follows:

function foo() {
var x = 1 ;
return function () { alert(x); };
};

var bar = foo();

bar(); // 1

eval('x = 2', bar); // Passing in the context affects the internal var x variable

bar(); // 2

Conclusion
This article is the minimum theoretical basis for subsequent analysis of other topics related to execution context (such as variable objects, scope chains, etc.), which will be discussed in subsequent chapters.

Other references