[电子榨菜] js中的闭包closure

0.写在前面:

下学期就打算去实习了,这段时间要密集接收考试和面试的捶打,计网和软工就没有办法为大家继续贡献开源内容了,明年九月份之前的更新内容将会以前端,人工智能,和工程设计为基础, 很抱歉啦,不过我还是希望我这一年来的努力可以帮到一些人.虽然自己这一年过的浑浑噩噩的, 也失去了很多东西.................

嘛, 对了, 联系我的话可以csdn私信,也可以加我的各种联系方式,尤其是需要资源的朋友们.....

后面会根据一些面试题目以及一些东西构建这样一个专栏,记录一些琐碎的知识点.

今天在做题的时候,偶然遇到了一个问题,这个正好是之前没有了解的太好

其实这个题很简单,没有什么算法上的难度,但是需要理解一点,也就是closure,这个题目已经写好了,但是还需要点别的理解才对.

1.什么是闭包:

先说说闭包的官方定义,根据MDN所说:‘闭包(closure)是一个函数以及其捆绑的周边环境状态(lexical environment,词法环境)的引用的组合。换而言之,闭包让开发者可以从内部函数访问外部函数的作用域。
闭包(closure)是一个函数以及其捆绑的周边环境状态(lexical environment,词法环境)的引用的组合。换而言之,闭包让开发者可以从内部函数访问外部函数的作用域。说人话就是,在函数生成的时候,将函数以及周边的变量打包成一个独立的"包", 这样函数在调用包内的属性的时候,得到的是一个相对比较独立的属性.

我承认这个样确实抽象,别急,慢慢解释

2.词法作用域:

在阐述闭包之前,先解释一下js中的一个重要概念,词法作用域:

词法作用域是指在代码编译阶段确定的作用域规则,它确实是整个 JavaScript 中的一种具体的作用域规则。词法作用域决定了变量在哪个作用域中可见,它的范围在代码编译时就确定,并且在代码执行期间保持不变。又被叫做静态作用域,例如作用域链, var的变量提升,都和词法作用域规定的内容有关.

词法作用域指的并不是具体的某个作用域,而是js中关于作用域规则的统称, 也可以指代某个作用域. 例如我可以在不同情况下,称呼"全局""函数""块"都是一个"词法作用域"

3.闭包的效果展示

其实题目中已经能展示的差不多了,这里重新构建一个代码进行效果展示:

function test(){
    let funct=0;
    const test1=()=>{
        console.log(funct,"-->",++funct);
    }
    return test1;
}

我们创建了一个test函数,换句话说,我们构建了一个函数作用域

funct变量,是在这个作用域中的

test1函数,展示funct的变化

最后返回test1这个函数,也就是生成这样一个函数

这算是最经典的闭包案例了

接下来我们要做的东西就是,根据这个函数创建两个新的函数

const a=test();
const b=test();

a和b各自都是生成的一个test1函数

接下来我们展示这个情况

console.log('a的变化')
a();
a();

console.log('b的变化')
b();

如图所示

这样的效果其实可以这样子理解:

在生成一个函数的时候,函数和同一个词法作用域内的属性,可以"打包"在同一个闭包内部

换句话说,我们调用的不是函数,而是这个闭包.

我知道不好理解,所以画图

其实闭包就是这么简单的东西,但是肥肠可贵的一点是, 闭包的存在允许一些函数持有自己的独立属性! 这一点在java等中是通过private实现的,在js中则需要我们结合对应的语法,使用设计模式实现,有一个很经典的设计模式我们需要讨论,不过在这之前,我想很多人应该会有一个问题

闭包这个打包的范围究竟是哪里?

4.闭包的打包范围究竟是多少

在这里我们就不做实验了,直接说结论:

闭包的打包范围,就是函数生成位置的词法作用域!

在3的案例中,我们的函数test1是在test函数内部生成的,所以生成的函数打包的结果就是一整个test函数的作用域,每次生成一个新的函数,就创建这样一个闭包.可以理解为,闭包内部就是这些东西

为什么要提及这个?其实很多人不在乎这一点

但是闭包本身是一个很复杂的概念,换句话说,在实际应用领域(下面会有所提及),大家遵守一致的默契. 但是深究起来每个人都有自己的理解.

在这里我斗胆设置一个"私密打包"的功能名称给闭包, 打包这样一个私有的区域,范围就是函数生成时候所在的词法作用域.

闭包的独立范围仅限于函数本身生成时所在的词法作用域以及外部作用域。它并不包括全局作用域

