JavaScript execution Environment, variable object, scope chain

Objective

Looking at JavaScript advanced programming these days, it's a bit blurry to see the execution environment and scope chain. The book is still not specific enough to talk about.
Through the Internet to check the information, special to summarize, for review and correction.

To speak in turn:

• EC (Execution environment or execution contexts, execution context)
• ECS (Execution Environment stack execution context stack)
• VO (Variable objects, Variable object) | AO (Active objects, active object)
• Scope chain (scope chain) and [[Scope]] Properties

EC

Whenever the controller arrives at the ECMAScript executable code, the controller enters an execution context (the concept of a tall one).

In JavaScript, EC is divided into three types:

• Global level Code – this is the default code runtime environment, and once the code is loaded, the engine first enters the environment.
• Code at the function level – when executing a function, run the code in the body of the function.
• Eval Code – code that runs within the Eval function.

The EC establishment is divided into two stages: the execution context and the execution phase.

1. Enter the context stage: Occurs when a function call is made, but before the execution of the specific code (for example, before a function parameter is materialized)
2. Execute code Stage: variable assignment, function reference, execution of other code.

We can consider the EC as an object.

ec={    vo:{/* Functions arguments objects, arguments, internal variables, and function declarations */}, this    : {},/    * vo, and VO in all parent execution contexts */ }}

Ecs

The execution context of a series of activities logically forms a stack. The bottom of the stack is always the global context, and the top of the stack is the current (active) execution context. When switching between different execution contexts (exiting and entering a new execution context), the stack is modified (by means of a stack or a fallback).

Press stack: Global ec--> local ec1--> local ec2--> current EC
Out of Stack: Global ec<--local ec1<--local ec2<--current EC

We can represent the environment stack in the form of an array:

ecs=[local EC, global EC];

Each time the controller enters a function (even if the function is called recursively or as a constructor), the operation of the stack will occur. The process is similar to the push and pop operations of a JavaScript array.

When the JavaScript code file is loaded by the browser, the default first entry is a global execution context. When a function is called in the global context, the program flow enters the called function, and the engine creates a new execution context for the function, and presses it into the top of the execution context stack. The browser always executes the current context at the top of the stack, and once executed, the context is ejected from the top of the stack and then into the context under which the code executes. The context in the stack is then executed sequentially and the stack pops up until it returns to the global context.

vo| Aovo

Each EC corresponds to a Variable object VO, and all variables and functions defined in the EC are stored in their corresponding VO.

Vo is divided into the global context Vo (Global object, Universal object, which we usually call global objects) and the AO of the function context.

