【深入理解 —— js闭包】

news2024/11/17 21:32:06

🧁个人主页:个人主页

✌支持我 :点赞👍收藏🌼关注🧡

文章目录

    • js闭包
      • 🎀 什么是闭包?
      • 🩰 执行上下文(执行环境)
      • 🍧解释闭包的含义
      • 🍭闭包一定要return吗?
      • 🌼闭包什么时候需要return呢?
      • 🍄闭包的应用
      • 🍬闭包 -- 内存泄漏

js闭包

🎀 什么是闭包?

概念:一个函数对周围状态的引用捆绑在一起,内层函数中访问到其外层函数的作用域

简单理解:闭包 = 内层函数 + 引用的外层函数的变量

那么为什么内层函数能访问到其外层函数的作用域??首先我们先思考这段代码

function books(){
    var book = "书包里面的书本";
}
console.log(book);

🍕🍔我们知道是并不能访问到book这个变量的,那么从js的执行上下文来分析其原因

🩰 执行上下文(执行环境)

在这里插入图片描述

💦1. 执行上下文: 全局环境,函数环境,Eval环境(暂时不研究)

💦2. 初次运行代码,会进入 全局执行上下文

我们分析下面代码,来了解执行上下文

 function a(){
         b();
         function b(){
            c();
            function c(){
                console.log('我在里面');
            }
         }
}
a();

在这里插入图片描述

我们再来看前面讲到的代码的执行上下文

在这里插入图片描述

💨💨💨从图中可以得到,并没有执行函数,没有进入book函数的执行上下文,但是要求在全局环境中输出 函数中的变量book ,但是全局中并没有book这个变量,所以不行

此时我们再来理解闭包的含义:为什么内层函数能访问到其外层函数的作用域

🍧解释闭包的含义

       function books(){
        var book = "书包里面的书本";
        return function(){
            console.log(book);
        }
       }
       var bag = books();
       bag();

在这里插入图片描述

🍭闭包一定要return吗?

下面就是一个简单是闭包形式,可见闭包不一定必须有return

在这里插入图片描述

🌼闭包什么时候需要return呢?

💥外部如果想要使用闭包的变量,则此时需要return

在这里插入图片描述

🍄闭包的应用

🪁实现数据的私有:外部可以使用闭包内的变量,但不能进行修改

🪁比如:使用统计函数调用次数,函数统计一次,就++

在这里插入图片描述
在这里插入图片描述

🍬闭包 – 内存泄漏

👻内存泄漏👻,指在JS中已经分配内存地址的对象由于长时间未进行内存释放或无法清除,造成了长期占用内存,使得内存资源浪费,最终导致运行的应用响应速度变慢以及最终崩溃的情况。

谁会存在闭包泄漏?👀👀👀 ----- count变量

  • result是一个全局变量,代码执行完毕不会立即销毁(除非关闭页面)
  • result使用fn函数
  • fn用到fun函数
  • fun函数里面用到count
  • count被引用就不会被回收,所以一直存在

此时,闭包引起了内存泄漏

注:不是所有的内存泄露都需要手动回收

👣js内存泄漏详情可见:js内存泄漏情况分析

🎉🎉🎉如有错误,请评论指出,thankyou~🎀🎀🎀
✨✨✨创作不易,如对您有帮助,欢迎给博主点赞收藏,给予鼓励哟💛

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

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

相关文章

Linux 黑马

1.1虚拟机介绍1.2VMware Workstation虚拟化软件 下载CentOS; 5分钟教你下载安装VMware16虚拟机(含许可证密钥)【全免费VMware虚拟机 上集】_哔哩哔哩_bilibili 1.3远程链接Linux系统 &FinalShell 1.4拓展WSL(Ubuntu)环境 Win11>可选功能>…

愿你被这个世界温柔以待(第二十课)最优秀的仓库Gitee

愿你被这个世界温柔以待(第二十课)最优秀的仓库Gitee 在追梦的道路上 相信自己一定能变的更加优秀 看下面操作流程图:如果你觉自己的学习能力很强跟着下面的流程图片去走 图片教学 上传一份项目如何做 下面的是图片教学 看到上面的图片操作可能看不懂 Giteej基本操作命令行 初…

Photoshop简单案例(9)——利用PS去水印的四种方法

目录一、项目介绍二、简单水印2.1 水印原图2.2 去除步骤2.3 去除效果三、文件水印3.1 水印原图3.2 去除步骤3.3 去除效果3.4 拓展四、内容识别法4.1 水印原图4.2 去除步骤4.3 去除效果一、项目介绍 本文将介绍利用PhotoShop去水印的四种方法。 二、简单水印 2.1 水印原图 对…

我敢打赌,90%的测试人员都不理解Git

01 概念 1、Git本地有四个工作区域: 工作目录(Working Directory) 暂存区(Stage/Index) 资源库(Repository或Git Directory) git仓库(Remote Directory) 文件在这四…

深度学习设计模式(一):编写高质量代码的基础(多例子+代码)

学习如何编写高质量代码前言面向对象面向对象编程,面向对象编程语言面向对象分析 ,面向对象设计封装,抽象,继承,多态封装抽象继承多态面向对象比面向过程有哪些优势,面向过程过时了?什么是面向过…

MyBatisPlus入门

