对闭包的理解以及使用

简介: 对闭包的理解以及使用

前言🚴‍♀🚴‍♀


在我们学习js的过程中,有一个重要的概念,在面试中经常会被问到,这个概念就是闭包,那么闭包是什么,以及它到底有什么用,今天我们就来详细的解释理解一下闭包


闭包的理解和使用🤔🤔


  1. 闭包的概念
  2. 为什么使用闭包
  3. 闭包的好处和坏处


闭包的概念


闭包的概念可以理解为在一个函数里面又创建了另一个函数,这个创建的新函数可以访问到当前函数的变量。

下面是一段代码实例

function outerFunction() {
  var outerVar = 'I am outside!';
  function innerFunction() {
    console.log(outerVar);
  }
  return innerFunction;
}
var inner = outerFunction();
inner(); // 输出 "I am outside!"

首先定义了一个函数outerFunction,在这个函数中定义了一个局部变量outerVar,并且在函数outerFunction中定义了一个函数

innerFunction他的作用是打印outerVar这个变量,这个时候innerFunction这个函数访问到了outerFunction函数中的局部变量,此时就构成了闭包

那么相信大家现在肯定还是模棱两可,肯定不理解为什么要使用闭包,这到底有啥用呢?


为什么要使用闭包??


  • 使用闭包的第一用途就是可以让我们在函数外部访问到函数内部的变量,通过使用闭包,可以让我们在外部调用闭包函数,从而在外部访问到函数内部的变量。
  • 另一个用途就是使已经结束运行的函数的变量继续保存在内存中,这是因为闭包函数保留了对这个变量的引用。所以导致这个变量不会被回收。
  • 我们同样可以使用闭包来进行封装函数,这在项目中可能会用到。

注意:由于闭包会将函数中的变量保存在内存中,这对内存的消耗较大,所以注意不要滥用闭包


利用闭包写一个防抖函数


防抖函数使用的也比较多,我们在输入的时候当停止输入一段时间之后的时候我们才发送请求

这个功能就是当停止输入500毫秒时,才会将内容追加到output这个元素中。

下面这个就是对防抖函数进行了封装,使用了闭包的思想。

input.addEventListener("input", debounceFn((e) => {
      console.log(e);
    //获取输入的值
      const value = input.value;
      output.innerText += `发送API请求,参数:${value} \n`;
    }, 500));
function debounce(fn, delay = 0) {
   //接收两个参数,一个fn函数,一个延时的事件delay
  // 返回一个新的防抖函数
  // 即使函数在 delay 时间段内多次被调用,也只会在最后一次函数被调用的 delay 时间结束后执行
  let timer = null;
   //返回值是一个函数,使用了闭包。
   //注意这里的参数是当input事件被触发时,会自动传入一个参数,这个返回的闭包函数接收这个参数。
  return function (e) {
    if (timer) clearTimeout(timer);
    timer = setTimeout(()=>{
        //闭包函数可以访问外部函数的传入的参数,调用这个函数并且将参数传入。
        fn(e)
        //fn函数就是传递的那个箭头函数,这样就达到了延时调用的目的
    },delay)
  }
}
module.exports = debounce;

以上是我举得一个例子,我们在实际开发过程中会有很多场景会使用到闭包的思想,比如说使用promise封装一个函数,这个时候也会使用闭包的思想。


总结:


我们在学习的时候可以不断的进行总结归纳,这样我们就可以达到事半功倍的效果。

相关文章
|
Prometheus Cloud Native 应用服务中间件
nginx 代理 prometheus
nginx 代理 prometheus
373 0
|
开发工具 git iOS开发
Mac 安装软件包管理工具Homebrew
Mac 安装软件包管理工具Homebrew
|
Python
python pyqt5 cmd 命令行 控制台 打印 print 输出 显示打印内容 实时显示 界面
python pyqt5 cmd 命令行 控制台 打印 print 输出 显示打印内容 实时显示 界面
639 0
|
JavaScript
在vue3中使用markdown编辑器
在vue3中使用markdown编辑器
在vue3中使用markdown编辑器
|
6月前
|
缓存 自然语言处理 JavaScript
JavaScript中闭包详解+举例,闭包的各种实践场景:高级技巧与实用指南
闭包是JavaScript中不可或缺的部分,它不仅可以增强代码的可维护性,还能在模块化、回调处理等场景中发挥巨大作用。然而,闭包的强大也意味着需要谨慎使用,避免潜在的性能问题和内存泄漏。通过对闭包原理的深入理解以及在实际项目中的灵活应用,你将能够更加高效地编写出简洁且功能强大的代码。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
10月前
|
前端开发 开发者
权重计算的优先级规则是怎样的?
【10月更文挑战第28天】CSS权重计算的优先级规则明确了不同类型选择器及选择器组合在应用样式时的先后顺序,帮助开发者准确地控制页面元素的样式表现,避免样式冲突和意外的显示效果,从而实现预期的页面设计和布局。在实际开发中,理解和运用这些规则是编写高效、可维护CSS代码的关键
|
6月前
|
存储 Java 关系型数据库
ssm151大学生就业信息管理系统+jsp(文档+源码)_kaic
大学生就业信息管理系统基于现代经济快速发展和信息化技术的升级,旨在通过软件工具提升数据管理效率。该系统利用SSM框架、Java语言和Mysql数据库开发,实现数据的科学化、规范化与自动化管理。系统界面简洁美观,功能模块布局合理,提供高效的数据处理能力,并注重数据安全。通过此系统,管理者能够快速处理大量信息,提高工作效率,同时确保数据的安全性和可靠性。关键词:大学生就业信息管理系统;SSM框架;Mysql;自动化。
|
Linux 文件存储
定期删除服务器n天前日志
该内容介绍了如何在Linux中删除指定目录及子目录下超过n天的文件。使用`find`命令结合参数`/nas/logs/* -maxdepth 3 -type d -ctime +6`查找6天前的目录,然后通过`xargs rm -rvf`进行删除。在CentOS中,可以编辑crontab设置定时任务,例如每天1点执行此删除操作:`0 1 * * * find /nas/logs/* -maxdepth 3 -type d -ctime +6 | xargs rm -rvf`,其中`+6`可按需调整。
170 2
|
存储 缓存 Java
Java本地高性能缓存实践问题之使用@CachePut注解来更新缓存中的数据的问题如何解决
Java本地高性能缓存实践问题之使用@CachePut注解来更新缓存中的数据的问题如何解决
285 0
|
Java 数据安全/隐私保护
Java使用PDFBox开发包实现对PDF文档内容编辑与保存
Java使用PDFBox开发包实现对PDF文档内容编辑与保存
456 7