VO:  data in {//context (variable declaration (VAR), function declaration (FD), function parameter arguments)}

1. When entering the execution context, the initialization process of VO is as follows:

• Formal parameters of the function (when entering the function execution context)
  --a property of a variable object whose property name is the name of the formal parameter, whose value is the value of the argument, and for a parameter that is not passed, the value is undefined

• function declaration (functiondeclaration, FD)--a property of a variable object whose property name and value are created by a function object, and if the variable object already contains a property of the same name, replace its value

• Variable declaration (var,variabledeclaration)--a property of a variable object whose property name is the variable name and whose value is undefined; if the variable name and the function name already declared or the parameter name of the function are the same, the existing property will not be affected.

Note: The process is sequential.

2. When executing the code phase, some of the property undefined values in VO will be determined.

AO

In the context of the execution of a function, VO is not directly accessible. It mainly plays the role of being called the active object (activation objects) (abbreviation: AO).

How to understand this sentence, that is, when the EC environment is a function, we are visiting AO, not VO.

VO (functioncontext) = = = AO;

The AO is created when entering the execution context of the function and initializes an arguments property for the object with the value of the arguments object.

AO = {  arguments: {    callee:,    length:,    //function argument value  }};

The form of FD can only be as follows:

 functionf()  {}

Example

Vo Example :

//function var Ten //Ten ;  functionx()  //

When you enter the execution context,

ecobject={  vo:{    x:<referencetofunctiondeclaration "x" >}  ;

When executing code:

ecobject={  vo:{    x://With the same name as function x, replace it, first 10, then becomea  }};

For the above procedure, we explain in detail.

When the context is entered, Vo is filled with the function declaration, and at the same stage, the variable declares "x", but, as mentioned earlier, the variable declaration is after the function declaration and the function parameter, and the variable declaration does not conflict with the function declaration and function parameter of the same name that already exists. Therefore, at the stage of entering the context, Vo fills in the following form:

VO = {}; vo[' x'< reference function declaration ' x '>< value not affected, still function > 

The execution code phase, VO is modified as follows:

vo[' x '; vo[' x ';

As shown in the following example, the variable is stored in VO in the context stage (so, although the else code block is never executed, and "B" is still in Vo)

if (true) {  var1else {  var2//1//undefined, but not ' B is ' Not defined "

AO example :

function Test (A, b)  {  varten;   functiond()  {}  varfunction_e(){};  (functionx(){});} Test (// Call

When test(10) the execution context is entered, its AO is:

testec={    ao:{        arguments: {            callee:test            length:1,            0:ten        },        A:ten,        C:undefined,        D:<referenceto  functiondeclaration "d" >,        e:undefined    }};

Thus, in the establishment phase, VO in addition to arguments, function declarations, and parameters are given specific property values, the other variable properties default is undefined. The function expression does not affect VO, so it (function x() {}) does not exist in VO.

When executed test(10) , its AO is:

testec={    ao:{        arguments: {            callee:test,            length:1,            0:        },        A:ten,        C:ten,        D:<reference to functiondeclaration "D" >,        e:<referencetofunctiondeclaration " e">    }};

Visible, only at this stage, the variable property is assigned a specific value.

Scope chain

The process of finding variables in the scope of the execution context is called identifier resolution (Indentifier resolution), and the implementation of this process relies on another object within the function that is associated with the execution context-the scope chain. A scope chain is an ordered list of objects that tell the JavaScript parser exactly which variable is associated with an identifier. Each execution context has its own scope chain scope.

Bottom line: Scope chain scope is actually a variable object in the execution context EC vo| A linked list of AO ordered accesses. can be accessed sequentially to vo| AO, you can access the definitions of the variables and functions stored in them.

The scope is defined as follows:

Scope = ao| VO + [[Scope]]

Where AO is always at the forefront of scope, or why is it called an active object? That

Scope = [Ao].concat ([[Scope]]);

This shows that the scope chain is already in effect when the function is created.

So what is [[Scope]]?

[[Scope]] is a hierarchical chain that contains all the upper-level variable objects, which belong to the current function context and are saved in the function when the function is created.

[[Scope]] is saved when the function is created-static (unchanging), only once and always exists-until the function is destroyed. For example, even if a function can never be called, the [Scope] property is already stored on the function object.

var x=Ten;  functionF1()  {  var y=;   functionf2()  {    return x+y;  }}

In the example above, F2 's [[scope]] property can be represented as follows:

F2. [[scope]]=[  F2outercontext.vo]

All of the f2 upper variable objects of the external EC include the f1 active object F1context.ao, and then the outer EC, which is the global object.
So, specifically, we can say the following:

F2. [[scope]]=[  F1context.ao,  Globalcontext.vo]

For an EC execution environment is a function, then its scope is expressed as:

functioncontext.scope=functioncontext.ao+function. [ [scope]]

Note that the representation of the above code also reflects the difference between [[scope]] and scope, scope is the property of the EC, and [[scope]] is the static property of the function.

(Due to ao| Vo is different in the execution context and execution code phase, so, here and later, the scope of the representation, we are implicitly the implementation of the Code stage scope, and for the static property [[scope], the function declaration is created)

For the above code EC, we can give an indication of its scope:

exampelec={  scope:[    f2context.ao+f2.[ [Scope],    f1.context.ao+f1.[ [Scope]],    globalcontext.vo  ]}

Next, we give a representation of these other values:

• Globalcontext.vo

globalcontext.vo={  x:ten,  F1:<referencetofunctiondeclaration "F1" >}

• F2context.ao

f2context.ao={  f1context.ao={    arguments: {      callee:f1,      length:0    } ,    y:    F2:< reference tofunctiondeclaration " f2">  }}

• F2. [[Scope]]

f2context.ao={  f1context.ao:{    arguments: {      callee:f1,      length:0    },    y:     F2:< reference tofunctiondeclaration "F2 ">  ,  globalcontext.vo:{    x:10,    F1:<referenceto  functiondeclaration "F1" >  }}

• F1context.ao

f1context.ao={  arguments: {    callee:f1,    length:0  },  y:x,  F2:  <referencetofunctiondeclaration "f2" >}

• F1. [Scope]

F1. [[scope]]={  globalcontext.vo:{    x:undefined,    F1:undefined  }}

Well, we know that scope chain scope is used for orderly access to vo| The variables and functions in AO, for example above, we give the process of access:

• X,f1

"x" //Not found //Not found //Found-10

The F1 access process is similar.

• Y

"Y" //Not found //found-20

We find that the access process for variables and functions does not involve [[scope]], so what is the meaning of [[scope]]?

Let's take a look at the next article.

Summarize

1. The EC is divided into two phases, entering the execution context and executing the code.
2. Ecstack manages the press stack and the stack of the EC.
3. Each EC corresponds to one scope chain scope,vo| AO (Ao,vo can only have one), this.
4. The scope of the function EC is created when entering the function EC to order access to variables and functions in the AO of the EC object.
5. The AO in the function EC determines the properties of the arguments object when it enters the function EC, and the other variable attributes are materialized when the function EC is executed.
6. The function's [[scope]] property is determined at the time the function is created and remains unchanged.

Reference

• Deep understanding of JavaScript's execution context (execution context)
• Variable Object
• variables, scope chains, execution contexts in JavaScript
• Scope chain and [[scope]]
• JavaScript functions

JavaScript execution Environment, variable object, scope chain