The original intention of this series of articles is to “let each front-end engineer master the high frequency knowledge, for the work of power”. This is the front end of the 11th cut, I hope friends pay attention to the public number “kite”, armed with knowledge of their minds.

A variable object is a special object that is specific to the execution context and stores the content declared in the context. According to the execution context, it can be divided into variable objects in the global context and objects in the function context.

  1. Variable objects in the global context

    A global object is created before entering the global execution context. There is only one copy of this object, its properties can be accessed anywhere in the program, and its life cycle terminates when the program exits. For example, variables defined globally, Math, Date, and so on are variable objects in the global context.

  2. A variable object in a function context

    Within the execution context of a function are the things that are relevant to that execution context: parameters, function declarations, variables, which are the variable objects in a function. (Variable objects in functions will be highlighted below)

The execution context is divided into the creation stage and the code execution stage, in which the creation stage will complete the creation of variables; Variable assignments are completed during code execution. The process is described in these two phases.

function test(x, y, z) {
    console.log(arguments);
    console.log(childFun());
    console.log(val1);
    var val1 = 10;
    console.log(val1);
    function childFun() {
        return 'childFun';
    }
    console.log(childFun());
}
Copy the code

11.1 Creation Phase

During the creation of variable objects, the following steps are completed:

  1. Create Arguments objects

Arguments is an array-like object corresponding to the arguments passed to the function. In the variable object creation stage, the parameters in the current context are checked first, and the attributes and attribute values under the object are established. The result of arguments creation is as follows:

[Arguments] { '0': x, '1': y, '2': z }
Copy the code
  1. checkfunctionFunction declarations create properties

Creates an attribute with the name of the function in the variable object and the value of the attribute is a reference to the memory address of the function. If an attribute of the function name already exists, the attribute will be overridden by a new reference.

  1. Check variable declarations to create properties

For each variable declared by var, an attribute is created in the variable object with the name of the variable, and the value of the attribute is undefined. If the attribute of the variable name already exists, to prevent the function with the same name from being changed to undefined, the original attribute value will be skipped. Variables declared for lets and const only have one property but are not aligned and assigned, so cannot be used.

11.2 Execution Phase

None of the properties in the variable object can be accessed until the execution stage, but after the execution stage, the variable object (VO) is transformed into the active object (AO), and all the properties in the variable object can be accessed, and then the execution stage operation begins. (Variable objects and active objects are actually the same object, but in different life cycles in the execution context)

First take a look at the result of the entire code execution

function test1(x, y, z) {
    console.log(arguments); // [Arguments] { '0': 1, '1': 2, '2': 3 }
    console.log(childFun()); // childFun
    console.log(val1); // undefined
    var val1 = 10;
    console.log(val1); / / 10
    function childFun() {
        return 'childFun';
    }
    console.log(childFun()); // childFun
}

test1(1.2.3);
Copy the code
  1. In the aboveargumentsReceived the incoming parameter, completed the assignment of the corresponding attribute value, and verifiedargumentsParameter structure;
  2. ChildFun can be called in both places and output the correct result, proving that the function has been promoted and assigned during the creation phase.
  3. If the val1 variable can be called before initialization, then the promotion of the variable has been completed during its creation, but its value is only assigned as undefined until the corresponding statement is executed.

1. If you think this article is good, share and like it so that more people can see it

2. Pay attention to the public number of kite, and the number of the Lord together to kill the front hundred.