目录 概述 SpringBoot继承MyBatisPlus CRUD 新增 删除 修改 查询 条件构造器 全局配置 相关注解 ActiveRecord 插件 分页插件 防止全表删除插件 乐观锁插件 乐观锁插件的使用 逻辑删除 使用逻辑删除 扩展 自动填充 Sql注入器 代码生成器Generator 代码生成器MyBa…

Seata 分布式事务你懂吗?学习了大咖的笔记,公司说要给我涨薪 8K

分布式事务处理过程的-ID三组件模型: 关于事务的基本概念 Seata 是阿里开源的分布式事务解决方案中间件,对业务侵入小,在应用中 Seata 整体事务逻辑基于两阶段提交的模型,核心概念包含三个角色: TM:事务发…

听说你还在自己做重复劳动?看我一键生成错误码映射

大家在工作中定义错误码的时候都是如何处理的? xdm 可以评论区交流交流 我看到过有的是这样定义错误码的: m : make(map[int]string)m[0] "OK"m[1] "链接失败"m[2] "文件类型错误"... 还看到过这样定义错误码的&#x…

腾讯云2核2G、2核4G、4核8G、8核16G、16核32G服务器价格出炉

腾讯云轻量应用服务器为轻量级的云服务器,使用门槛低,按套餐形式购买,轻量应用服务器套餐自带的公网带宽较大,4M、6M、7M、10M、14M及20M套餐可选,如果是云服务器CVM这个带宽价格就要贵很多了。 轻量应用服务器CPU内存…

Linux系统中如何实现串口的格式化功能方法

大家好,今天的话,主要和大家聊一聊,如何实现串口格式化功能实验。 目录 第一:串口格式化基本简介 第二:实验程序的操作 第三:具体的代码实现 第一:串口格式化基本简介 前面虽然实现了串口的功…

[附源码]计算机毕业设计基于vuejs的爱宠用品销售appSpringboot程序

项目运行 环境配置: Jdk1.8 Tomcat7.0 Mysql HBuilderX(Webstorm也行) Eclispe(IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持)。 项目技术: SSM mybatis Maven Vue 等等组成,B/S模式 M…

【vue】中英文切换(多语言国际化)

一、安装i18n插件 npm install vue-il8n8.23.0 --save二、创建语言包文件夹与配置 (1)index.js中 import Vue from vue // 引入vue import VueI18n from vue-i18n // 引入i18n模块 import elementEnLocale from element-ui/lib/locale/lang/en // elem…

新手使用wvp-pro和ZLMediaKit的菜鸟说明(手把手教)

对于wvp-pro的使用,很多大佬都是白嫖菜鸟党,很多都第一次使用wvp,甚至第一次接触国标,连国标最基本流程都不清楚。所以写此文档以供各位菜鸟大佬点评指正 看此文档前提:(下文ZLMediaKit简称zlm&#xff09…

springBoot中日志的使用

springBoot中日志的使用 日志基础 首先你需要知道日志门面,日志实现,日志桥接器。 基于日志实现,常用的有logback,log4j2,这两个日志实现是的创始人是同一个,概念差不多,这里以log4j2为例,有如…

迭代器和生成器

文章目录迭代器和生成器图解迭代器和生成器的关系迭代器容器生成器yield函数生成器表达式总结迭代器和生成器 图解迭代器和生成器的关系 图1-1​ 不管是生成器还是我们的容器,最终都是迭代器,使用next方法进行有规律的获取元素,不需要将元素…

免费的在线3D CAD【BimAnt】

BimAnt托管了可以免费使用的在线三维CAD,采用BRep内核,支持几何约束求解,支持二维草图,支持挤压、放样、扫掠和旋转等操作。访问地址:BimAnt三维CAD。 一、添加基础图元 BimAnt三维CAD支持圆柱、圆锥、球体、圆环体…

STM32的最小系统组成的详解

经常使用STM32开发的工程师对于它的开发环境的最小系统是必须要有所了解的,特别是硬件工程师在设计硬件的时候对这个最小系统就要更加的深入了解了,如果最小系统的搭建都有问题,那以后的使用很难避免不出现问题。 话不多说,进入正…

【自省】使用Executors.xxx违反阿里Java代码规范,那还不写定时任务了?

一、背景 在《分布式锁主动续期的入门级实现-自省 | 简约而不简单》中通过【自省】的方式讨论了关于分布式锁自动续期功能的入门级实现方式,简单同步一下上下文: 客户端抢到分布式锁之后开始执行任务,执行完毕后再释放分布式锁。持锁后因客…

微服务守护神-Sentinel-热点-授权-系统规则

引言 书接上篇 微服务守护神-Sentinel-降级规则 ,上面介绍了Sentinel降级规则,本篇继续来Sentinel的热点、授权、系统规则。 热点规则 何为热点?热点即经常访问的数据。很多时候我们希望统计某些热点数据中访问频次最高的 Top K 数据&…

# String-security(配置异常处理器,封装JWT工具类)

1 JWT是做什么的? 为了在前后端分离项目中使用 JWT ,我们需要达到 2 个目标: 在用户登录认证成功后,需要返回一个含有 JWT token 的 json 串。 在用户发起的请求中,如果携带了正确合法的 JWT token ,后台需要放行&a…