深入浅出讲解闭包及其原理

news2024/11/25 18:53:14

闭包

什么是闭包?

闭包的概念并不复杂,但是它的定义比较绕(就像平时经常用到它,却又说不出来是什么)。可以在一个作用域中调用函数的内部函数并访问到该函数中的作用域的成员,这就是闭包。给一个建议,网上闭包的概念可以搜出来一大堆,但是你真的了解它吗?你有去调试看过它真的存在吗?一直处于理论状态,没有去真正实践过,这样的知识背下来了也没有太大意义,到面试的时候也表达不清楚。

闭包的原理

函数在执行的时候会放到一个执行栈中,当函数执行完毕之后会从执行栈移除,但是堆上的作用域成员因为被外部引用不能释放,因此内部函数依然可以访问外部函数的成员。

为了更好的理解,我列举以下两个场景,一个是存在闭包,一个是不存在闭包。并且通过浏览器调试工具去查看闭包。

基础案例

场景 1

function makeFn() {
    let msg = 'Hello function'

    console.log(msg)
}

makeFn()

执行过程如下:

  1. 定义 makeFn 函数
  2. 调用 makeFn 函数
  3. 定义 msg 变量
  4. 打印 msg 变量
  5. 销毁 msg 变量
  6. 执行完毕

调试结果
在这里插入图片描述

从上图中可以看到,当我们准备打印 msg 变量的时候,它是从当前作用域读取出来的。

场景 2

function makeFn() {
    let msg = 'Hello function'

    return function inside() {
        console.log(msg)
    }
}

let fn = makeFn() // 执行 makeFn 函数,返回 inside 函数

fn() // 执行 inside 函数

执行过程如下:

  1. 定义 makeFn 函数
  2. 调用 makeFn 函数
  3. 定义 msg 变量
  4. 定义 inside 函数(虽然还没被调用,但是由于该函数访问了外部函数的变量,所以外部函数的执行上文对象不会被销毁,形成闭包)
  5. makeFn 函数执行完毕,并将 inside 函数返回给 fn
  6. 调用 fn 函数
  7. inside 函数访问 msg 变量(从闭包中获取 msg)
  8. 打印 msg 变量
  9. 执行完毕

调试结果
在这里插入图片描述

从上图中可以看到,当我们准备打印 msg 变量的时候,它是从闭包里面读取出来的。

还有一点,闭包会造成内存泄露,这句话不完全对,何为内存泄露?例如上图的 msg 变量,是我想要访问的变量,它不叫内存泄露。内存泄露是指在闭包中存在一些我不想要的资源,或者是无意间生成出来的。

原文链接:菜园前端

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

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

相关文章

springboot整合swagger3

目录 一、导入swagger3的依赖二、SwaggerConfig代码的解读三、整体代码四、访问swagger3 一、导入swagger3的依赖 <dependency><groupId>io.springfox</groupId><artifactId>springfox-boot-starter</artifactId><version>3.0.0</versi…

【算法与数据结构】209.长度最小的子数组

文章目录 题目一、暴力穷解法二、滑动窗口法完整代码 所有的LeetCode题解索引&#xff0c;可以看这篇文章——【算法和数据结构】LeetCode题解。 题目 一、暴力穷解法 思路分析&#xff1a;这道题涉及到数组求和&#xff0c;那么我们很容易想到利用两个for循环来写&#xff0c;…

【科技素养题】少儿编程 蓝桥杯青少组科技素养题真题及解析第20套

少儿编程 蓝桥杯青少组科技素养题真题及解析第20套 1、“唐纳德特朗普 (Donald Trump) 曾经是美国总统”是一个 (),“特朗普关于新冠肺炎疫情的不实言论”是一个 ()。 A、事实;事实 B、观点;事实 C、观点;观点 D、事实;观点 答案:D 考点分析:主要考查小朋友们对时事的…

ChatGPT的未来发展

文章目录 1.什么是ChatGPT2.ChatGPT的基础技术3.ChatGPT工作原理4.ChatGPT应用场景5.ChatGPT局限性6.ChatGPT的未来发展 ✍创作者&#xff1a;全栈弄潮儿 &#x1f3e1; 个人主页&#xff1a; 全栈弄潮儿的个人主页 &#x1f3d9;️ 个人社区&#xff0c;欢迎你的加入&#xff…

【严重】vm2 <3.9.18 沙箱逃逸漏洞(存在POC)

漏洞描述 vm2 是一个基于 Node.js 的沙箱环境&#xff0c;可以使用列入白名单的 Node 内置模块运行不受信任的代码&#xff0c;代理对象用于拦截并重定义宿主对象的各种操作。 vm2 3.9.18之前版本中&#xff0c;由于 prepareStackTrace 函数直接由 V8 引擎调用&#xff0c;其…

Linux命令(30)之ps

Linux命令之ps 1.ps介绍 linux命令ps是用来查看系统进程的命令。类似与Windows任务管理器中查看到的进程的功能。 2.ps用法 ps [参数] ps常用参数 参数说明-A显示所有的进程数据-a显示跟当前终端关联的所有进程-u基于用户的格式显示-x显示所有进程&#xff0c;不以终端机来…

chatgpt赋能python:用Python建立600*600画布,打造更好的数据可视化!

用Python建立600*600画布&#xff0c;打造更好的数据可视化&#xff01; 简介 数据可视化是数据分析的重要工具之一&#xff0c;通过可视化工具可以更加直观地展现数据&#xff0c;帮助人们更好地理解数据。而Python语言中的matplotlib库正是其中一款功能强大的数据可视化工具…

