深入理解作用域、作用域链和闭包

 ​

🎬 岸边的:个人主页

 🔥 个人专栏 :《 VUE 》 《 javaScript 》

⛺️ 生活的理想,就是为了理想的生活 !

在这里插入图片描述

目录

 📚 前言

 📘 1. 词法作用域

📖 1.2 示例

📖 1.3 词法作用域的应用场景

 📘 2. 作用域链

📖 2.1 概念

📖 2.2 示例

📖 2.3 作用域链的应用场景

 📘 3. 闭包

📖 3.1 概念

📖 3.2 示例

📖 3.3 闭包的应用场景

 📚 4. 总结


 📚 前言

JavaScript 中,作用域是指变量在代码中可访问的范围。理解 JavaScript 的作用域和作用域链对于编写高质量的代码至关重要。本文将详细介绍 JavaScript 中的词法作用域、作用域链和闭包的概念,并探讨它们在实际开发中的应用场景。

 📘 1. 词法作用域

词法作用域是 JavaScript 中最常见的作用域类型。它是在代码编写阶段确定的,而不是在代码执行阶段确定的。在词法作用域中,变量的访问权限是由它们在代码中的位置决定的。

📖 1.2 示例

function outer() {var outerVariable = "Hello";function inner() {var innerVariable = "World";console.log(outerVariable + " " + innerVariable);}inner();
}outer(); // 输出: Hello World

在上面的示例中,函数 inner 内部可以访问外部函数 outer 中定义的变量 outerVariable,这是因为它们处于词法作用域中。词法作用域确保了变量在代码编写阶段就能够正确地被访问。

📖 1.3 词法作用域的应用场景

词法作用域在 JavaScript 中有广泛的应用场景,包括:

  • 变量访问控制词法作用域使得我们可以控制变量的可见性和访问权限,避免命名冲突和变量污染。
  • 模块化开发通过使用函数和闭包,可以实现模块化的代码组织,将变量和函数封装在私有作用域中,提供了良好的封装性和代码组织性。
  • 函数嵌套函数嵌套是 JavaScript 中常见的编程模式,词法作用域确保了内部函数可以访问外部函数的变量,实现了信息的隐藏和封装。

 📘 2. 作用域链

📖 2.1 概念

作用域链是 JavaScript 中用于查找变量的一种机制。它由当前作用域和所有父级作用域的变量对象组成。当访问一个变量时,JavaScript 引擎会首先在当前作用域的变量对象中查找,如果找不到,则沿着作用域链向上查找,直到找到变量或者到达全局作用域。


Global Execution Context|+-- Function Execution Context 1|      ||      +-- Function Execution Context 2|             ||             +-- Function Execution Context 3|+-- Function Execution Context 4

📖 2.2 示例


var globalVariable = "Global";function outer() {var outerVariable = "Hello";function inner() {var innerVariable = "World";console.log(globalVariable + " " + outerVariable + " " + innerVariable);}inner();
}outer(); // 输出: Global Hello World

在上面的示例中,函数 inner 内部可以访问全局作用域中定义的变量 globalVariable,以及外部函数 outer 中定义的变量 outerVariable,这是因为 JavaScript 引擎按照作用域链的顺序查找变量。

📖 2.3 作用域链的应用场景

作用域链在 JavaScript 中有多种应用场景,包括:

  • 变量查找作用域链决定了变量的查找顺序,使得 JavaScript 可以正确地找到并访问变量。
  • 闭包通过创建闭包,内部函数可以访问外部函数的变量,实现了信息的保留和共享。
  • 模块化开发作用域链的特性使得我们可以实现模块化的代码组织,将变量和函数封装在私有作用域中,提供了良好的封装性和代码组织性。

 📘 3. 闭包

📖 3.1 概念

闭包是指函数和其词法环境的组合。它可以访问其词法作用域中定义的变量,即使在函数外部也可以访问这些变量。闭包在 JavaScript 中常用于创建私有变量和实现模块化开发。

📖 3.2 示例

function createCounter() {var count = 0;return function() {count++;console.log(count);};
}var counter = createCounter();
counter(); // 输出: 1
counter(); // 输出: 2

