JavaScript in-depth variable object

When JavaScript code executes a piece of executable code, an execution context is created.

For each execution context, there are three important properties:

Variable object (Variable object, VO)
Scope chain
this

variable object

The variable object is associated with the execution context 数据作用域and stores the variable and function declarations defined in the context

Because the variable objects in different execution contexts are slightly different, the main thing to talk about today is 全局上下文下的变量and函数上下文下的变量对象

global context

How is it defined on w3shool:

Global objects are predefined objects that serve as placeholders for JavaScript's global functions and global properties. All other predefined objects, functions, and properties can be accessed by using the global object.

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

For example, when JavaScript code refers to the parseInt() function, it refers to the parseInt property of the global object. The global object is the head of the scope chain, and also means that all variables declared in top-level JavaScript code will become properties of the global object.

1. It can be referenced by this. In client-side JavaScript, the global object is the Window object.

console.log(this);   //this 指向 windows

2. The global object is an object instantiated by the Object constructor.

console.log(this instanceof Object);  //true

3. A bunch of, well, a bunch of functions and properties are predefined.

console.log(Math.random());
console.log(this.Math.random());

4. As a host for global variables.

var a = 1;
console.log(this.a);

5. In client-side JavaScript, the global object has a window property that points to itself.

var a = 1;
console.log(window.a);

this.window.b = 2;
console.log(this.b);

After spending a lot of time introducing global objects, I actually want to say:

The variable object in the global context is the global object

function context

In the functional context, we use the activation object (AO) to represent the variable object. .

The active object and the variable object are actually the same thing, but the variable object is based on the specification or the engine implementation, and cannot be accessed in the JavaScript environment. Only when entering an execution context, the variable object of this execution context will be used. Activation , so it is called activation object, and only the activated variable object, that is, various attributes on the active object can be accessed.

The active object is created when the function context is entered, and it is initialized through the function's arguments property.

The arguments property value is the Arguments object.

Implementation process

The code of the execution context is processed in two phases: analysis and execution, which we can also call:

enter the execution context
code execution

enter the execution context

When entering the execution context, the code has not yet been executed

So what are you doing now?

All formal parameters of the function (function context)

A variable object consisting of a name and a corresponding value is created
No arguments, property value is set to undefined

function declaration

The properties of a variable object consisting of a name and a corresponding value are created
If the variable object already exists replace this property completely

variable declaration

A property of a variable object consisting of a name and a corresponding value (undefined) is created;
When entering the execution context, the function declaration is processed first, the function declaration is processed first, and the variable declaration is processed second. If the variable name is the same as the formal parameter or function that has been declared, the variable declaration will not interfere with such properties that already exist.

look at this code

function foo(a) {
  var b = 2;
  function c() {}
  var d = function() {};
  b = 3;
}

foo(1);

After entering the execution context, the AO at this time is:

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

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:

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

At this point, the creation process of the variable object has been introduced. Let us briefly summarize what we said above:

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

In a sense this also explains variable boosting

think

function foo() {
    console.log(a);
    a = 1;
}

foo(); // ???

function bar() {
    a = 1;
    console.log(a);
}
bar(); // ???

The first paragraph will report an error: Uncaught ReferenceError: a is not defined.

The second segment is 1

This is because the "a" in the function is not declared with the var keyword, so it will not be stored in AO.

When the first paragraph executes the console, the AO looks like this:

AO = {
    arguments: {
        length: 0
    }
}

If there is no value of a, then it will go to the global to find it, and there is no global, so an error will be reported.

When the second stage executes the console, the global object has been assigned the a attribute, and the value of a can be found globally, so 1 will be printed.

console.log(foo);

function foo(){
    console.log("foo");
}

var foo = 1;

will print the function, not undefined.

This is because when the execution context is entered, function declarations are processed first, and variable declarations are processed second, and if the variable name is the same as an already-declared formal parameter or function, the variable declaration will not interfere with such properties that already exist.
For details, please refer to my previous essay for a more in-depth understanding