【JavaScript】闭包的理解

闭包是指在一个函数内部创建另一个函数,并且内部函数可以访问外部函数的变量、参数以及其他内部函数,即使外部函数已经执行完毕。这种机制使得内部函数保留了对外部作用域的引用,即使外部作用域已经不再活跃。

为什么闭包重要?

闭包在 JavaScript 中具有重要的用途和价值。它们可以用于创建私有变量、封装逻辑、避免全局污染等方面。另外,闭包还允许你在函数之外操作局部变量,从而为代码提供更大的灵活性和可维护性。

JavaScript 闭包的特点

  • 闭包可以访问外部函数的变量,即使外部函数已经返回了。
  • 闭包保存外部函数变量的引用,而不是实际的值。
  • 每当一个函数在另一个函数中被创建时,就会产生闭包。

JS 闭包的用途

闭包常被用于:

  • 封装 - 内部函数可以访问外部变量,但外部函数不能访问内部变量。这提供了封装和数据私密性。
  • 状态持续 - 闭包可以在函数调用之间保持状态(例如计数器)。函数的变量在调用之间持续存在。
  • 偏函数应用 - 闭包可以用于偏函数应用和柯里化函数。这涉及到创建一个捕获一些参数但保留其他参数未设置的函数。

JS 闭包的类型

1. 普通闭包

普通闭包是指一个函数内部定义了另一个函数,并且内部函数引用了外部函数的变量。这种情况下,内部函数会捕获外部函数的变量,并可以在外部函数执行完毕后继续使用。

  var outerVar = 'I am from outer';
  
  function inner() {
    console.log(outerVar);
  }
  
  return inner;
}

var closureFunction = outer();
closureFunction(); // 输出:I am from outer

2. 立即调用函数表达式(IIFE)闭包

IIFE 是一种创建闭包的常见模式。通过将函数定义包裹在括号内并立即调用它,你可以创建一个在执行后仍然具有访问外部作用域的函数。

  var privateVar = 'I am private';
  
  return function() {
    console.log(privateVar);
  };
})();

closureFunction(); // 输出:I am private

实践案例:计数器闭包

让我们通过一个实际案例来进一步理解闭包的应用。考虑一个简单的计数器,可以通过闭包来实现:

  var count = 0;
  
  return function() {
    return ++count;
  };
}

var counter = createCounter();
console.log(counter()); // 输出:1
console.log(counter()); // 输出:2
console.log(counter()); // 输出:3

互动练习

1.创建一个闭包函数,用于计算累加和。函数初始值为0,每次调用会将参数值累加到内部变量中。参考答案:

  var sum = 0;

  return function(value) {
    sum += value;
    return sum;
  };
}

var sumCalculator = createSumCalculator();
console.log(sumCalculator(5)); // 输出:5
console.log(sumCalculator(10)); // 输出:15
console.log(sumCalculator(2)); // 输出:17

2.创建一个IIFE闭包,用于生成斐波那契数列的下一个值。斐波那契数列起始为0和1,后续每个数字是前两个数字之和。参考答案:

  var a = 0;
  var b = 1;

  return function() {
    var next = a + b;
    a = b;
    b = next;
    return next;
  };
})();

console.log(fibonacciGenerator()); // 输出:1
console.log(fibonacciGenerator()); // 输出:2
console.log(fibonacciGenerator()); // 输出:3

注意事项

  • 闭包会导致内存泄漏,因为闭包保留了对外部作用域的引用,导致外部作用域的变量无法被垃圾回收机制释放。
  • 注意使用闭包时的作用域链,避免意外引用到不需要的变量。
  • 闭包不仅在浏览器中有用,在 Node.js 服务器端编程中也经常使用。

通过 API 工具调试后端接口

Apifox 是一个比 Postman 更强大的接口测试工具,Apifox = Postman + Swagger + Mock + JMeter,Apifox 支持调试 http(s)、WebSocket、Socket、gRPC、Dubbo 等协议的接口,并且集成了 IDEA 插件。在后端人员写完服务接口时,测试阶段可以通过 Apifox 来校验接口的正确性,图形化界面极大的方便了项目的上线效率。

