JavaScript变量对象详解

news2024/12/23 8:15:37

正文

在JavaScript中,变量对象是执行上下文中的一个重要概念,它负责存储函数中的变量、函数声明和形参。了解变量对象对于理解JavaScript的作用域、作用域链以及变量的声明和提升至关重要。

1. 变量对象的定义

变量对象是在执行上下文创建阶段被创建的,用于存储该上下文中的变量、函数声明和形参。不同类型的上下文(全局上下文、函数上下文)有不同的变量对象。

2. 变量对象的结构

变量对象由三部分组成:变量(Variable)、函数声明(Function Declaration)和形参(Function Arguments)。

2.1 变量(Variable)

变量对象中存储了通过var关键字声明的变量,但未赋值的变量会被初始化为undefined

console.log(a); // undefined
var a = 10;
console.log(a); // 10

2.2 函数声明(Function Declaration)

变量对象中还存储了通过function关键字声明的函数。

sayHello(); // Hello, World!
function sayHello({
  console.log("Hello, World!");
}

2.3 形参(Function Arguments)

函数的参数也存储在变量对象中。

function add(x, y{
  console.log(x + y);
}
add(510); // 15

3. 变量对象的创建过程

在进入执行上下文时,会经历变量对象的创建阶段。以下是变量对象创建的步骤:

  1. 创建变量对象(VO):根据上下文的类型创建一个空的变量对象。

  2. 建立作用域链:作用域链是一个指向父级作用域的链表,用于查找变量的值。

  3. 初始化变量对象:将函数的参数、函数声明和变量添加到变量对象中。

function example(a, b{
  var c = 30;
  function inner({
    var d = 40;
    console.log(a + b + c + d);
  }
  inner();
}

example(1020); // 输出:100

在上面的例子中,执行example函数时,会按照上述步骤创建变量对象,并输出正确的结果。

4. 变量对象与作用域链

变量对象与作用域链密切相关。作用域链是由当前执行上下文的变量对象和其父级执行上下文的变量对象组成的。当查找变量时,会按照作用域链顺序查找。

var globalVar = "I am global";

function outer({
  var outerVar = "I am outer";

  function inner({
    var innerVar = "I am inner";
    console.log(globalVar, outerVar, innerVar);
  }

  inner();
}

outer();

在上面的例子中,inner函数可以访问全局变量、外部函数变量和内部函数变量,这是因为作用域链的存在。

结论

JavaScript中的变量对象是理解作用域、作用域链和变量声明提升的关键概念之一。通过了解变量对象的结构、创建过程和与作用域链的关系,我们能更好地理解JavaScript代码的执行过程。这有助于写出更可维护、可预测的代码。

结束语

今天分享一份全栈资源,有需要的自行获取(回复 7)。

alt

本文由 mdnice 多平台发布

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1565028.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【前端面试3+1】04浏览器存储、flex布局属性和常用指令、 promise和async await区别、【验证回文串】

一、浏览器存储 1.1类型: 浏览器数据存储的方式有以下几种: Cookie:小型文本文件,存储在用户计算机上,可以通过浏览器传输到服务器。Web Storage:包括LocalStorage和SessionStorage,可以在浏览器…

【JavaEE初阶系列】——一万字带你了解 JUC常见类 以及 线程安全集合类(哈希表)

目录 🚩JUC(java.util.concurrent) 的常见类 🎈Callable 接口 🌈理解 Callable(相关面试题) 🌈理解 FutureTask 📝线程创建方式 🎈 ReentrantLock可重入锁 🌈ReentrantLock 优势&#x…

【Python BUG】ModuleNotFoundError: No module named ‘streamlit.cli‘

问题 streamlit做大模型前端demo,安装后不好使。 解决方案 参考: https://zhuanlan.zhihu.com/p/656164361 找到下面文件: 替换、修改内容: # from streamlit.cli import main from streamlit.web.cli import main原来是上边…

JavaScript_与html结合方式

JavaScript_语法 ECMAScript&#xff1a;客户端脚本语言的标准 1.基本语法 1.1 与html结合方式&#xff08;2种&#xff09; 1. 内部JS 定义<script>,标签体内容就是js代码 2. 外部JS 定义<script>,通过src属性引入外部的 js文件 注意&#xff1a; 1.<script>…

【DPU微知识】NVIDIA-BlueFiled DPU概念之:BFB是什么?

BFB是BlueField Boot Stream的缩写&#xff0c;由Bootloader、Linux OS、Romfs组成。本质&#xff1a;bootload、系统、文件系统。&#xff08;其实就是DPU的上装类比标准host的grub、linux、文件系统&#xff0c;类似做Linux移植时候构建的最小文件系统的三件套差不多&#xf…

3D模型格式转换工具HOOPS Exchange如何将3D文件加载到PRC数据结构中?

HOOPS Exchange是一款高效的数据访问工具&#xff0c;专为开发人员设计&#xff0c;用于在不同的CAD&#xff08;计算机辅助设计&#xff09;系统之间进行高保真的数据转换和交换。由Tech Soft 3D公司开发&#xff0c;它支持广泛的CAD文件格式&#xff0c;包括但不限于AutoCAD的…

uniapp项目-懂你找图

文章目录 项目介绍项目搭建1.项目创建 2.新增tabbar3引入字体图标 uni-ui介绍使用 uni-api介绍 首页模块功能分析搭建子页面分段器介绍 封装自己的异步请求为什么要封装封装的思路 编写首页-推荐页面分页功能 专辑列表获取专辑详情数据 项目介绍 微信小程序&#xff0c;提供图…

苹果开发者账号注册后生成开发证书和发布证书的流程解析

转载&#xff1a;注册苹果开发者账号的方法 在2020年以前&#xff0c;注册苹果开发者账号后&#xff0c;就可以生成证书。 但2020年后&#xff0c;因为注册苹果开发者账号需要使用Apple Developer app注册开发者账号&#xff0c;所以需要缴费才能创建ios证书了。 所以新政策出…

【机器学习】机器学习创建算法第3篇:K-近邻算法,学习目标【附代码文档】

机器学习&#xff08;算法篇&#xff09;完整教程&#xff08;附代码资料&#xff09;主要内容讲述&#xff1a;机器学习算法课程定位、目标&#xff0c;K-近邻算法定位,目标,学习目标,1 什么是K-近邻算法,1 Scikit-learn工具介绍,2 K-近邻算法API。K-近邻算法&#xff0c;1.4 …

EfficientVMamba实战:使用 EfficientVMamba实现图像分类任务(二)

文章目录 训练部分导入项目使用的库设置随机因子设置全局参数图像预处理与增强读取数据设置Loss设置模型设置优化器和学习率调整策略设置混合精度&#xff0c;DP多卡&#xff0c;EMA定义训练和验证函数训练函数验证函数调用训练和验证方法 运行以及结果查看测试完整的代码 在上…

搜索二维矩阵 II - LeetCode 热题 21

大家好&#xff01;我是曾续缘&#x1f497; 今天是《LeetCode 热题 100》系列 发车第 21 天 矩阵第 4 题 ❤️点赞 &#x1f44d; 收藏 ⭐再看&#xff0c;养成习惯 搜索二维矩阵 II 编写一个高效的算法来搜索 m x n 矩阵 matrix 中的一个目标值 target 。该矩阵具有以下特性&…

PHP在线加密系统网站源码

源码介绍 PHP在线加密系统网站源码&#xff0c;这个是sg的加密,免费可用(目前)并不会收费 源码说明&#xff1a;下载直接上传即可 下载地址 蓝奏云下载&#xff1a;https://wfr.lanzout.com/i6c331togiji

关于磁盘算法

性能瓶颈&#xff1a;IO–>IO调度–>IO调度算法–>1楼到顶楼&#xff0c;再从零楼下来&#xff0c;效率高–>IO调度目标–>IO算法–>电梯算法–linux6和Linux7算法不一样–>linux6 单队列 Linux7 多队列 inux6: 试用于不同的环境和介质。 noop 适合闪存&…

jmeter性能压测

jvm指令 jstat -gcutil -h5 -t 1 3s 发压端的tcp这么达到1000TPS jmeter的jvm的设置

PW1503限流芯片:可达3A限流,保障USB电源管理安全高效

在电源管理领域&#xff0c;开关的性能直接关系到设备的稳定性和安全性。今天&#xff0c;我们将详细解析一款备受关注的超低RDS&#xff08;ON&#xff09;开关——PW1503。它不仅具有可编程的电流限制功能&#xff0c;还集成了多项保护机制&#xff0c;为各类电子设备提供了高…

springboot之MybatisPlus

文章目录 一、ORM二、mybatis实际操作三、mybatis-plus 一、ORM 简单来说ORM就是一个能够帮我们把java中Bean类映射到数据库中。 使用mybatis-plus。 配置架包 <!-- MyBatisPlus依赖 --><dependency><groupId>com.baomidou</groupId><art…

谷粒商城实战(008 缓存)

Java项目《谷粒商城》架构师级Java项目实战&#xff0c;对标阿里P6-P7&#xff0c;全网最强 总时长 104:45:00 共408P 此文章包含第151p-第p157的内容 简介 数据库承担落盘&#xff08;持久化&#xff09;工作 拿map做缓存 这种是本地缓存&#xff0c;会有一些问题 分布…

注解——自定义注解、元注解、开发Junite框架

官方注解 自定义的注解 元注解 指的是&#xff1a;修饰注解的注解 常用的两个元注解——Target\ Retention 注解的解析 应用场景&#xff1a;开发Junit框架

KH-IPEX-K501-29

KH-IPEX-K501-29品牌: kinghelm(金航标)封装: SMD 描述: 1代

Linux安装Weblogic保姆级教程

文章目录 前言一、Weblogic安装包下载二、安装JDK三、Weblogic安装1.创建Linux用户2.创建weblogic的安装目录3.上传weblogic的安装包4.解压缩5.修改 /opt/weblogic 目录的所有权6.创建 oraInst.loc 文件7.创建 wls.rsp 响应文件8.切换用户9.静默安装weblogic10.切换到root用户1…