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

 ​

🎬 岸边的:个人主页

 🔥 个人专栏 :《 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上下载源文件,进入下载的文件夹,打开该地址下的命令控制台,…

spring boot 项目中搭建 ElasticSearch 中间件 一 postman 操作 es

postman 操作 es 1. 简介2. 环境3. postman操作索引3.1 创建索引3.2 查看索引3.3 查看所有索引3.4 删除索引 4. postman操作文档4.1 添加文档4.2 查询文档4.3 查询全部文档4.4 更新文档4.5 局部更新文档4.6 删除文档4.7 条件查询文档14.8 条件查询文档24.9 条件查询文档 limit4…

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

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

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

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

Android BottomNavigationView 禁用Toast提示的方法

废话不多说直接上代码&#xff1a; private void disableNavViewLongClick(BottomNavigationView bottomNavigationView){assert bottomNavigationView ! null;final int childCount bottomNavigationView.getChildCount();if(childCount<0){return;}final View childAtVie…

mp代码生成插件

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

关于uniapp报警告Extraneous non-props attributes (info) were passed to component

Extraneous non-props attributes (info) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. 在开发uniapp的过程中&#xff0c;遇到了这咩一个问题&#xff0c;如上面所述&#xff0c;也是感觉哪哪…

记录深度学习常用指令(一)

一、创建Conda虚拟Python环境 conda create -n [仓库名字] python[版本]二、激活环境 conda activate [仓库名字]三、安装PyTorch PyTorch官方 GPU&#xff1a; conda install pytorch1.11.0 torchvision0.12.0 torchaudio0.11.0 cudatoolkit11.3 -c pytorchCPU&#xff1…

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

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

哈希表与有序表

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

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

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

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

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

C语言_初识C语言指针

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

计算机竞赛 基于深度学习的人脸专注度检测计算系统 - 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 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 基于深度学习的人脸专注度…

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

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

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

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

Agile Management

Agile Management 敏捷管理

定制化SQL代码解释器

定制化SQL代码解释器 MySQL下载和安装很多年前,MySQL的安装过程一度是很多数据科学初学者的噩梦,不仅因为安装过程需要涉及配置服务账户、设置环境变量等复杂环节,更是因为MySQL并不仅仅是一个独立的软件,而是一整套关系型数据库服务,其初始软件架构是为了满足企业级服务器…

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

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