震惊!原来这就是JavaScript闭包的秘密

news2024/11/20 3:28:16

📢 鸿蒙专栏:想学鸿蒙的,冲

📢 C语言专栏:想学C语言的,冲

📢 VUE专栏:想学VUE的,冲这里

📢 CSS专栏:想学CSS的,冲这里

📢 Krpano专栏:想学VUE的,冲这里

 📢 JavaScript专栏:想学JavaScript的,冲这里

🔔 上述专栏,都在不定期持续更新中!!!!!!!

目录

✨ 前言

什么是闭包

闭包的作用

实现闭包的条件

闭包的生命周期

✨ 结语


✨ 前言

        闭包(Closure)是JavaScript中一个非常重要却容易让人困惑的概念。明明是一个函数,为什么还能引用外部变量?今天我将为你揭开JavaScript闭包的神秘面纱,通过简单易懂的例子让你明白闭包的实际应用场景和作用。你将会对闭包有一个全新的认识,并能够在以后的代码中灵活运用它。跟着我一起抓住JavaScript闭包的真谛,成为JS高手吧!

什么是闭包

        闭包(Closure)是JavaScript一个很重要的概念,它使函数拥有保持其作用域链的能力。

        简单说,闭包让函数记住并继续访问定义函数的词法作用域,即使函数是在当前词法作用域之外被执行。

闭包的作用

闭包的主要作用有:

  1. 让函数访问外部变量
    function outer() {
      const x = 10;
      function inner() {
        return x; 
      }
      return inner;
    }
    
    const getX = outer();
    getX(); // 返回10

  2. 封装变量,减少全局变量污染
    function counter() {
      let count = 0;
      return function() {
        return count++; 
      }
    }
    
    const c1 = counter();
    c1(); // 0
    c1(); // 1

  3. 实现模块和信息隐藏
    function Person(name) {
      const age = 18;
      
      return {
        getName: function() {
          return name;
        },
        getAge: function() {
          return age;
        } 
      };
    }
    
    const me = Person('Jack');
    me.getName(); // Jack
    me.getAge(); // 18

实现闭包的条件

  • 函数嵌套
  • 内部函数引用外部函数的变量
  • 外部函数返回内部函数

满足这三个条件就可以实现一个闭包。

闭包的原理可以简单概括为:

  1. 函数与其周围状态(lexical environment,又称词法环境)的组合。这个环境包含了函数定义时候的作用域中的任何局部变量。
  2. 当函数在其词法作用域以外被调用时,就会生成闭包。闭包会使原来的词法作用域链保持alive。所以闭包函数仍然可以访问定义时作用域中的变量。
  3. 闭包可以访问定义函数时的作用域。即使函数在定义作用域外被执行,那个作用域链并不会被销毁,仍然可被闭包访问。
  4. 闭包保留了原始作用域链,所以会比其他函数占用更多内存。

简单总结闭包的原理:

  • 函数执行时形成作用域
  • 函数和其周围状态的引用组合形成闭包
  • 这个组合使函数仍可访问定义时作用域的变量
  • 即使在定义作用域外执行

        所以说闭包是函数和其词法作用域的组合,可以通过闭包访问初始作用域的变量,起到封装变量的作用。

闭包的生命周期

闭包的作用域链不会被垃圾回收机制回收,因此会常驻内存。

过度使用闭包可能会导致内存占用过多。

正确使用闭包,在适当场景下可以提高代码优雅性,封装性,模块化。

        以上简要介绍了JavaScript闭包的概念、作用和实现。它是JavaScript一个非常重要的概念,合理利用闭包可以编写出更优雅高效的代码。

✨ 结语

        通过今天的学习,我们已经掌握了闭包的含义、实现条件、作用场景等,并通过示例代码加深了理解。闭包是JavaScript一个强大的特性,合理使用闭包可以帮我们封装变量,减少污染,实现信息隐藏。在模块化编程中,它也有非常重要的作用。但是滥用闭包也会导致内存问题。正确看待和运用闭包,我们的JavaScript代码会更优雅、高效。最后,如果你喜欢本文,欢迎分享给你的编程伙伴一起进步!

        我们改日再会

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

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

相关文章

第一届能源电子产业创新大赛太阳能光伏赛道决赛及颁奖仪式在宜宾成功举办

在工业和信息化部电子信息司指导下,由工业和信息化部产业发展促进中心和宜宾市人民政府主办,宜宾市经济和信息化局、宜宾高新技术产业园区管理委员会承办的第一届能源电子产业创新大赛太阳能光伏赛道决赛及颁奖仪式于2024年1月3日-5日在宜宾市成功举办。…

DDIA 第十一章:流处理

本文是《数据密集型应用系统设计》(DDIA)的读书笔记,一共十二章,我已经全部阅读并且整理完毕。 采用一问一答的形式,并且用列表形式整理了原文。 笔记的内容大概是原文的 1/5 ~ 1/3,所以你如果没有很多时间…

2023年后,AI 还有什么研究方向有前景?

什么是AI ​ AI代表人工智能,它是指通过计算机科学技术使机器能够执行需要智力的任务的一种技术。这些任务包括学习、推理、问题解决和感知等,通常是人类智能的表现。人工智能的目标是使计算机系统能够执行需要人类智力的任务,而不需要人类的…

C语言实用第三方库Melon开箱即用之多线程模型

在之前的文章中(开发利器——C 语言必备实用第三方库),笔者介绍了一款Linux/UNIX下C语言库Melon的基本功能,并给出了一个简单的多进程开箱即用的例子。 本文将给大家介绍Melon中多线程的使用方法。 在Melon中有三种多线程模式&a…

点对点SDWAN组网:通过专线连接实现企业分支互联

