Variable objects in minimalist JavaScript

JavaScript Internal Power Variable Object

##Directory

Preface
• 1. Variable object
• 2. Global variable object
• 3. Function variable object
• Write at the end

(Free learning recommendation: javascript video tutorial)

Preface

When programming JavaScript, we cannot avoid declaring functions and variables in order to successfully build our system, but how and where does the interpreter find these functions and variables? What exactly happens when we reference these objects?

In the previous article "Execution Context in JavaScript" we mentioned part of it. When JavaScript code executes a piece of executable code (executable code), a corresponding execution context (execution context) will be created.

For each execution context, there are three important attributes:

Variable object (VO)
• Scope chain(Scope chain)
• this

1. Variable object

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

Active objects and variable objects

Actually are the same thing:

Variable objects are standardized or implemented by the engine and cannot be used in the JavaScript environment Access
1. Only when entering an execution context, the variable object of this execution context will be activated, so it is called activation object, and only the activated variable object, that is, various variables on the active object properties can be accessed.

Attached here is Tapir Da’s answer on the relationship between the two:

We can simulate the creation process of variable objects with code:

1. We use ordinary objects to represent variable objects

var VO = {}; // 变量对象

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

activeContext = {
  VO: {
    // 上下文数据（var, FD, function arguments)
  }};

3. When we encounter the following code When:

var a = 10;function func(x){
    var b = 20;}func(30);

4. The corresponding variable object should be:

// 全局变量对象VO(Global) = {
    a: 10,
    func: reference to function plus(){}}// func函数上下文的变量对象VO(func functionContext) = {
  x: 30,
  b: 20};

Because the variable objects under different execution contexts are slightly different, we will talk about them separately.

2. Global variable object

Let’s first understand a concept called global object. Also introduced in W3School:

Global objects are predefined objects that serve as placeholders for JavaScript global functions and global properties. By using the global object, you can access all other predefined objects, functions, and properties.

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

console.log(this); //Window

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 the host of global variables (very awesome)

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

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

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

And the

variable object in the global context is the global object!

3. Variable objects in function context

In the function execution context, VO cannot be accessed directly. At this time The

activation object (activation object, abbreviated as AO) plays the role of VO.

VO(functionContext) === AO

The active object is created when entering the function context, and it is initialized through the arguments attribute of the function. The value of the arguments attribute is the Arguments object:

AO = {
    arguments: <argo>}</argo>

The Arguments object is an attribute of the active object, which includes the following attributes:

callee - a reference to the current function
1. length — The number of parameters actually passed
2. properties-indexes (integer of string type) The value of the property is the parameter value of the function (arranged from left to right in the parameter list).
3. The number of elements inside properties-indexes is equal to arguments.length. The value of properties-indexes is shared with the parameters actually passed in.

Let’s look at the following code:

function foo(x, y, z) {

  // 声明的函数参数数量arguments (x, y, z)
  alert(foo.length); // 3

  // 真正传进来的参数个数(only x, y)
  alert(arguments.length); // 2

  // 参数的callee是函数自身
  alert(arguments.callee === foo); // true

  // 参数共享

  alert(x === arguments[0]); // true
  alert(x); // 10

  arguments[0] = 20;
  alert(x); // 20

  x = 30;
  alert(arguments[0]); // 30

  // 不过，没有传进来的参数z，和参数的第3个索引值是不共享的

  z = 40;
  alert(arguments[2]); // undefined

  arguments[2] = 50;
  alert(z); // 40
 }
 foo(10, 20);

3.1 Execution process

The execution context code will be divided into two stages for processing: analysis and execution, we can also It’s called:

Enter the execution context
1. Code execution

3.2 Enter the execution context

When entering the execution context, this time No code is executed,

The variable object will include:

1. All formal parameters of the function (if it is a function context)
   • 由名称和对应值组成的一个变量对象的属性被创建
   • 没有实参，属性值设为 undefined

2. 函数声明

   • 由名称和对应值（函数对象(function-object)）组成一个变量对象的属性被创建
   • 如果变量对象已经存在相同名称的属性，则完全替换这个属性

3. 变量声明

   • 由名称和对应值（undefined）组成一个变量对象的属性被创建；
   • 如果变量名称跟已经声明的形式参数或函数相同，则变量声明不会干扰已经存在的这类属性

举个例子：

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

  b = 3;}foo(1);

在进入执行上下文后，这时候的 AO 是：

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

3.3 代码执行

在代码执行阶段，会顺序执行代码，根据代码，修改变量对象的值

还是上面的例子，当代码执行完后，这时候的 AO 是：

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

到这里变量对象的创建过程就介绍完了，让我们简洁的总结我们上述所说：

1. 全局上下文的变量对象初始化是全局对象;
2. 函数上下文的变量对象初始化只包括 Arguments 对象;
3. 在进入执行上下文时会给变量对象添加形参、函数声明、变量声明等初始的属性值;
4. 在代码执行阶段，会再次修改变量对象的属性值;

思考题

最后让我们看几个例子：

1.第一题

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

第一段会报错：Uncaught ReferenceError: a is not defined。

第二段会打印：1。

这是因为函数中的 “a” 并没有通过 var 关键字声明，所有不会被存放在 AO 中。

第一段执行 console 的时候， AO 的值是：

AO = {
    arguments: {
        length: 0
    }}

没有 a 的值，然后就会到全局去找，全局也没有，所以会报错。

当第二段执行 console 的时候，全局对象已经被赋予了 a 属性，这时候就可以从全局找到 a 的值，所以会打印 1。

2.第二题

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

会打印函数，而不是 undefined 。

这是因为在进入执行上下文时，首先会处理函数声明，其次会处理变量声明，如果如果变量名称跟已经声明的形式参数或函数相同，则变量声明不会干扰已经存在的这类属性。

相关免费学习推荐：javascript（视频）

The above is the detailed content of Variable objects in minimalist JavaScript. For more information, please follow other related articles on the PHP Chinese website!