当一个函数被定义时,它会创建一个闭包,其中包含了函数自身以及函数所在的词法作用域中的变量。这个闭包可以在函数定义的词法作用域之外被调用,并且仍然可以访问和使用这些变量。

闭包的独立范围是相对于函数生成时所处的词法作用域而言的,它并不扩展到全局作用域。

而闭包本身,根据MDN文档的解释,是"可以通过作用域访问到全局作用域,因此闭包的范围是沿着作用域一直向上的",不同的人有不同的理解.

5.经典案例:私有属性

在js中是不存在和java一样完善的类的,这就代表我们很难像Java一样构建一个完整的,稳定的类,某种意义上来说这也算是js没有发展成气候的原因?

但是私有属性在MDN上有一个经典的案例,在这里我们不多解释了,因为代码不是我写的

解释一下这个代码:

在这个代码中,我们使用立即执行函数返回了三个函数,组合成立一个对象.

这个对象里的三个函数能调用函数作用域内的属性,这就很神奇的实现了私有属性

6.为什么不这样做:性能问题

实际上,在一个函数内创建以及生成别的函数,本身其实是很损耗性能的行为,因此在实际中,我们宁可让代码的安全交给程序员来维护,而不是损害性能,

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

more的详细用法

概要&#xff1a; Linux中more的功能是分页显示文件内容 空格键显示下一屏(页)&#xff0c;回车键Enter显示下一行&#xff0c;q键退出 本篇所用系统是Ubuntu22.04 一、more filename more后面跟的是文件名&#xff0c;分页显示文件内容 二、more < filename more从…

C语言—每日选择题—Day59

指针相关博客 打响指针的第一枪&#xff1a;指针家族-CSDN博客 深入理解&#xff1a;指针变量的解引用 与 加法运算-CSDN博客 第一题 1. 以下关于 typedef 正确的描述是&#xff08;&#xff09;【多选】 A&#xff1a;用typedef可以定义各种类型别名&#xff0c;但不能定义变量…

收藏!可能是最完整的全球AI大模型名单

ChatGPT的出现在全球掀起了AI大模型的浪潮。 区块链是生产关系的重构&#xff0c;元宇宙是虚拟场景的重构&#xff0c;而互联网则解决了信息流通和生产效率的问题&#xff0c;但这些都是在生产关系范畴内&#xff0c;而ChatGPT的出现则大幅度提升了生产力&#xff0c;让人类可…

openGauss学习笔记-168 openGauss 数据库运维-备份与恢复-导入数据-使用gs_restore命令导入数据

文章目录 openGauss学习笔记-168 openGauss 数据库运维-备份与恢复-导入数据-使用gs_restore命令导入数据168.1 操作场景168.2 操作步骤168.3 示例 openGauss学习笔记-168 openGauss 数据库运维-备份与恢复-导入数据-使用gs_restore命令导入数据 168.1 操作场景 gs_restore是…

Windows中安装nvm进行Node版本控制

1.nvm介绍 nvm英文全程也叫node.js version management&#xff0c;是一个node.js的版本管理工具。nvm和npm都是node.js版本管理工具&#xff0c;但是为了解决node各种不同之间版本存在不兼容的问题&#xff0c;因此可以通过nvm安装和切换不同版本的node。 2.nvm下载 可在点…

Linux基础(第三部分)

目录 一、查看文件显示命令 1、cat&#xff1a;查看文件内容&#xff1b;上下合并文件 2、标准输入与标准输出&#xff1a; 3、例题&#xff1a;如何合并两个文件 4、tac 就是反方向查看 5、rev 把一行倒过来 6、hexdump 查看硬件设备 7、more和less 8、查看文件内容…

ICC2:Less than minimum edge length和Concave convex edge enclosure

我正在「拾陆楼」和朋友们讨论有趣的话题,你⼀起来吧? 拾陆楼知识星球入口 首先,要介绍一下这两种drc Less than minimum edge length对应的tf rule如下: 而Concave convex edge enclosure对应图示和tf 规则如下,可

【UML】第7篇 用例图(2/3)

目录 一、什么是用例&#xff08;Use Case&#xff09; 二、用例的识别 2.1 识别用例的思考方法 2.2 识别用例的注意事项 三、用例的命名 四、用例规约 五、用例的粒度处理 错误1&#xff1a;粒度过细 错误2&#xff1a;把步骤当用例 错误3&#xff1a;把活动当用例 …

关于RAP和ZIP之间的区别、关系和转换,看这篇就差不多了

