The fourth part of the JavaScript In-depth series covers variable objects and live objects in an execution context. What is a variable object in the global context? How are live objects analyzed and executed in the context of functions? Here are two more questions to think about to impress you. Check them out!

preface

As mentioned in the previous section of the Executable Context Stack, when a JavaScript code executes a executable code, an execution context is created.

For each execution context, there are three important properties:

  • Variable Object (VO)
  • Scope chain
  • this

Today we’ll focus on the process of creating variable objects.

The variable object

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

Since variable objects are slightly different in different execution contexts, let’s talk about variable objects in the global context and variable objects in the function context.

Global context

Let’s start with a concept called a global object. Also described in W3C School:

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

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

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

If that doesn’t make sense, let me introduce global objects again:

1. The global object is the Window object in client-side JavaScript.

console.log(this);Copy the code

2. A global Object is an Object instantiated by the Object constructor.

console.log(this instanceof Object);Copy the code

3. Predefined a bunch of, uh, a bunch of functions and properties.

// Both are valid
console.log(Math.random());
console.log(this.Math.random());Copy the code

4. Host global variables.

var a = 1;
console.log(this.a);Copy the code

5. In client JavaScript, the global object has the window property pointing to itself.

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

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

I spent a lot of time talking about global objects, which really says:

A variable object in a global context is a global object.

Function context

In the function context, we use an activation Object (AO) to represent a variable object.

As you can see, activation of a variable object is not available in JavaScript until you enter an execution context. As you can see, activation of a variable object is not available in JavaScript. Only the active variable object, that is, the properties of the active object, can be accessed.

The live object is created when entering the function context and is initialized via the arguments property of the function. The arguments attribute value is the Arguments object.

Implementation process

The code that executes the context is processed in two phases: analysis and execution, which can also be called:

  1. Enter the execution context
  2. Code execution

Enter the execution context

When you enter the execution context, no code has been executed yet,

The variable object will include:

  1. All parameters of a function (if function context)

    • A property of a variable object consisting of a name and a corresponding value is created
    • There are no arguments, and the property value is set to undefined

  2. Function declaration

    • Properties of a variable object are created, consisting of the name and the corresponding value (function-object)
    • If the variable object already has a property of the same name, replace the property completely

  3. Variable declarations

    • Properties of a variable object are created, consisting of a name and a corresponding value (undefined);
    • If the variable name is the same as the declared formal parameter or function, the variable declaration does not interfere with the existing properties

Here’s an example:

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

  b = 3;

}

foo(1);Copy the code

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

AO = {
    arguments: {
        0: 1.length: 1
    },
    a: 1.b: undefined.c: reference to function c(){},
    d: undefined
}Copy the code

Code execution

During the code execution phase, the code is executed sequentially, and the value of the variable object is modified according to the code

As in the above example, when the code is finished, the AO is:

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

This is the end of the variable object creation process, let’s briefly summarize what we said above:

  1. Global context variable object initialization is global object

  2. The variable object initialization in the function context includes only the Arguments object

  3. The initial property values of parameters, function declarations, variable declarations, and so on are added to the variable object as it enters the execution context

  4. During the code execution phase, the property values of the variable object are modified again

To consider

Finally, let’s look at some examples:

1. The first question

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

foo(); // ???

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

Uncaught ReferenceError: A is not defined.

The second paragraph will print: 1.

This is because the “a” in the function is not declared with the var keyword, so it is not stored in the AO.

When the first paragraph executes console, the value of AO is:

AO = {
    arguments: {
        length: 0}}Copy the code

There’s no value for a, and then you go to the global, and there’s no global, so you get an error.

When the second paragraph executes console, the global object has been given a property, and the value of a can be found globally, so 1 will be printed.

2. The second question

console.log(foo);

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

var foo = 1;Copy the code

The function is printed instead of undefined.

This is because when entering the execution context, function declarations are processed first and variable declarations second, and if the name of the variable is the same as a formal parameter or function that has already been declared, then the variable declaration does not interfere with such attributes that already exist.

Next article

JavaScript Deep in the Scope Chain

Link to this article

JavaScript In-depth Execution Context Stack

In-depth series

JavaScript in-depth series directory address: github.com/mqyqingfeng… .

JavaScript in-depth series is expected to write about 15, aimed at helping you understand the underlying knowledge of JavaScript, focusing on such as prototypes, scope, execution context, variable objects, this, closures, passing by value, call, apply, bind, new, inheritance and other difficult concepts.

If there are any mistakes or irregularities, please be sure to correct them. Thank you very much. If you like it or have some inspiration, welcome star, which is also a kind of encouragement to the author.