Deep understanding of JavaScript object variables

In the last article to understand the JavaScript execution context stack , we have introduced the concept of execution context:

execution context

Classification: global context, function context

Global context: When executing global code, a global context is created.
Function context: When a function is executed, a function context is created.

Main properties:

• Variable object (Variable object, VO)
• Scope chain
• this

In this chapter, we mainly explain the variable object in the execution context.

variable object

A variable object is an execution context-dependent data scope that stores variable and function declarations in the context.

As we have mentioned in our in -depth understanding of JavaScript declaration promotion , there will be variable declaration promotion and function declaration promotion when the program is running. In fact, variable and function declarations are promoted to variable objects.

create process

The execution context is divided into two phases: parsing and execution.

Parse the execution context

When the execution context is resolved, no code has been executed yet.

The variable object is created at this time. If the execution context is the global context, the variable object initialization is the global object. If the execution context is a function context, the variable object is initialized through the function's arguments property. The arguments property value is the Arguments object.

At this point the variable object includes:

1. All formal parameters of the function (if it is a function context)

• A property of a variable object consisting of a name and a corresponding value is created
• If no arguments are passed in, the value is undefined

2. Function declaration

• The properties of a variable object consisting of the name and the function body are created
• If the variable object already has a property with the same name, replace the property completely

3. Variable declaration

• A property of a variable object consisting of a name and a corresponding value (undefined) is created
• If the variable name is the same as a formal parameter or function that has already been declared, the variable declaration will not interfere with such properties that already exist

for example:

function fn(a) {
    var b = 2
    function c() {}
    var d = function() {}
    b = 3
}
fn(1)

After parsing the execution context, the VO is:

VO = {
    arguments: {
        0: 1,
        length: 1
    },
    a: 1,
    b: undefined,
    c: reference to function c(){},
    d: undefined
}

code execution

In the code execution phase, the code will be executed sequentially, and the value of the variable object will be modified according to the code.

Still in the above example, when the code is executed, the AO at this time is:

VO = {
    arguments: {
        0: 1,
        length: 1
    },
    a: 1,
    b: 3,
    c: reference to function c(){},
    d: reference to FunctionExpression "d"
}

Let's briefly summarize the process of creating variable objects:

1. The variable object initialization of the global context is the global object
2. The variable object initialization of the function context includes only the Arguments object
3. When parsing the execution context, initial attribute values ​​such as formal parameters, function declarations, and variable declarations are added to the variable object.
4. During the code execution phase, the property value of the variable object will be modified again