在上面的示例中,函数 createCounter 返回一个内部函数,该内部函数引用了外部函数 createCounter 的变量 count。即使在外部函数执行完毕后,内部函数依然可以访问并修改变量 count,这就是闭包的特性。

📖 3.3 闭包的应用场景

闭包在 JavaScript 中有多种应用场景,包括:

  • 私有变量闭包提供了一种实现私有变量的机制,可以隐藏变量并提供访问控制。
  • 模块化开发通过创建闭包,可以实现模块化的代码组织,将变量和函数封装在私有作用域中,提供了良好的封装性和代码组织性。
  • 延迟执行通过使用闭包,可以延迟执行函数,实现异步操作和事件处理。

 📚 4. 总结

作用域、作用域链和闭包是 JavaScript 中重要的概念,它们相互关联,共同构建了 JavaScript 的变量访问和代码组织机制。理解这些概念的原理和应用场景对于编写高质量的 JavaScript 代码至关重要。

通过词法作用域,我们可以控制变量的可见性和访问权限,实现模块化的代码组织,避免命名冲突和变量污染。

作用域链决定了变量的查找顺序,使得 JavaScript 可以正确地找到并访问变量。同时,作用域链的特性也为闭包的创建提供了基础,通过闭包,我们可以创建私有变量,实现模块化的代码组织以及延迟执行函数等。

深入理解作用域、作用域链和闭包,能够帮助我们更好地编写可维护、高效的 JavaScript 代码。

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

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

相关文章

数学建模--二次规划型的求解的Python实现

目录 1.算法流程简介 2.算法核心代码 3.算法效果展示 1.算法流程简介 #二次规划模型 #二次规划我们需要用到函数:Cvxopt.solvers.qp(P,q,G,h,A,b) #首先解决二次规划问题和解决线性规划问题的流程差不多 """ 求解思路如下: 1.针对给定的代求式,转化成标准式…

本地部署体验LISA模型(LISA≈图像分割基础模型SAM+多模态大语言模型LLaVA)

GitHub地址:https://github.com/dvlab-research/LISA 该项目论文paper reading:https://blog.csdn.net/Transfattyacids/article/details/132254770 在GitHub上下载源文件,进入下载的文件夹,打开该地址下的命令控制台,…

电动汽车电机驱动系统的组成和作用

1.电机驱动系统的作用与组成电动汽车电机驱动系统是新能源汽车的核心技术之一,它的主要任务是按驾驶员的驾驶意图,将动力电池的化学能高效地转化为机械能,经过变速器、驱动轴等机构驱动车轮。电动机驱动系统主要有电动机、功率器件和控制系统…

消灭怪物的最大数量【力扣1921】

一、题目分析 需要满足的条件: 只能在每分钟的开始使用武器武器能杀死距离城市最近的怪兽怪兽到达城市就会输掉游戏 游戏最优策略:我们可以在每分钟的开始都使用一次武器,用来杀死距离城市最近的怪兽。这样可以在力所能及的范围内&#xf…

mp代码生成插件

mp代码生成插件 1.下载下面的插件 2.连接测试 3.生成代码的配置 4.生成代码 红色的是刚刚生成的。 我觉得不如官方的那个好用,唯一的好处就是勾选的选项能够看的懂得。

COSCon'23 开源市集:共赴一场草坪上的开源派对

一年一度的开源盛会,第八届中国开源年会(COSCon23 ),将于10月28~29日,在四川成都市高新区菁蓉汇召开!本次大会的主题是:“开源:川流不息、山海相映”! 我们预期会有超过1…

哈希表与有序表

哈希表与有序表 Set结构 key Map结构 key-value 哈希表 哈希表的时间复杂度都是常数项级别的,但常数较大 增删改查的时间都是常数级别的,与数据量无关 当哈希表存储的值是基础数据类型(Integer - int),哈希表中内…

有趣,复试竟不算专业课!信号学的不好,就选它!

一、学校及专业介绍 广西民族大学(简称广西民大,GuangXi University for Nationalities),坐落于广西壮族自治区南宁市,是国家民族事务委员会和广西壮族自治区人民政府共建高校。 创建于1952年,原为中央民…