总结

闭包是 JavaScript 中一个强大且有趣的概念,允许内部函数访问外部作用域中的变量和数据。通过创建闭包,你可以实现私有性、封装性以及更高级的编程技巧。了解闭包的工作原理并在实际项目中应用它们,将使你的 JavaScript 代码更加优雅和功能强大。

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

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

相关文章

Python之初识类与对象

类的概念与定义 在生活中,我们走在路边,看到一辆车,大脑中首先想到的是“这是一辆车,然后才是这是一辆什么牌子的车”,在这里,我们就用到了编程中的类的概念。同样的,看到一条小狗,…

php 使用box打包

1.安装box 2.检查是否安装成功 3.查看路径,把路径添加到环境变量,方便使用 4.php项目根目录增加box.json配置文件 5.运行命令生成。这个是在cmd中运行的,记得切换到php源码目录 6.使用 php FastAdmin.phar运行。 说明:如果是常驻…

LVS-DR模式部署

实验准备: 节点服务器 192.168.116.20 #web1 192.168.116.30 #web2 1.部署NFS共享存储 2.部署Web节点服务器 将两台服务器的网关注释掉 #重启网卡 systemctl restart network 修改节点服务器的内核参数|vim /etc/sysctl.conf net.ipv4.conf.lo.arp_ign…

WPF——命令commond的实现方法

命令commond的实现方法 属性通知的方式 鼠标监听绑定事件 行为:可以传递界面控件的参数 第一种: 第二种: 附加属性 propa:附加属性快捷方式

大厂痴迷DDD:从高德portal重构,看DDD的巨大价值

尼恩说在前面 在40岁老架构师 尼恩的读者交流群(50)中,最近有小伙伴拿到了一线互联网企业如阿里、滴滴、极兔、有赞、希音、百度、网易、美团的面试资格,遇到很多很重要的面试题: 谈谈你的DDD落地经验? 谈谈你对DDD的理解&#x…

Vim入门

Vim使用入门 1.Vim编辑器的三种常用模式 一般模式:刚打开文件是它,从编辑模式按“ESC”退回的模式也是它。可以执行各种编辑操作,如移动光标、复制、粘贴、删除、查找替换等 ; 编辑模式:在一般模式下按下 i、I、a、A、o、O 等键…

JavaScript 事件冒泡与捕获机制 --- 带动态图理解

&#xff08;1&#xff09;.事件捕获 从根元素往上传递 --- ---&#xff08;由外到内&#xff09; &#xff08;2&#xff09;.事件冒泡 从元素传递到它的根源素 --- --- &#xff08;由内到外&#xff09; 代码&#xff1a; <!DOCTYPE html> <html lang"en&q…

Linux(操作系统)面经——part 1(持续更新中......)

1、说一说常用的 Linux 命令 mkdir创建文件夹&#xff0c;touch创建文件&#xff0c;mv移动文件内容或改名 rm-r 文件名&#xff1a;删除文件 cp拷贝&#xff1a;cp 文件1 文件2&#xff0c;cp-r跨目录拷贝 cp-r 路径1 路径2 vi 插入 &#xff1a;wqb保存退出 :q!强制退出…

k8s - container

1、容器的生命周期&#xff1a; (1) 简介&#xff1a; Kubernetes 会跟踪 Pod 中每个容器的状态&#xff0c;就像它跟踪 Pod 总体上的阶段一样。 可以使用容器生命周期回调&#xff0c;在容器生命周期中的特定状态点触发事件。 ● 容器生命周期回调&#xff1a; 在容器的生…

【员工工资册】————大一期末答辩近满分作业分享

前言 大家好吖&#xff0c;欢迎来到 YY 滴项目系列 &#xff0c;热烈欢迎&#xff01; 本章主要内容面向接触过C语言的老铁 主要内容含&#xff1a; 欢迎订阅 YY滴C专栏&#xff01;更多干货持续更新&#xff01;以下是传送门&#xff01; PS&#xff1a;以下内容是部分展示&am…

