Analysis of JavaScript operating principles and javascript operating principles

Analysis of JavaScript operating principles and javascript operating principles

JavaScript is an object-based dynamic and weak scripting language (JS). It is an interpreted language, which is different from other programming languages, for example, compiled languages such as java/C ++ are compiled in full before code execution and first compiled into bytecode (machine code ). And then execute. JS does not do this. JS does not need to be compiled into an intermediate code, but can be run directly in a browser. The JS running process can be divided into two phases: Compilation and execution. (SeeJS you don't knowThis book), when the JS controller is switched to a piece of executable code (this piece of executable code is generated in the compilation phase ), the corresponding execution Context (EC) is created ). The execution context can be understood as the execution environment (the execution context can only be created by the JS interpreter, and can only be used by the JS interpreter. You cannot operate on this 'object ).

The execution environment in JS is divided into three types:

• Global Environment: When the JS engine enters a code block, if the <script> xxx </script> label is encountered, it enters a global execution environment.
• Function environment: When a function is called, a function execution environment is formed inside the function.
• Eval (): It is not recommended to execute a single string for JS Code.

Multiple execution contexts may be generated in a piece of JS Code. In JS, the stack data structure is used to manage the execution context. The stack is characterized by "first-in-first-out, later-in-first-out ", this stack is called the function call stack.

Execution context features

• Stack bottom is always a global execution context, with only one
• The stack is displayed only when the browser is closed.
• There is no limit on the number of other execution contexts
• The top of the stack is always the execution context of the current activity, and the rest are in the waiting state. Once the execution is completed, the stack pops up immediately, and the control is handed back to the next execution context.
• A function creates an execution context for the function only when it is called. The function is not declared.

The execution context can be interpreted as a common JS object. The life cycle of an execution context includes two phases:

Creation phase

Three events are completed in this phase. 1. Create a variable object. 2. Create a scope chain. 3. confirm that this directs

Execution phase

Variable assignment, function calling, and other operations are completed in this phase.

Creation process of variable object (VO)

• 1. Create and initialize the arguments object based on function parameters, and add attributes such as "0", "1", "2", "3" to the arguments object. The initial value is undefined, set arguments. the length value is the number of input parameters.
• 2. Find the function declaration and add the attribute to the variable object. The attribute name is the function name and the attribute value is the reference value of the function. If the same name already exists, directly overwrite it.
• 3. Find the var variable declaration. (when you look for a variable, the parameter of the function is equivalent to the var declaration. Therefore, the same attribute as the parameter name is added in VO, and the initial value is undefined ), add an attribute to the variable object. The attribute name is the variable name, and the attribute value is undefined. If the same name already exists, do not process it.

If an identifier with the same name (function or variable) exists, the function can overwrite the variable. The priority of the function is higher than that of the variable.

The variable object (OV) and the activation object (AO) are the same thing. They are called in different periods. It is called a variable object during creation and an activation object during execution.

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 is transferred to this code segment, an execution context is created, G_EC

The execution context structure is roughly as follows:

G_EC = {VO :{}, Scope_chain: [], this :{}}/* VO structure */VO = {g_name: undefined, g_age: undefined, g_fn: <function reference value in memory>}/* the approximate structure of Scope_chain is as follows */Scope_chain = [G_EC.VO] // The first element in the array is the VO of the current execution context, the second is the VO of the parent execution context, and the last is the vo of the global execution context. In the execution phase, the identifiers will be searched one by one along the scope chain. If it is found, it will be returned, no, the VO/* this */this = undefined // of the global execution context is always found. The value of this is 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, this is to add an internal attribute [[scope] to the function in the current VO, pointing to the scope chain above.

G_fn.scope = [global_EC.VO] // This scope attribute can only be used by the JS interpreter and cannot be used by users.

Execution phase

One line of code is executed. When an expression is encountered, the VO object will be searched in the current scope chain. If yes, the VO object will be returned. If no VO object is found, the next VO object will be searched, until the global VO object ends.

In this phase, you can assign values to variables, call functions, and perform 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, this context fn_EC also has two phases

They are the creation and execution phases.

During the creation phase, when creating a variable object for the function execution context, an arguments object is created, and the attribute "0", "1 ", "2" its initial value is undefined,

• Find function declaration
• Find var variable Declaration