前端百题斩【011】——通俗易懂的变量对象

最新推荐文章于 2024-09-20 11:38:47 发布

前端点线面

最新推荐文章于 2024-09-20 11:38:47 发布

阅读量158

点赞数

文章标签： js javascript css 多态编程语言

本文链接：https://blog.csdn.net/wang_yu_shun/article/details/117408664

版权

本文详细探讨了前端开发中的变量对象如何与执行上下文关联，讲解了全局和函数上下文中的变量对象创建与执行过程，以及arguments对象和函数提升的概念。通过实例演示，助你理解变量对象在函数作用域中的关键细节。

摘要由CSDN通过智能技术生成

写该系列文章的初衷是“让每位前端工程师掌握高频知识点，为工作助力”。这是前端百题斩的第11斩，希望朋友们关注公众号“执鸢者”，用知识武装自己的头脑。

变量对象是一个与执行上下文相关的特殊对象，存储着上下文中声明的内容。按照执行上下文可划分为全局上下文中的变量对象和函数上下文中的对象。

img

全局上下文中变量对象
全局对象在进入全局执行上下文之前就已经完成创建，该对象只有一份，其属性可在程序任何位置访问，其生命周期将在程序退出时终止。例如定义在全局的变量、Math、Date等都属于全局上下文中的变量对象。
函数上下文中的变量对象
在函数执行上下文中的存在着与该执行上下文相关的内容：形参、函数声明、变量，这就是函数中的变量对象。（下文将重点介绍函数中的变量对象）

在“百题斩【10】——执行上下文”中讲述了执行上下文分为创建阶段和代码执行阶段，其中创建阶段中会完成变量创建；在代码执行阶段会完成变量赋值。下面从这两个阶段介绍该过程。

function test(x, y, z) {
    console.log(arguments);
    console.log(childFun());
    console.log(val1);
    var val1 = 10;
    console.log(val1);
    function childFun() {
        return 'childFun';
    }
    console.log(childFun());
}

11.1 创建阶段

在变量对象的创建过程中，分别完成以下几个步骤：

创建arguments对象

arguments 是一个对应于传递给函数的参数的类数组对象。在变量对象创建阶段，首先检查当前上下文中的参数，建立该对象下的属性与属性值。arguments的创建后的结果如下所示：

[Arguments] { '0': x, '1': y, '2': z }

检查function函数声明创建属性

在变量对象中以函数名建立一个属性，属性值为指向该函数所在内存地址的引用。如果函数名的属性已经存在，那么该属性将会被新的引用所覆盖。

image-20210521233622132.png

检查变量声明创建属性

对于var声明的变量，每找到一个就在变量对象中以变量名建立一个属性，属性值为undefined。如果该变量名的属性已经存在，为了防止同名的函数被修改为undefined，则会直接跳过，原属性值不会被修改。对于let和const声明的变量只会建立一个属性但并没有对齐进行赋值，所以不能进行使用。

image-20210521233835341.png

11.2 执行阶段

未进入执行阶段之前，变量对象中的属性都不能访问,但是进入执行阶段之后，变量对象(VO)转变为了活动对象(AO)，里面的属性都能被访问了，然后开始进行执行阶段的操作。（变量对象和活动对象其实都是同一个对象，只是处于执行上下文的不同生命周期）

首先看一下整个代码的执行结果

function test1(x, y, z) {
    console.log(arguments); // [Arguments] { '0': 1, '1': 2, '2': 3 }
    console.log(childFun()); // childFun
    console.log(val1); // undefined
    var val1 = 10;
    console.log(val1); // 10
    function childFun() {
        return 'childFun';
    }
    console.log(childFun()); // childFun
}

test1(1, 2, 3);