深入理解JavaScript系列（3）：变量对象

发表于 分类于 阅读次数： 2.3k 6 分钟
深入理解JavaScript系列之变量对象，来看看什么是变量对象吧！

在《深入理解 JavaScript 系列（2）：执行上下文栈》中提到，当 JavaScript 代码执行代码时，就会创建一个执行上下文。

对于执行上下文，都有三个重要属性：

  • 变量对象 (Variable Object - VO)
  • 作用域链
  • this

我们先来介绍一下变量对象。

变量对象

变量对象是与执行上下文相关的数据作用域，存储了在上下文中定义的变量和函数声明。

然而，由于不同执行上下文的变量对象都存在不同，所以今天我们分不同模块来聊一下不同的变量对象。

  • 全局上下文的变量对象

  • 函数上下文的变量对象

全局对象

全局上下文中的变量对象就是全局对象。全局变量是在所有作用域都可访问的变量，与之对应的是局部变量

全局对象预定义的对象，作为 JavaScript 的全局函数和全局属性的占位符。通过使用全局对象，可以访问所有其他。

  • 可以通过 this 引用，在客户端中，全局对象就是 Window 对象，可以通过浏览器查看。
1
console.log(this); // window 对象
  • 全局对象是由 Object 构造函数实例化的一个对象。
1
console.log(this instanceof Obejct); // true
  • 全局对象中预定义了一堆函数和属性，比如 Math 的一些方法。
1
console.log(Math.pow(2, 2)); // 4
  • 作为全局变量的存储对象。
1
2
var a = 1;
console.log(this.a); // 1
  • 客户端中，全局对象有 window 属性指向自身
1
2
3
4
5
var a = 1;
console.log(window.a); // 1

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

函数上下文

函数上下文中，VO 时不能直接访问的，所以用活动对象(Activation Object，OA)来表示变量对象。
但是其实是一个东西，只不过在变量对象的规范上来说，是有区别的。
AO 是在进入函数上下文时才被创建的，它通过 arguments 属性来初始化。arguments 属性就是 Argumens 对象。

Arguments 对象是 AO 对象的一个属性，它包括如下属性：

  • callee - 指向参数所属的当前执行的函数，指向调用当前函数的函数
  • length - 传递给函数的参数数量
  • arguments[@@iterator] - 返回一个新的 Array 迭代器对象，该对象包含参数中每个索引的值

执行过程

执行上下文，会分为两个阶段，分析阶段和执行阶段。

  • 进入执行上下文
  • 执行代码

分析阶段

当进入分析阶段时，这时候还没有执行代码。

变量对象包括：

  • 函数的所有形参 (如果是函数上下文)
    由名称和对应值组成的一个变量对象的属性被创建，属性值为 undefined

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

  • 变量声明

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

我们来举个例子

1
2
3
4
5
6
7
8
9
function fn(age) {
  var name = 'hzzzzzzzq';
  function fn2() {}
  var fn3 = function () {}; // 其实也算是一个变量

  name = 'hzq';
}

fn(18);

我们来看看进入执行上下文的分析阶段的 AO 是

1
2
3
4
5
6
7
8
9
10
11
AO = {
  // 函数的形参
  arguments: {
    0: 1,
    length: 1,
  },
  age: 18,
  name: undefined, // 变量声明
  fn2: reference to function fn2() {}, // 函数声明
  fn3: undefined // 变量声明
};

执行阶段

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

我们将上面的代码执行完毕后，来看看 AO ：

1
2
3
4
5
6
7
8
9
10
AO = {
  arguments: {
    0: 1,
    length: 1,
  },
  age: 18,
  name: 'hzq',
  fn2: reference to function fun2() {},
  fn3: reference to FunctionExpression "fn3"
};

其实到目前为止，我们的介绍已经结束了。但是肯定不过瘾，或许还不太懂，所以我们…

再来个例子

再来看个例子吧。

1
2
3
4
5
6
7
8
9
10
11
function fn1() {
  console.log(x);
  x = 1;
}
fn1();

function fn2() {
  x = 1;
  console.log(x);
}
fn1();

可以来看看上面的代码，打印的是什么呢？
第一个打印 Uncaught ReferenceError: x is not defined
第二个打印 1

这又是为什么呢？

第一个例子中，我们来看看执行上下文时的 AO，因为我们在创建时 AO 对象中没有找到 x 变量，并且往全局变量中找也没有找到，所以报错。

1
2
3
4
5
AO = {
  arguments: {
    length: 0,
  },
};

第二个例子中，我们来看看执行上下文时的 AO，我们在创建时找到了 x，所以会打印结果。

1
2
3
4
5
6
AO = {
  arguments: {
    length: 0,
  },
  x: 1,
};
相关文章推荐
-------------------- 本文结束 感谢阅读 --------------------