【JavaScript修炼】变量对象与作用域链_js作用域链与变量对象-CSDN博客

本文链接：https://blog.csdn.net/laplacepoisson/article/details/124658971

【JavaScript修炼】变量对象与作用域链

前言
变量对象
- 全局对象
- 函数活动对象
作用域链
总结

前言

在上一篇【修炼JavaScript】javascript中的作用域和执行上下文中，我们讲到了JavaScript中的执行上下文的管理方式，即利用执行上下文栈进行管理。

JavaScript的执行上下文中包含3个重要的属性：

变量对象（Variable object , VO）
作用域链（Scope chain）
this

今天我们就来讲讲其中的变量对象和作用域链，读完本文你可以知道和理解如下知识点：

清除变量对象和活动对象是什么，理解它之间的区别。
知道函数的活动对象的创建时机以及它具体的创建过程。
知道[[Scopes]]属性的创建时机。
理解函数的[[Scopes]]属性与作用域链之间的关系。

变量对象

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

不同的执行上下文（全局，函数，eval）的变量对象有所不同，这里主要讲解：

全局变量对象（全局对象）
函数活动对象

全局对象

在W3School中有对全局对象的描述如下：

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

在顶层 JavaScript 代码中，可以用关键字 this 引用全局对象。所有非限定性的变量和函数名都会作为该对象的属性来查询。例如，当JavaScript 代码引用 parseInt() 函数时，它引用的是全局对象的 parseInt 属性。全局对象是作用域链的头，还意味着在顶层 JavaScript 代码中声明的所有变量都将成为全局对象的属性。

在 Web 浏览器中，全局对象是浏览器窗口。

看不太懂？我再来总结一下：

在顶层代码中，全局对象可以通过this应用。在客户端浏览器，全局对象就是window对象。

this === window // true

作为全局变量和全局函数的宿主

var a = 1
function fn(){
	console.log(a)
}

window.a // 1
this.a // 1
window.fn() // 1
this.fn()	// 1

预定义了一大堆属性和方法

window.Math.max(1,2)	// 2
this.Math.max(1,2)	// 2
Math.max(1,2)	// 2

在客户端中有window属性指向自身

this.window === window // true

函数活动对象

函数的变量对象用活动对象（activation object , AO）来表示，其实变量对象和活动对象是同一个东西，知识变量对象是规范上或者引擎实现上的，它其中的属性和方法外部无法访问，而只有当进入函数执行上下文将变量对象激活成活动对象时，它上面的方法和属性才可以访问。

之前在【修炼JavaScript】javascript中的作用域和执行上下文中讲到：在遇到函数调用时会进行两步：

创建执行上下文
代码执行

创建执行上下文时会将该函数上下文压入执行上下文栈中

contextStack.push(functionContext)

接下来进入代码执行阶段，该阶段具体来说又分为2步：
1️⃣进入执行上下文（准备阶段）
2️⃣执行代码

用一个图来表示代码执行时遇到函数调用的步骤：
在这里插入图片描述

函数活动对象在进入执行上下文时利用函数的arguments对象进行初始化，最终活动对象会包括：

arguments对象
函数的所有形参（没有实参时值为undefined）
函数的所有函数声明：活动对象已经有相同名称的属性时会覆盖该属性。
函数的所有变量声明（初始化为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
}

在代码执行阶段会根据代码给AO的属性赋值，代码执行之后长这样

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

作用域链

在之前在【修炼JavaScript】javascript中的作用域和执行上下文中我们讲过，函数的作用域是在定义函数时就确定的，具体来说其反映在函数的内部属性[[Scopes]]上。

在函数创建时，会将所有父变量对象添加到[[Scopes]]中，但是[[Scopes]]并不是完整的作用域链，此时作用域链还没有确定，它只是作用域链的一部分。

在函数调用时，进入执行上下文激活函数创建AO后，会复制[[Scopes]]创建作用域链，并把AO添加到其最前端，此时作用域链才真正创建完成。也就是说作用域链是在执行代码前的准备阶段确定的。

这么说可能还是不太清楚，看个例子：

var scope = "global scope";
function checkscope(){
    var scope2 = 'local scope';
    return scope2;
}
checkscope();

1️⃣在checkscope定义时，将所有父变量对象添加到checkscope的[[Scopes]]里

checkscope.[[Scopes]] = [
	globalContext.VO
]

2️⃣代码执行，遇到函数调用checkscope()，创建执行上下文并压入栈中。

contextStack = [
	checkscopeContext,
	globalContext
]

3️⃣进入执行上下文，开始准备阶段第一步：复制[[Scopes]]创建作用域链

checkscopeContext = {
	ScopeChain: checkscope.[[Scopes]]
}

4️⃣准备阶段第二步：用arguments创建活动对象，初始化活动对象，加入形参，变量声明和函数声明。

checkscopeContext = {
    AO: {
        arguments: {
            length: 0
        },
        scope2: undefined
    },
    ScopeChain: checkscope.[[Scopes]]
}

5️⃣准备阶段第三步：将AO添加到作用域链顶端

checkscopeContext = {
    AO: {
        arguments: {
            length: 0
        },
        scope2: undefined
    },
    ScopeChain: [ AO , checkscope.[[Scopes]] ]
}

6️⃣准备工作完成，开始执行代码，修改AO的属性

checkscopeContext = {
    AO: {
        arguments: {
            length: 0
        },
        scope2: 'local scope'
    },
    ScopeChain: [ AO , checkscope.[[Scopes]] ]
}