Detailed explanation of how JavaScript works

This article mainly gives you a detailed theoretical analysis of the operating principles of JavaScript and sharing of knowledge points. If you are interested in this, please learn it.

JavaScript is an object-based dynamic, weakly typed scripting language (hereinafter referred to as JS). It is an interpreted language, which is different from other programming languages, such as compiled languages ​​​​such as java/C++. , these languages ​​​​will be fully compiled before the code is executed, and first compiled into bytecode (machine code). Then execute. JS does not do this. JS does not need to be compiled into intermediate code, but can be run directly in the browser. The JS running process can be divided into two stages, compilation and execution. (Please refer to the book JS You Don’t Know), when the JS controller switches to a piece of executable code (this executable code is generated during the compilation phase), the corresponding Execution Context (EC for short). The execution context can be understood as the execution environment (the execution context can only be created and used by the JS interpreter, and users cannot operate the 'object').

The execution environment in JS is divided into three categories:

• Global environment: When the JS engine enters a code block, such as When you encounter the <script>xxx</script> tag, you enter a global execution environment

• Function environment: When a function is called, a function execution is formed inside the function Environment

• eval(): Execute the string as JS code alone. It is not recommended to use

. Multiple errors may occur in a piece of JS code. An execution context. In JS, a data structure such as a stack is used to manage the execution context. The characteristics of the stack are "first in, last out, last in, first out". This kind of stack is called a function call stack.

Characteristics of execution context

• The bottom of the stack is always the global execution context, and there is only one

• The global execution context will only pop up the stack when the browser is closed

• There is no limit to the number of other execution contexts

• The top of the stack is always The current active execution context, the rest are in a waiting state, once execution is completed, the stack is popped immediately, and then control is handed back to the next execution context

• The function is only called each time , an execution context will be created for it, which does not exist when the function is declared.

The execution context can be vividly understood as an ordinary JS object. The life cycle of an execution context roughly includes two stages:

Creation stage

This stage mainly completes three events, 1. Create variable object 2. Establish scope chain 3. Determine this point

Execution stage

This stage Mainly completes variable assignment, function calling, and other operations

The creation process of variable objects (VO)

• 1. Create and initialize the arguments object according to the function parameters, and give arguments The object adds attributes such as "0", "1", "2", and "3", whose initial value is undefined, and the arguments.length value is set to the actual number of parameters passed in.

• 2. Find the function function declaration and add attributes to the variable object. The attribute name is the function name, and the attribute value is the reference value of the function. If there is already one with the same name, it will be overwritten directly

• 3. Search for var variable declaration (when searching for a variable, the parameters of the function will be equivalent to the var declaration, so the same attribute as the parameter name will also be added to the VO, and the initial value will also be added. undefined), add an attribute to the variable object. The attribute name is the variable name and the attribute value is undefined. If an identifier with the same name already exists, it will not be processed.

If there is an identifier with the same name (function, variable ), the function can overwrite the variable, and the function has a higher priority than the variable

Variable object (OV) and activation object (AO) are the same thing, two names at different times. It is called the variable object during the creation period and the activation object during the execution period.

Take the following code as an example

var g_name="tom";
var g_age=20;
function g_fn(num){
 var l_name="kity";
 var l_age=18;
 function l_fn(){
  console.log(g_name + '===' + l_name + '===' + num);
 }
}
g_fn(10);

Compilation phase

When JS When the controller switches to this piece of code, an execution context will be created. The structure of the G_EC

execution context is roughly as follows:

G_EC = {
 VO   : {},
 Scope_chain : [],
 this  : {}
}

/* VO的结构大概 */
VO = {
 g_name : undefined,
 g_age : undefined,
 g_fn : <函数在内存中引用值>
}

/* Scope_chain的大概结构如下 */
Scope_chain = [ G_EC.VO ] // 数组中第一个元素是当前执行上下文的VO，第二个是父执行上下文的VO,最后一个是全局执行上下文的VO,在执行阶段，会沿着这个作用域链一个一个的查找标识符，如果查到则返回，否知一直查找到全局执行上下文的VO

/* this */
this = undefined // 此时this的值是undefined

Execution context Once created, it is immediately pushed into the function call stack. At this time, the interpreter will quietly do one thing, which is to add an internal attribute [[scope]] to the function in the current VO, which points to the above scope. chain.

g_fn.scope = [ global_EC.VO ] // 该scope属性只能被JS解释器所使用，用户无法使用

Execution phase

Execute the code line by line. When an expression is encountered, it will search for the VO object in the current scope chain. If found, return. If not found, continue to search for the next VO object until the global VO object terminates.

This stage can include variable assignment, function call and other operations. When the interpreter encounters g_fn(), it knows that this is a function call, and then immediately creates a function execution context for it, fn_EC. , the context fn_EC also has two phases

, which are the creation phase and the execution phase.

In the creation phase, for the function execution context, when creating a variable object, an additional arguments object will be created, and then attributes will be added to the arguments object: "0", "1", "2" whose initial value is undefined,

• Find function function declaration

• Find var variable declaration

Related recommendations:

JavaScript running mechanism sample code analysis

This detailed introduction to JavaScript running mechanism_Basic knowledge

Events of JavaScript running mechanism Detailed explanation of Loop (Event Loop)_javascript skills

The above is the detailed content of Detailed explanation of how JavaScript works. For more information, please follow other related articles on the PHP Chinese website!