RAR和ZIP文件都是流行的文件格式&#xff0c;允许你以压缩的方式存储文件。因此&#xff0c;文件占用的空间较小&#xff0c;并且可以在需要时快速传输。 当你有一些RAR文件已经被压缩时&#xff0c;由于各种原因&#xff0c;你可能仍然想将它们转换为ZIP文件。阅读本文了解如…

Axure RP 8 for Mac/win中文版:打造完美交互式原型设计体验

Axure RP 8&#xff0c;一款引领潮流的交互式原型设计工具&#xff0c;为设计师提供了无限的可能性&#xff0c;让他们能够创造出逼真的原型&#xff0c;从而更好地展示和测试他们的设计。 Axure RP 8拥有丰富的功能和工具&#xff0c;让设计师可以轻松地创建出复杂的交互式原…

hadoop集群的开启与关闭

背景 很久没完hadoopl,连怎么开启关闭都不会了qwq 1.进入安装hadoop的目录 我这里是已经进入了 2.开启集群 sbin/start-dfs.sh 3.关闭集群 sbin/stop-dfs.sh

尚硅谷 java 2023(基础语法)笔记

一、变量与运算符 1、HelloWorld的编写和执行 class HelloChina{public static void main(String[] args){System.out.println("hello,world!!你好&#xff0c;中国&#xff01;");} } 总结&#xff1a; 1. Java程序编写和执行的过程&#xff1a; 步骤1&#xff1…

【java】java学习笔记

1. 快速入门 // Hello类 public class Hello {// main方法public static void main(String[] args) {System.out.println("hello world!");} } 在控制台输入以下命令&#xff0c;对.java文件&#xff08;源文件&#xff09;进行编译操作&#xff0c;生成Hello.clas…

提前预判和确认再做 现货白银投资的两种思路

在现货白银投资中&#xff0c;对于交易的步骤长期有两种看法。一种是提前预判行情并提前布局。另外一种是等待行情启动再做布局。这种两种方法要怎么选呢&#xff1f;笔者将从自己的角度出发&#xff0c;对这个问题进行讨论。 我们来看一下前一种的投资者&#xff0c;他们喜欢提…

个人或企业为啥要搭建及自己的知识付费平台才有前景?

在知识经济的时代&#xff0c;知识的传播和变现显得愈发重要。许多个人或企业选择将自己的知识、技能和经验通过课程的形式进行传播&#xff0c;以实现知识的价值。然而&#xff0c;在使用其他平台进行课程销售的过程中&#xff0c;他们常常面临着一些问题和挑战。 首先&#…

基于FPGA的简易BPSK和QPSK

1、框图 2、顶层 3、m_generator M序列的生成&#xff0c;输出速率为500Kbps 4、S2P是串并转换模块 将1bit的m序列转换到50M时钟下的2bit M序列数据&#xff08;就有4个象限&#xff09;&#xff1b; 5、my_pll是生成256M的时钟作为载波&#xff0c;因为sin和cos信号的…

linux 性能优化-内存优化

CPU 管理一样&#xff0c;内存管理也是操作系统最核心的功能之一。内存主要用来存储系统和应 用程序的指令、数据、缓存等。 1.内存原理 1.1.内存映射 1.1.1.日常生活常说的内存是什么? 我的笔记本电脑内存就是 8GB 的这个内存其实是物理内存物理内存也称为主存&#xff0…

【分享】Word技巧之锁定部分区域

在编辑Word文档过程中&#xff0c;如果部分内容已经确定好&#xff0c;但又担心不小心做了改动&#xff0c;我们可以将这部分内容锁定起来&#xff0c;使之无法编辑更改&#xff0c;不清楚的小伙伴一起来看看如何设置吧。 首先&#xff0c;打开Word文档后&#xff0c;用鼠标选…

Opencv 入门三(视频滑动条窗口)

视频滑动条窗口源码如下&#xff1a; #include "opencv2\highgui\highgui.hpp" #include "opencv2/imgproc/imgproc.hpp" #include <iostream> #include <fstream> using namespace std; int g_slider_position 0; // 滑动条的位置 …

Vue3-24-组件-异步组件的介绍

什么是异步组件 个人理解 &#xff1a;异步组件 就是在用到这个组件的时候再进行加载&#xff0c;而不是 一上来就全部加载完成。即用即取的一个思想。异步组件中使用到的方法 &#xff1a; defineAsyncComponent () 方法 &#xff1a; 返回一个Promise 对象; 我们在开发过程中…