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

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

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

640.jpg

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

在“百题斩【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 创建阶段


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


  1. 创建arguments对象


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


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


  1. 检查function函数声明创建属性


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


640.png


  1. 检查变量声明创建属性


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

640.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);
  1. 上面中的arguments接收到了传入的参数,完成了对应属性值的赋值过程,并验证了arguments参数的结构;


  1. childFun函数在两个位置均可以调用输出正确的执行结果,证明在创建阶段函数得到了提升并完成了对应的赋值;


  1. val1变量在初始化之前可以进行调用,则证明在其创建阶段完成了变量提升,但是其值只被赋值为undefined,当执行到对应语句才正确赋值。
相关文章
|
4月前
|
前端开发 开发者
new操作符背后的秘密:揭开Web前端对象创建的神秘面纱!
【8月更文挑战第23天】在Web前端开发中,`new`操作符是创建对象实例的核心。本文以`Person`构造函数为例,通过四个步骤解析`new`操作符的工作原理:创建空对象、设置新对象原型、执行构造函数并调整`this`指向、判断并返回最终对象。了解这些有助于开发者更好地理解对象实例化过程,从而编写出更规范、易维护的代码。
46 0
|
28天前
|
存储 前端开发 JavaScript
前端中对象的深度应用与最佳实践
前端对象应用涉及在网页开发中使用JavaScript等技术创建和操作对象,以实现动态交互效果。通过定义属性和方法,对象可以封装数据和功能,提升代码的组织性和复用性,是现代Web开发的核心技术之一。
|
2月前
|
JSON 前端开发 数据格式
前端的全栈之路Meteor篇(五):自定义对象序列化的EJSON介绍 - 跨设备的对象传输
EJSON是Meteor框架中扩展了标准JSON的库,支持更多数据类型如`Date`、`Binary`等。它提供了序列化和反序列化功能,使客户端和服务器之间的复杂数据传输更加便捷高效。EJSON还支持自定义对象的定义和传输,通过`EJSON.addType`注册自定义类型,确保数据在两端无缝传递。
|
3月前
|
存储 前端开发 JavaScript
前端基础(二)_JavaScript变量、JavaScript标识符、JavaScript获取元素、JavaScript的鼠标事件
本文介绍了JavaScript变量的声明和使用、标识符的命名规则、如何获取和操作HTML元素,以及JavaScript的鼠标事件处理,通过示例代码展示了这些基础知识点在实际开发中的应用。
49 2
前端基础(二)_JavaScript变量、JavaScript标识符、JavaScript获取元素、JavaScript的鼠标事件
|
3月前
|
前端开发 JavaScript
前端基础(十四)_Math对象
本文介绍了JavaScript中`Math`对象的常用方法,包括: 1. `Math.floor()`:向下取整,去掉小数部分。 2. `Math.ceil()`:向上取整,向上进一。 3. `Math.round()`:四舍五入,针对小数点后面第一位数字。 4. `Math.max()`:获取数字序列中的最大值。 5. `Math.min()`:获取数字序列中的最小值。 6. `Math.pow()`:计算某个数字的次方数。 7. `Math.sqrt()`:开根号。 8. `Math.random()`:生成一个0到1之间的随机数。
27 1
前端基础(十四)_Math对象
|
2月前
|
JSON 前端开发 数据格式
@RequestMapping运用举例(有源码) 前后端如何传递参数?后端如何接收前端传过来的参数,传递单个参数,多个参数,对象,数组/集合(有源码)
文章详细讲解了在SpringMVC中如何使用`@RequestMapping`进行路由映射,并介绍了前后端参数传递的多种方式,包括传递单个参数、多个参数、对象、数组、集合以及JSON数据,并且涵盖了参数重命名和从URL中获取参数的方法。
222 0
@RequestMapping运用举例(有源码) 前后端如何传递参数?后端如何接收前端传过来的参数,传递单个参数,多个参数,对象,数组/集合(有源码)
|
3月前
|
前端开发 JavaScript
前端基础(十五)_时间对象、字符串对象
本文介绍了JavaScript中时间对象的操作方法,包括获取和设置年、月、日、小时、分钟、秒等,以及如何格式化时间显示,同时提及了字符串对象的常用方法。
34 0
前端基础(十五)_时间对象、字符串对象
|
4月前
|
缓存 前端开发 Java
【前端学java】复习巩固-Java中的对象比较(15)
【8月更文挑战第11天】Java中的对象比较
36 1
|
3月前
|
前端开发 JavaScript
前端基础(十六)_数组对象
本文详细介绍了JavaScript中数组对象的创建和操作方法,包括数组的增删改查、排序、去重、迭代等常用操作。
21 0
|
4月前
|
JavaScript 前端开发 API
前端开发者的救赎:揭秘JQ对象与DOM元素的神秘转换术
【8月更文挑战第23天】在Web前端开发领域,jQuery(简称JQ)作为一款流行的JavaScript库,极大简化了HTML文档遍历、事件处理、动画及Ajax交互等操作。理解和掌握jQuery对象与DOM元素间的转换至关重要。
49 0