点对点SDWAN是一种通过软件定义网络技术将企业分支互联的组网解决方案。在点对点SDWAN中,企业分支通过专线连接实现互联,以满足对网络性能和可靠性的要求。 传统的WAN架构通常使用MPLS(多协议标签交换)技术来实现企业分支的互联。…

TransmittableThreadLocal使用踩坑

背景:为了获取相关字段方便,项目里使用了TransmittableThreadLocal上下文,在异步逻辑中get值时发现并非当前请求的值,且是偶发状况(并发问题)。 发现:TransmittableThreadLocal是阿里开源的可以实现父子线程值传递的工…

鸿蒙系列--动态共享包的依赖与使用

一、前言 HarmonyOS的共享包相当于Android的Library,在HarmonyOS中,给开发者提供了两种共享包,HAR(Harmony Archive)静态共享包,和HSP(Harmony Shared Package)动态共享包 区别&…

记一次 .NET 某新能源材料检测系统 崩溃分析

一:背景 1. 讲故事 上周有位朋友找到我,说他的程序经常会偶发性崩溃,一直没找到原因,自己也抓了dump 也没分析出个所以然,让我帮忙看下怎么回事,那既然有 dump,那就开始分析呗。 二&#xff…

计算机创新协会冬令营——暴力枚举题目05

这道题挺基础但是挺多坑的。(•́へ•́╬) 题目 204. 计数质数 - 力扣(LeetCode) 给定整数 n ,返回 所有小于非负整数 n 的质数的数量 。 示例 示例 1: 输入:n 10 输出:4 解释:小于 10 的质…

具有大电流,双通道 12V,短地短电源保护等功能的国产芯片GC8549 可替代ONSEMI的LV8548/LV8549

GC8549 可以工作在 3.8~12V 的电源电压上,每 通道能提供高达 1.5A 持续输出电流或者 2.5A 峰值 电流,睡眠模式下功耗小于 1uA。具有 PWM(IN/EN)输入接口,与行业标 准器件兼容,并具有过温保护,欠压保护&…

信息系统项目管理师好考吗?知识点分析与讲解,码住!

科目一:综合知识考试 科目一考试是由选择题组成的,共有75道题目。考试时间为早上9点到11点半,可以提前交卷,通常11点左右就能离开考场。对于会做的题目,要及时解答,对于不会做的题目,花费过多时…

QC/PD快充电源产品MOS选型分析

• 原边650-700V SJ MOSFET采用低FOM值的ESM 技术,有利于提高系统效 率, 以及更佳的EAS和EMI等特性,对于一些不含PFC电路的系统更友好。 • 副边采用低FOM值的SGT同步整流电路,相比肖特基二极管整流能有更低的 损耗,有…

pinia 给 state 指定变量类型

pinia 给 state 指定变量类型 问题描述 自从用 vitetsvue3 以来,我一直有一个很大的疑问,就是 pinia 中的 state 变量类型该从哪定义,如何定义它? 因为我在使用未定义类型的 state 变量的时候一直会有一个提示,提示说…

JAVA集合框架总结

集合框架概述 1.1 生活中的容器 1.2 数组的特点与弊端 一方面,面向对象语言对事物的体现都是以对象的形式,为了方便对多个对象的操作,就要对对象进行存储。另一方面,使用数组存储对象方面具有一些弊端,而Java 集合就…

Unity之预制体与变体

PS:不用说了,我在写博客就是在摸鱼 一、预制体 不知道大家小时候有没有看过火影,记得剧情最开始的时候水木哄骗鸣人去偷封印之书,反而让鸣人学会了多重影分身之术: 好了,小编绞尽脑子终于想好怎么向大家介绍预制体了&a…

element中Tree 树形控件实现多选、展开折叠、全选全不选、父子联动、默认展开、默认选中、默认禁用、自定义节点内容、可拖拽节点、手风琴模式

目录 1.代码实现2. 效果图3. 使用到的部分属性说明4. 更多属性配置查看element官网 1.代码实现 <template><div class"TreePage"><el-checkboxv-model"menuExpand"change"handleCheckedTreeExpand($event, menu)">展开/折叠&l…

亚马逊店铺遇到账号申诉模版分享

1.表达诚意&#xff0c;先认错再说&#xff1a;我知道&#xff0c;最近我们在Amazon.com上作为卖家的表现已经低于亚马逊和我们自己的质量标准。 2.清楚分明的格式&#xff1a;我们库存管理的混乱导致了延迟发货&#xff0c;更糟糕的是&#xff0c;物品无法使用。当延迟发货和…

00 项目结构

文章目录 后端 后端 后端 - sky-common包 公共类&#xff0c;工具类&#xff0c;常量类- constant 常量类- context 上下文有关的- enumenation 枚举- exception 自定义异常类- json json处理类- properties boot相关的配置属性类- result 结果类- uti…

【React系列】React中的CSS

本文来自#React系列教程&#xff1a;https://mp.weixin.qq.com/mp/appmsgalbum?__bizMzg5MDAzNzkwNA&actiongetalbum&album_id1566025152667107329) 一. React中的css方案 1.1. react 中的 css 事实上&#xff0c;css 一直是 React 的痛点&#xff0c;也是被很多开发…

gitlab高级功能之Kubernetes Agent介绍

文章目录 1. 前置条件2. 简介3. GitLab Kubernetes Agent 的部署3.1 启用 Agent 服务端3.2 创建 Agent 配置和清单仓库 4. 安装agent4.1 连接k8s集群4.2 在集群中部署4.3 修改资源清淡&#xff0c;调整pod的副本数 5. 思考 1. 前置条件 gitlab 14.5 专业版k8s集群helm客户端工…