JavaScript internal work variable object

This article focuses on one of the components of the execution context, the variable object (VO). This article is a continuation of the previous articles in the series. If you are interested, you may wish to read from the beginning

directory

  • preface
  • Variable object
  • Global variable object
  • Function variable object
  • Write in the last

preface

JavaScript programming can’t avoid declaring functions and variables to successfully build our systems, but how and where does the interpreter find them? What happens when we refer to these objects?

As mentioned in the previous article “Execution Context in JavaScript,” an execution context is created when JavaScript code executes a executable code.

For each execution context, there are three important properties:

  • Variable Object (VO)
  • Scope chain
  • this

Variable object

In the context of functions, we refer to variable objects as activation Objects (AO).

Active objects and variable objects are the same thing:

  1. Variable objects are spec – or engine-implementation-specific and not accessible in JavaScript environments
  2. Activation objects are called activation objects only when an execution context is entered, and only the activated variable objects, that is, the properties of the active object, can be accessed.

Here’s a tapir’s answer to the question:

We can simulate the creation of variable objects with code:

1. We use ordinary objects to represent variable objects

var VO = {}; // A variable object
Copy the code

2. The variable object is an attribute of the execution context:

activeContext = {
  VO: {
    Context data (var, FD, function arguments)}};Copy the code

3. When we encounter the following code:

var a = 10;

function func(x){
    var b = 20;
}
func(30);
Copy the code

4. The corresponding variable object should be:

// Global variable object
VO(Global) = {
    a: 10.func: reference to function plus(){}}// Func function context variable object
VO(func functionContext) = {
  x: 30.b: 20
};
Copy the code

Since variable objects vary slightly from execution context to execution context, we’ll separate them out.

Global variable object

Let’s start with a concept called global objects. It is also introduced in W3School:

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.

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. Predefined a bunch of, well, a bunch of functions and properties.

// Both work
console.log(Math.random());  / / random number
console.log(this.Math.random()); / / random number
Copy the code

4. Host global variables (awesome)

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

5. In client-side JavaScript, the global object has the window attribute pointing to itself.

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

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

And a variable object in a global context is a global object!

Variable objects in function context

VO is not directly accessible in the context of function execution, where the activation object (AO) takes on the role of VO.

VO(functionContext) === AO
Copy the code

An active object is created when the function context is entered, and it is initialized via the function arguments property. Arguments property values are arguments objects:

AO = {
    arguments: <ArgO>
}
Copy the code

The Arguments object is a property of the active object, which contains the following properties:

  1. Callee – reference to the current function
  2. Length – The actual number of arguments passed
  3. The value of the property-indexes attribute is the parameter value of the function (from left to right in the parameter list).
  4. Properties-indexes Specifies the number of internal elements equal to arguments.length.

Let’s look at the following code:

function foo(x, y, z) {
 
  Arguments (x, y, z)
  alert(foo.length); / / 3
 
  // The number of arguments actually passed in (only x, y)
  alert(arguments.length); / / 2
 
  // The callee of the argument is the function itself
  alert(arguments.callee === foo); // true
 
  // Share parameters
 
  alert(x === arguments[0]); // true
  alert(x); / / 10
 
  arguments[0] = 20;
  alert(x); / / 20
 
  x = 30;
  alert(arguments[0]); / / 30
 
  // However, the unpassed parameter z is not shared with the third index of the parameter

  z = 40;
  alert(arguments[2]); // undefined
 
  arguments[2] = 50;
  alert(z); / / 40
 
}
 
foo(10.20);
Copy the code

3.1 Execution Process

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

  1. Enter execution context
  2. Code execution

3.2 Entering the Execution Context

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

The variable object will include:

  1. All arguments to a function (if function context)

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

  2. Function declaration

    • The properties of a variable object consisting of a name and corresponding values (function-object) are created
    • If the variable object already has an attribute of the same name, replace the attribute completely

  3. Variable declarations

    • A variable object property 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 exist

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

3.3 Code Execution

During the code execution phase, the code is executed sequentially, modifying the value of the variable object based on the code

As in the previous example, 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. Initialization of a variable object in a global context is a global object;
  2. Function context variable object initializations include only Arguments objects;
  3. Add parameters, function declarations, variable declarations and other initial attribute values to the variable object when entering the execution context;
  4. During code execution, the variable object property values 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 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.

2. 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.

reference

  • JavaScript You Don’t Know
  • Understand variable objects in depth

Write in the last

This is the fourth article in a series of about 10 articles on the most frequently interviewed topics that are often overlooked in the workplace.

JavaScript internal power series:

I put the full version in CSDN, interested can go to see oh ~ portal

  1. This, call, apply
  2. From Prototype to Prototype Chain, Series ii
  3. From scope to scope chain, Series 3
  4. Execution Context in JavaScript (4)
  5. In this paper,
  6. Next up, execute now functions in JavaScript

About me

  • Name: Afterglow
  • WX: j565017805
  • JS addiction, the level is limited, modestly learning

Other precipitation

  • JavaScript version of LeetCode solution
  • Front-end advanced notes
  • CSDN

If you see the end, please bookmark, like and comment!! Continue to update, your three even is my biggest power, humbly accept the big men’s criticism and advice, mutual encouragement!