如何使用CSS实现一个带有动画效果的折叠面板(Accordion)?

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 带有动画效果的折叠面板(Accordion)⭐ 写在最后 ⭐ 专栏简介 前端入门之旅:探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅 欢迎来到前端入门之旅!这个…

C语言_初识C语言指针

文章目录 前言一、指针 ... 一个内存单元多大比较合适?二、地址或者编号如何产生?三、指针变量的大小 前言 内存是电脑上特别重要的存储器,计算机中程序的运行都是在内存中进行的。 所以为了有效的使用内存,就把内存划分成一个个…

计算机竞赛 基于深度学习的人脸专注度检测计算系统 - opencv python cnn

文章目录 1 前言2 相关技术2.1CNN简介2.2 人脸识别算法2.3专注检测原理2.4 OpenCV 3 功能介绍3.1人脸录入功能3.2 人脸识别3.3 人脸专注度检测3.4 识别记录 4 最后 1 前言 🔥 优质竞赛项目系列,今天要分享的是 🚩 基于深度学习的人脸专注度…

vue+element-ui el-table组件二次封装实现虚拟滚动,解决数据量大渲染DOM过多而卡顿问题

一、此功能已集成到TTable组件中 二、最终效果 三、需求 某些页面不做分页时,当数据过多,会导致页面卡顿,甚至卡死 四、虚拟滚动 一、固定一个可视区域的大小并且其大小是不变的,那么要做到性能最大化就需要尽量少地渲染 DOM 元素…

使用ppt和texlive生成eps图片(高清、可插入latex论文)

一、说明 写论文经常需要生成高清的图片插入到论文中,本文以ppt画图生成高质量的eps图片的实现来介绍具体操作方法。关于为什么要生成eps图片,一个是期刊要求(也有不要求的),另一个是显示图像的质量高。 转化获得eps…

Agile Management

Agile Management 敏捷管理

大数据学习06-Spark分布式集群部署

Spark完全分布式部署 前期准备,每台服务器都需要配置安装Scala下载Scala安装包配置环境变量 安装spark解压配置环境修改配置 前期准备,每台服务器都需要配置 配置好IP vim /etc/sysconfig/network-scripts/ifcfg-ens33 TYPE"Ethernet" PROX…

Facebook message tag 使用攻略

Messenger 讯息传不出去?无法发送FB 讯息给非好友? 2020年3月,Facebook 为了防止用户被过多的推广或垃圾讯息困扰而更新使用条款,现在商家要用FB传讯息给所有人(包括非好友),应该使用 Facebook …

如何将Word转成PDF?试一下这个转换方法

Word转成PDF是现代办公中常见的需求,它可以确保文件的格式和内容在不同平台上保持一致,并且更加方便共享和打印。在这个数字化时代,我们经常需要将Word文档转换为PDF格式,无论是个人用户还是商务用户都会遇到这样的需求。那么如何…

[ 云计算 | AWS ] Java 应用中使用 Amazon S3 进行存储桶和对象操作完全指南

文章目录 一、前言二、所需 Maven 依赖三、先决必要的几个条件信息四、创建客户端连接五、Amazon S3 存储桶操作5.1. 创建桶5.2. 列出桶 六、Amazon S3 对象操作6.1. 上传对象6.2. 列出对象6.3. 下载对象6.4. 复制、重命名和移动对象6.5. 删除对象6.6. 删除多个对象 七、文末总…

企业数字化转型的关键技术有哪些?_光点科技

随着科技的不断进步和信息技术的快速发展,企业数字化转型已经成为保持竞争力和适应市场变化的关键举措。在这个数字化时代,企业需要借助先进的技术来优化业务流程、提升效率,以及更好地满足客户需求。以下是企业数字化转型过程中的关键技术。…

【机器学习】人工智能概述(文末送书)

🤵‍♂️ 个人主页:艾派森的个人主页 ✍🏻作者简介:Python学习者 🐋 希望大家多多支持,我们一起进步!😄 如果文章对你有帮助的话, 欢迎评论 💬点赞&#x1f4…