如何提升自身 WEB 渗透能力?

前言 web 渗透这个东西学起来如果没有头绪和路线的话&#xff0c;是非常烧脑的。 理清 web 渗透学习思路&#xff0c;把自己的学习方案和需要学习的点全部整理&#xff0c;你会发现突然渗透思路就有点眉目了。 程序员之间流行一个词&#xff0c;叫 35 岁危机&#xff0c;&am…

基于MATLAB的Filter使用,低通、带通和高通滤波器的MATLAB程序分享

基于MATLAB的Filter使用&#xff0c;低通、带通和高通滤波器的MATLAB程序分享 完整程序如下&#xff1a; clear all close all clc %% Parameter Interface Frequence0 60; %单位&#xff1a;Hz Frequence1 130; %单位&#xff1a;Hz F…

002-从零搭建微服务-认证中心(二)

写在最前 如果这个项目让你有所收获&#xff0c;记得 Star 关注哦&#xff0c;这对我是非常不错的鼓励与支持。 源码地址&#xff1a;https://gitee.com/csps/mingyue 文档地址&#xff1a;https://gitee.com/csps/mingyue/wikis 创建新项目 MingYue Idea 创建 maven 项目这…

【算法与数据结构】59、LeetCode螺旋矩阵2

文章目录 题目一、方向向量法完整代码 所有的LeetCode题解索引&#xff0c;可以看这篇文章——【算法和数据结构】LeetCode题解。 题目 一、方向向量法 思路分析&#xff1a;螺旋矩阵在旋转过程中&#xff0c;我们选择的区间是左闭右开区间[ , ]&#xff0c;例如方向为从左往右…

【玩转Linux操作】Ubuntu创建桌面快捷方式

&#x1f38a;专栏【玩转Linux操作】 &#x1f354;喜欢的诗句&#xff1a;更喜岷山千里雪 三军过后尽开颜。 &#x1f386;音乐分享【Counting Stars 】 欢迎并且感谢大家指出小吉的问题&#x1f970; 目录 &#x1f34e;进入applications文件夹 &#x1f34e;选择需要添加到…

chatgpt赋能python:Python开发平台软件的重要性

Python开发平台软件的重要性 随着科技的不断进步和软件开发的发展&#xff0c;Python语言逐渐成为最受欢迎和广泛使用的编程语言之一。作为一门高级编程语言&#xff0c;Python具有简单易懂的语法和强大的功能&#xff0c;能够帮助开发者快速构建复杂的应用程序和网站。Python…

初学者应该怎么学git-下

初学者应该怎么学git-下 Git 文件管理 文件四种状态 ● 版本控制就是对文件的版本控制&#xff0c;在Git 管理中&#xff0c;文件被统一管理&#xff0c;有四个状态 Untracked: 未跟踪, 此文件在文件夹中, 但并没有加入到git 库, 不参与版本控制. 通过git add 状态变为Stage…

高性能网络应用框架

技术主题 Netty从本质上讲是一个高性能网络应用框架&#xff0c;之所以说是高性能&#xff0c;依赖于Netty的线程模型。 一网络编程性能的瓶颈 BIO 模型里&#xff0c; read() 操作和 write() 操作都会阻塞当前线程的&#xff0c;如果客户端已经和服务端建立了一个连接&…

【基于IMX6ULL驱动开发学习】01.安装交叉编译环境【附下载地址】

第一步&#xff08;下载工具链&#xff09;&#xff1a; 从官网上下载交叉编译工具链 https://snapshots.linaro.org/gnu-toolchain/ 按照以下步骤选择 可以选择最新的&#xff08;我也忘记我用的哪个版本了&#xff0c;都可以用问题不大&#xff09; 第二步&#xff08;…

chatgpt赋能python:Python库函数:提高开发效率的利器

Python库函数&#xff1a;提高开发效率的利器 Python作为一门高级编程语言&#xff0c;被广泛应用于 Web开发、科学计算、机器学习、数据分析等领域。它的可读性强、语法简单、库函数丰富是其广受欢迎的原因之一。本文将带您了解Python库函数的优势并介绍几个常用的库函数。 …

大型语言模(LLM) 之 提示词工程(三)

今天我学习了DeepLearning.AI的 Prompt Engineering 的在线课程&#xff0c;我想和大家一起分享一下该门课程的一些主要内容。以下是我写的关于该课程的前两篇博客&#xff1a; 大型语言模(LLM)之提示词工程(一) 大型语言模(LLM)之提示词工程(二) 今天我们来学习第三部分内容…

【express模块】课程笔记

目标&#xff1a; express.static()快速托管静态资源express路由精简项目结构常见express中间件使用express创建API接口在express中启用cors跨域资源共享 目录 一. 初识Express 1.1 Express简介 1. 什么是express 2. 进一步理解Express 3. Express能做什么 1.2 Express…

聊聊那些奇葩的代码规范 —— 滥用 lombok

因为有些要求感觉实是太过奇葩&#xff0c;收集下来娱乐下大家。 代码规范要求 在所有无参数构造函数&#xff0c;全参数构造函数&#xff0c;Getter 和 Setter 方法必须要使用 Lombok。 所有的 Builder 方法也必须要用 Lombok。 简单来说是就是 Lombok 没有提供的才可以使用…