MetaAI语音翻译大模型Seamless登场,主打AI无缝同声传译

论文题目&#xff1a; Seamless: Multilingual Expressive and Streaming Speech Translation 论文链接&#xff1a; https://ai.meta.com/research/publications/seamless-multilingual-expressive-and-streaming-speech-translation/ 代码链接&#xff1a; GitHub - facebook…

STL容器之string(上)

目录 什么是STL string类 string类常见接口 string类的常见构造函数 string类对象的容器操作 string类对象的访问及遍历操作 string类对象的修改操作 拓展 从本期开始&#xff0c;我们将正式学习C中的STL&#xff0c;美国的麦克阿瑟将军说过&#xff1a;“C不能没有STL就…

游戏运行中突然掉线是什么原因导致的

游戏平稳运行的原因只有一个&#xff0c;掉线的原因各有个的不同。这些不同的原因有常见&#xff0c;也有不常见的。但不管出于什么原因的掉线&#xff0c;带来的损失又是相同的。 首先最常见的原因就是攻击造成的 像CC&#xff0c;DDOS。CC会造成服务器资源的浪费&…

深入理解 Goroutines 和 Go Scheduler

本文将重点帮助您了解 Golang 中的 goroutines。Go 调度程序如何工作以在 Go 中实现最佳并发性能。我会尽力用简单的语言解释,这样你就可以理解了。 我们将介绍什么是操作系统中的线程和进程,什么是并发,为什么实现并发很难,以及 goroutines 如何帮助我们实现并发。然后,…

专业面试刷题网站程序源码

介绍&#xff1a; 一个干净的面试刷题网站&#xff01;专业面试刷题网站&#xff0c;助你成为面试达人&#xff01;支持自由组卷、在线刷题、校招社招斩获大厂offer&#xff0c;求职必备! 用这个刷题代码&#xff0c;助你早日打进狼厂、鹅厂等各大厂&#xff0c;薪水直接等级…

Python装饰器新境界:详解装饰器重载内置操作

更多Python学习内容&#xff1a;ipengtao.com 大家好&#xff0c;我是彭涛&#xff0c;今天为大家分享 Python装饰器新境界&#xff1a;详解装饰器重载内置操作&#xff0c;全文3900字&#xff0c;阅读大约15分钟。 Python装饰器重载内置操作&#xff0c;我们通常指的是使用装饰…

P5729 【深基5.例7】工艺品制作

题目描述 现有一个长宽高分别为 w,x,h 组成的实心玻璃立方体&#xff0c;可以认为是由 111 的数个小方块组成的&#xff0c;每个小方块都有一个坐标 (i,j,k)。现在需要进行 &#xfffd;q 次切割。每次切割给出(x1​,y1​,z1​),(x2​,y2​,z2​) 这 6 个参数&#xff0c;保证…

作为一个的软件测试工程师,想拿到自己想要的薪资,需要具备哪些能力?

如果只是想成为一名低薪的测试工程师&#xff0c;只要掌握功能测试就可以。 但是如果想成为一名高薪的测试工程师&#xff0c;那就要打造你的不可替代性。 可是&#xff0c;你可能会说&#xff1a;“我现在就是个普通职员啊&#xff0c;我就是个普通人&#xff0c;我目前还没有…

go原生http开发简易blog(一)项目简介与搭建

文章目录 一、项目简介二、项目搭建前置知识三、首页- - -前端文件与后端结构体定义四、配置文件加载五、构造假数据- - -显示首页内容 代码地址&#xff1a;https://gitee.com/lymgoforIT/goblog 一、项目简介 使用Go原生http开发一个简易的博客系统&#xff0c;包含一下功能…

【动态规划精选题目】2、路径问题模型

此动态规划系列主要讲解大约10个系列【后续持续更新】 本篇讲解路径问题模型中的6道经典题&#xff0c;会在讲解题目同时给出AC代码 目录 1、不同路径 2、不同路径2 3、珠宝的最大价值 4、下降路径最小和 5、最小路径和 6、地下城游戏 1、不同路径 class Solution { publi…