当前位置: 首页 > news >正文

JavaScript相关(二)——闭包

了解闭包的前提必须得了解什么是作用域链。也就是(一)的内容。

参考:
浏览器工作原理与实践
破解前端面试:从闭包说起

闭包

闭包是一个可以访问外部作用域中变量的内部函数,因为内部函数引用了外部函数的变量,导致这些变量无法被回收,将持久保存在作用域内,这就形成了一个闭包。
这些被引用的变量直到闭包被销毁时才会被销毁。

在 JavaScript 中,根据词法作用域的规则,内部函数总是可以访问其外部函数中声明的变量,当通过调用一个外部函数返回一个内部函数后,即使该外部函数已经执行结束了,但是内部函数引用外部函数的变量依然保存在内存中,我们就把这些变量的集合称为闭包。比如外部函数是 foo,那么这些变量的集合就称为 foo 函数的闭包。
闭包必须要引用到外部函数的变量,如果没有引用到的话,外部函数执行完之后,JS引擎执行垃圾回收时会认为这个外部函数已经执行完了,执行环境中没有变量被正在引用或者使用,所以可以销毁。

闭包的回收

如果闭包是一个全局变量,页面关闭时它才会被回收,如果是局部变量,则引用它的函数执行完毕后,JS引擎垃圾回收时会将它销毁。
如果这个全局变量的闭包占用了许多内存,又以后不再使用的话,就会造成内存泄漏(该内存空间使用完毕之后未被回收)。
因此如果该闭包会一直使用,那么它可以作为全局变量而存在;但如果使用频率不高,而且占用内存又比较大的话,那就尽量让它成为一个局部变量。

使用

其实我们经常使用到了闭包却没有发现。

  1. 防抖节流,setTimeout

    (function autorun(){let x = 1;setTimeout(function log(){console.log(x);}, 10000);
    })();
    

    变量 x 将一直存活着直到定时器的回调执行或者 clearTimeout() 被调用。 如果这里使用的是 setInterval() ,那么变量 x 将一直存活到 clearInterval() 被调用。

  2. DOM节点事件

    (function autorun(){let x = 1;$("#btn").on("click", function log(){console.log(x);});
    })();
    

    当变量 x 在事件处理函数中被使用时,它将一直存活直到该事件处理函数被移除。

  3. 异步事件 Promise

    (function autorun(){let x = 1;fetch("http://").then(function log(){console.log(x);});
    })();
    

    变量 x 将一直存活到接收到后端返回结果,回调函数被执行。

http://www.lryc.cn/news/296165.html

相关文章:

  • MySQL的DDL语言
  • <网络安全>《21 工业安全审计系统》
  • 实例分割论文阅读之:《Mask Transfiner for High-Quality Instance Segmentation》
  • 阿里 EasyExcel 表头国际化
  • 跨境电商新风潮:充分发挥海外云手机的威力
  • Kubernetes实战(二十七)-HPA实战
  • IDEA 配置以及一些技巧
  • Android 11 访问 Android/data/或者getExternalCacheDir() 非root方式
  • Eclipse安装配置、卸载教程(Windows版)
  • 正点原子--STM32基本定时器学习笔记(2)
  • 学习笔记:正则表达式
  • 03-抓包_封包_协议_APP_小程序_PC应用_WEB应用
  • C语言笔试题之实现C库函数 strstr()(设置标志位)
  • 什么是IDE,新手用哪个IDE比较好
  • Flask 入门6:模板继承
  • 欢迎来到操作系统的世界
  • 寒假作业-day5
  • 互联网加竞赛 基于深度学的图像修复 图像补全
  • 用于制作耳机壳的UV树脂耳机壳UV胶价格高不高?
  • 【开源】JAVA+Vue+SpringBoot实现房屋出售出租系统
  • Golang 并发 生产者消费者模式
  • Win32 SDK Gui编程系列之--ListView自绘OwnerDraw
  • 深度学习本科课程 实验5 循环神经网络
  • Redis篇之过期淘汰策略
  • 【Kubernetes】kubectl top pod 异常?
  • 前后端分离项目:前端的文件夹应该叫什么名字,后端呢
  • 2024.2.6
  • 如何在 Microsoft Azure 上部署和管理 Elastic Stack
  • 在Visual Studio中引用和链接OpenSceneGraph (OSG) 库
  • [缓存] - Redis