When the JS engine encounters executable code, it creates an execution context and pushes it onto the execution stack.

In each execution context, there are three properties:

  • this

  • Variable Object (VO)

  • Scope chain

The variable object

Variable objects are execution context-specific data scopes that store variable and function declarations defined in the context.

Since variable objects vary slightly from execution context to execution context, let’s talk about variable objects in global context and variable objects in function context.

Global context

Global objects are predefined objects that act as placeholders for JavaScript global functions and global properties. By using global objects, you can access all the other predefined objects, functions, and properties.

In top-level JavaScript code, you can reference the global object with the keyword this. Because the global object is the head of the scope chain, this means that all non-deterministic variable and function names are queried as properties of the object.

1. With this reference, in client-side JavaScript, the global object is the Window object. 2. A global Object is an Object instantiated by the Object constructor. 3. A large number of predefined functions and attributes. 4. Host global variables. 5. In client-side JavaScript, the global object has the window attribute pointing to itself.Copy the code
var a = 1;
console.log(window.a);

this.window.b = 2;
console.log(this.b);
Copy the code

A variable object in a global context is a global object

Function context

In the context of functions, we refer to variable objects as activation Objects (AO).

Activation objects and variables are actually the same thing, but they are specification or engine implementation specific and cannot be accessed in a JavaScript environment. They are only activated when an execution context is entered, so they are called activation Objects. Only the active variable object, that is, the various properties on the active object, can be accessed.

An active object is created when the function context is entered, and it is initialized via the function arguments property. Arguments property values are arguments objects.

Implementation process

The code executing the context is processed in two stages:

Analysis (into execution context) and execution (code execution)

Enter execution context

When you enter the execution context, the code is not being executed, it is just being analyzed.

Variable objects include (3 types) : The argument of a function (if the function context) is a variable object consisting of the name and the corresponding value. The attribute is created without arguments. If the variable object already has a property of the same name, The function declaration is greater than the variable declaration **. The variable declaration consists of the name and the corresponding value (undefined). If the variable name is the same as an already declared formal parameter or function, the variable declaration does not interfere with the existing class of attributes (** the function declaration is greater than the variable declaration **)Copy the code

Code execution

The code is executed sequentially, changing the value of the variable object based on the code

Example:

Summary of variable object analysis and execution

  • The variable object initialization of the global context is the global object

  • Function context variable object initializations include only Arguments objects

  • Initial attribute values such as parameters, function declarations, and variable declarations are added to variable objects when entering the execution context

  • During code execution, the attribute values of the variable object are modified again

The scope chain

In the variable object of JavaScript in-depth has mentioned that when looking for the variable will be from the current context variable object lookup, if not found, will be from the parent class (parent lexical level) of the variables in the object context search, always find global context variable object, is the global object. Thus a linked list of variable objects in multiple execution contexts is called a scoped chain.

We show how scope chains are created and changed in terms of the creation and activation of a function:

Function creates

The scope of a function is determined when the function is defined. The function has an internal property [[scope]] into which all parent objects are stored when the function is created. You can understand that [[scope]] is the hierarchy of all parent objects, but note that [[scope]] does not represent the full scope chain!

function foo() { function bar() { ... }} functions are created as ==== foo.[[scope]] = [globalContext.vo]; Bar.[[scope]] = [fooContext.AO, // Contains information about bar's parent foo globalContext.vo];Copy the code

Function is activated

When a function is activated, the active object is added to the front of the action chain after the VO/AO is created in the function context.

The Scope chain of the execution context is called Scope:

Scope = [AO].concat([[Scope]]); At this point, the scope chain is created.

Scope chain summary:

var scope = "global scope";
function checkscope(){
    var scope2 = 'local scope';
    return scope2;
}
checkscope();

Copy the code

The complete process of executing the function is as follows:

Original link: if there is infringement please contact the author to delete github.com/mqyqingfeng… Github.com/mqyqingfeng…