In-depth study of JS series is the witness of my phased growth. I hope to comb relevant JS knowledge more rigorously and objectively through the form of articles. I also hope to help more friends of front-end development to solve problems and look forward to our common progress.

If you think this series is good, welcome to like, comment, forward, your support is the biggest power OF my persistence.

The opening

The previous article focused on executing the executable stack, which creates an execution context when javascript code executes a executable code.

For each execution context, there are three important attributes:

  • Variable Object VO
  • Scope chain
  • this

This article focuses 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 the context.

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

Global context

Let’s start with a concept called global objects. There is also an introduction in W3CSchool:

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.

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, which also means that all variables declared in the top-level JavaScript code will become properties of the global object.

If you don’t understand the global object, let me introduce the global object:

1. With this reference, in client-side javascript, the global object is the Window object.

console.log(this); // window
Copy the code

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

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

3. Pre-define a bunch of, well, a bunch of functions and properties.

// / all work
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-side javascript, the global object window property points 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 on global objects to say:

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

Function execution context

In the context of functions, we use activation Objects (AO)

Activation objects and variable objects are the same thing, but the variable objects are specification or engine implemented and cannot be accessed in a javascript environment. They are only activated in an execution context, so they are called activation objects. Only the active variable object, that is, the various properties on the active object, can be accessed.

The active object is created when the function context is entered, and it is initialized via the arguments property of the function, whose value is arguments object.

Implementation process

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

Enter execution context

When you enter the execution context, the code hasn’t been executed yet,

Variable objects include: 1. All arguments of a function (how is the function context)

* The property of a variable object is created with the name and the corresponding value. * There are no arguments and the property value is set to undefinedCopy the code

2. Function declaration

* An attribute that consists of a variable object's name and its corresponding value (function-object) is created. * If the variable object already has an attribute of the same name, the attribute is completely replacedCopy the code

3. Variable declarations

* An attribute of a variable object consisting of a name and a corresponding value (undefined) is created; * If the variable name is the same as the formal parameter or function already declared, the variable declaration does not interfere with such attributes that already existCopy the code

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 is

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

Code execution

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

Here is the example above. When the code is finished executing, 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

Here the variable object creation process is introduced, let’s briefly summarize what we said above:

  1. The variable object initialization of the global context is the global object
  2. Function context variable object initializations include only Arguments objects
  3. Initial attribute values such as parameters, function declarations, and variable declarations are added to variable objects when entering the execution context
  4. During code execution, the attribute values of the variable object are modified again

To consider

Finally, let’s look at some examples:

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 by the var keyword, so it will not be stored in the AO.

When console is executed in the first paragraph, the AO value is:

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

There’s no value of A, and then it’s going to look globally, and there’s no value of a globally, so it’s going to get an error.

When the second section executes the console function, the global object has been assigned the a property, and the value of a can be found globally, so 1 is printed.

The second question:

console.log(foo);

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

var foo = 1;
Copy the code

It prints functions instead of undefined.

This is because function declarations are processed first and variable declarations second when the execution context is entered. If the variable name is the same as an already-declared formal parameter or function, the variable declaration does not interfere with such properties that already exist.

Learn more about the JavaScript catalog

  • #1 [In-depth study of JS — Prototype and Prototype Chain]
  • #2: Lexical scope and dynamic scope
  • #3 [In-depth study of JS — implement Yamashita Text stack]
  • #4 【 In-depth study of JS – variable objects 】
  • #5 [In-depth study of JS — scope chain]
  • #6 [In-depth study of JS — This point in real Development Scenarios]
  • #7: The execution context of JS
  • #8: Js closures
  • #9 — Parameter passing by value

Welcome to add my personal wechat to discuss technology and personal growth.