Detailed analysis and answers to the principles of JavaScript operation

This article provides you with 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. It is different from other programming languages, such as Java/C and other compiled languages. These languages Before the code is executed, the entire code will be compiled 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). Execution context can be understood as the execution environment (execution context can only be created by the JS interpreter and can only be used by the JS interpreter. 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 every 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 phases:

Creation phase

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. According to the function parameters, create and initialize the arguments object 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 the JS controller switches to this piece of code, an execution context will be created. G_EC

The structure of the 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

Once the execution context is 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. Properties point to the scope chain above.

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

Execution phase

The code is executed line by line. When an expression is encountered, it will be searched in the current scope chain. If the VO object is found, it will be returned. If it is not found, it will continue to search for the next VO object until the global VO object is terminated.

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

The above is what I compiled for everyone , I hope it will be helpful to everyone in the future.

Related articles:

p5.jsImplementing golden spiral animation

Event delegation in JS Detailed explanation of usage

Vue.js Detailed explanation of usage of computed and methods

The above is the detailed content of Detailed analysis and answers to the principles of JavaScript operation. For more information, please follow other related articles on the PHP Chinese website!