In-depth understanding of JavaScript Internal principles (1): Execution Context

Description

This article is a translationDmitry soshnikov'sArticleExecution contexts.

Article address:Http://dmitrysoshnikov.com/ecmascript/chapter-1-execution-contexts/

Summary 

In this article, we will introduce the executable context of ecmascript and the types of relevant executable context.

Definition

Every time the Controller enters ecmascript, it can be executedCodeThe Controller enters an executable context. The executable context (EC) is an abstract concept. It is used in ecma262 to distinguish different types of executable code.

The specific structure and type of the execution context are not defined from the technical implementation perspective in the Standard Specification; this is a problem to be considered by the ecmascript engine to implement the standard.

Logically, the executable context of an activity forms a stack. At the bottom of the stack is a global executable context, and the top is the current executable context. Different types of executable context modify the stack when entering or leaving the stack.

Type of executable code

The type of the executable context is related to the executable code. Sometimes, when it comes to the type of executable code, it indicates the executable context.

For example, we define a stack with an executable context represented by an array.

 
Ecstack = [];
 

Each time the Controller enters a function (even if the function is called recursively or as the constructor), the stack is pressed. The same is true for built-in eval functions.

Global Code

This type of code is inProgramLevel. For example, loading external JS files and inline JS Code (included in the script tag) Global Code does not include code in any function.

During initialization (the program starts), The ecstack is as follows:

 
Ecstack = [
Globalcontext
];
 

Function Code

Once the Controller enters the function code, the ecstack is pushed into a new element. Note that the entity Function Code does not contain any internal function code.

As shown in: we call a function. This function recursively calls itself once.

(Function Foo (FLAG ){
If (FLAG ){
Return;
}
Foo (true );
}) (False );
 

Then, the ecstack is changed to the following:

// First activation of foo
Ecstack = [
<Foo> functioncontext
Globalcontext
];

// Recursive activation of foo
Ecstack = [
<Foo> functioncontext-recursively
<Foo> functioncontext
Globalcontext
];
 

Each time the function returns, when the execution context of the current activity is exited, The ecstack will be executed for the corresponding rollback operation-advanced and later-consistent with the traditional stack implementation. Similarly, when an uncaptured exception is thrown, one or more execution contexts are exited, and ecstack performs corresponding rollback operations. After the code is complete, only one execution context (globalcontext) exists in the ecstack until the entire program ends. 

Eval code  

Eval code is interesting. Here we should mention a concept called call context. For example, the context when calling the eval function is a call context, and the action executed in the eval function (for example, the variable declaration or function declaration) will affect the entire call context:

 
Eval ('var x = 10 ');
(Function Foo (){
Eval ('var y = 20 ');
})();
Alert (x); // 10
Alert (y); // "y" is not defined
 

Ecstack will be changed:

 
Ecstack = [globalcontext]; // eval ('var x = 10'); ecstack. push (evalcontext, callingcontext: globalcontext); // eval exited contextecstack. pop (); // Foo function callecstack. push (functioncontext); // eval ('var y = 20'); ecstack. push (evalcontext, callingcontext: functioncontext); // return from evalecstack. pop (); // return from fooecstack. pop ();
 

In the implementation of spidermonkey of version 1.7 or later (JS engine built in Firefox and Thunderbird), the call context can be passed to the eval function as the second parameter when calling the eval function. Therefore, if the incoming call context exists, it may affect the original private variables in the context (the variables declared in the context ):

 
Function Foo () {var x = 1; return function () {alert (x) ;}}; var bar = Foo (); Bar (); // 1 eval ('X = 2', bar); // transfer context, affecting the internal variable "Var X" bar (); // 2
 

Summary

These basic theories are necessary for subsequent contextual analysis (such as variable objects and scope chains.

Additional reading

Chapter on the ECMA-363-3 standard document --10. Execution Context