文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2024-12-03 04:06

关注

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

全局上下文中变量对象

全局对象在进入全局执行上下文之前就已经完成创建,该对象只有一份,其属性可在程序任何位置访问,其生命周期将在程序退出时终止。例如定义在全局的变量、Math、Date等都属于全局上下文中的变量对象。

函数上下文中的变量对象

在函数执行上下文中的存在着与该执行上下文相关的内容:形参、函数声明、变量,这就是函数中的变量对象。(下文将重点介绍函数中的变量对象)

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

  1. function test(x, y, z) { 
  2.     console.log(arguments); 
  3.     console.log(childFun()); 
  4.     console.log(val1); 
  5.     var val1 = 10; 
  6.     console.log(val1); 
  7.     function childFun() { 
  8.         return 'childFun'
  9.     } 
  10.     console.log(childFun()); 

11.1 创建阶段

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

创建arguments对象

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

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

检查function函数声明创建属性

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

检查变量声明创建属性

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

11.2 执行阶段

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

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

  1. function test1(x, y, z) { 
  2.     console.log(arguments); // [Arguments] { '0': 1, '1': 2, '2': 3 } 
  3.     console.log(childFun()); // childFun 
  4.     console.log(val1); // undefined 
  5.     var val1 = 10; 
  6.     console.log(val1); // 10 
  7.     function childFun() { 
  8.         return 'childFun'
  9.     } 
  10.     console.log(childFun()); // childFun 
  11.  
  12. test1(1, 2, 3); 
  1. 上面中的arguments接收到了传入的参数,完成了对应属性值的赋值过程,并验证了arguments参数的结构;
  2. childFun函数在两个位置均可以调用输出正确的执行结果,证明在创建阶段函数得到了提升并完成了对应的赋值;
  3. val1变量在初始化之前可以进行调用,则证明在其创建阶段完成了变量提升,但是其值只被赋值为undefined,当执行到对应语句才正确赋值。

本文转载自微信公众号「执鸢者」,可以通过以下二维码关注。转载本文请联系执鸢者公众号。

 

来源:执鸢者内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