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

 ​

🎬 岸边的:个人主页

 🔥 个人专栏 :《 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.hqwc.cn/news/97133.html

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

相关文章

iOS练手项目知识点汇总

基础理解篇 Objective-C是一种面向对象的编程语言,它支持元编程。元编程是指编写程序来生成或操纵其他程序的技术。 Objective-C中,元编程可以使用Objective-C的动态特性来实现。例如可以使用Objective-C的运行时函数来动态地创建类、添加属性和方法等等…

百度等8家企业首批上线大模型服务;大语言模型微调之道

🦉 AI新闻 🚀 百度等8家企业首批上线大模型服务 摘要:百度、字节、中科院旗下8家企业/机构的大模型通过备案,正式面向公众提供服务。百度旗下AI大模型产品文心一言率先开放,用户可下载App或登录官网体验。百川智能也…

Jmete+Grafana+Prometheus+Influxdb+Nginx+Docker架构搭建压测体系/监控体系/实时压测数据展示平台+遇到问题总结

背景 需要大批量压测时,单机发出的压力能力有限,需要多台jmeter来同时进行压测;发压机资源不够,被压测系统没到瓶颈之前,发压机难免先发生资源不足的情形;反复压测时候也需要在不同机器中启动压测脚本&…

安全基础 --- https详解(02)、cookie和session、同源和跨域

https详解(02)--- 数据包扩展 Request --- 请求数据包Response --- 返回数据包 若出现代理则如下图: Proxy --- 代理服务器 (1)http和https的区别 http明文传输,数据未加密;http页面响应速度…

计算机视觉-YOYO-

目录 计算机视觉-YOYO 目标检测发展历程 区域卷积神经网络(R-CNN) Fast R-CNN Mask R-CNN模型 比如SSD、YOLO(1, 2, 3)、R-FCN 目标检测基础概念 边界框、锚框和交并比 边界框(bounding box) 锚框(Anchor box) 交并比 …

Vulnhub内网渗透DC-7靶场通关

个人博客: xzajyjs.cn DC系列共9个靶场,本次来试玩一下一个 DC-7,下载地址。 下载下来后是 .ova 格式,建议使用vitualbox进行搭建,vmware可能存在兼容性问题。靶场推荐使用NAT(共享)模式,桥接模式可能会造成目标过多不…

设计模式系列-创建者模式

一、上篇回顾 上篇我们主要讲述了抽象工厂模式和工厂模式。并且分析了该模式的应用场景和一些优缺点,并且给出了一些实现的思路和方案,我们现在来回顾一下: 抽象工厂模式:一个工厂负责所有类型对象的创建,支持无缝的新增新的类型对…

Yjs + Quill 实现文档多人协同编辑器开发(基础+实战)

前言 多人协同开发确实是比较难的知识点,在技术实现上有一定挑战,但随着各种技术库的发展,目前已经有了比较成熟的解决方案。今介绍 Yjs 基于CRDT算法,用于构建自动同步的协作应用程序,与Quill富文本编辑器&#xff0c…

小程序数据导出文件

小程序josn数据生成excel文件 先从下载传送门将xlsx.mini.min.js拷贝下来,新建xlsx.js文件放入小程序项目文件夹下。 const XLSX require(./xlsx)//在需要用的页面中引入// 定义导出 Excel 报表的方法exportData() {const that thislet newData [{time:2021,val…

NoSQL MongoDB Redis E-R图 UML类图概述

NoSQL NoSQL(Not only SQL)是对不同于传统的关系数据库的数据库管理系统的统称,即广义地来说可以把所有不是关系型数据库的数据库统称为NoSQL。 NoSQL 数据库专门构建用于特定的数据模型,并且具有灵活的架构来构建现代应用程序。NoSQL 数据库使用各种数…

uni-app之android离线打包

一 AndroidStudio创建项目 1.1,上一节演示了uni-app云打包,下面演示怎样androidStudio离线打包。在AndroidStudio里面新建空项目 1.2,下载uni-app离线SDK,离线SDK主要用于App本地离线打包及扩展原生能力,SDK下载链接h…

C#里Bitmap转Halocn的HObject

一般情况下,图像的width是4的倍数的话,用以下代码便可将彩色bitmap转出halcon里的HObject public void Bitmap2HObject(Bitmap bmp, out HObject image){try{Rectangle rect new Rectangle(0, 0, bmp.Width, bmp.Height);BitmapData srcBmpData bmp.L…