对闭包的理解?使用场景?注意事项?

什么是闭包

闭包: 有权利访问另一个函数作用域中的变量

  • 闭包可以重用一个变量,且保证这个变量不会被污染
  • 这些变量的值始终保持在内存中,不会被垃圾回收机制处理

闭包的缺点: 由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能导致内存泄露。解决方法是,在退出函数之前,将不使用的局部变量全部删除。

为什么要用闭包: 使用场景 : 防抖、节流、函数套函数避免全局污染

闭包原理: 函数执行分成两个阶段(预编译阶段和执行阶段) ​

  1. 在预编译阶段,如果发现内部函数使用了外部函数的变量,则会在内存中创建一个"闭包"对象并保存对应变量值,如果已存在"闭包",则只需要增加对应属性值即可。
  2. 执行完后,函数执行上下文会被销毁,函数对"闭包"对象的引用也会被销毁,但其内部函数还持用该"闭包"的引用,所以内部函数可以继续使用"外部函数"中的变量

​ 利用了函数作用域链的特性,一个函数内部定义的函数会将包含外部函数的活动对象添加到它的作用域链中,函数执行完毕,其执行作用域链销毁, 但因内部函数的作用域链仍然在引用这个活动对象,所以其活动对象不会被销毁,直到内部函数被烧毁后才被销毁。

闭包的使用场景

  • 模块化开发:利用闭包实现模块化开发,将不同的功能封装成独立的模块,提高代码的可维护性和复用性。
  • 懒加载:通过闭包延迟初始化某些资源,只有在真正需要时才进行加载,从而减少初始加载时间。
  • 缓存机制:利用闭包保存计算结果,避免重复计算,提升应用性能。
  • 防抖与节流:结合闭包实现防抖(Debouncing)和节流(Throttling)功能,控制事件触发频率,防止过度响应用户操作。
  • 柯里化

闭包的注意事项

虽然闭包非常强大,但在实际开发中也需要谨慎使用,以避免潜在的性能问题和内存泄漏。

1. 内存泄漏

闭包会延长变量的生命周期,导致它们不能及时被垃圾回收机制释放。特别是在长时间运行的应用程序中,如果不小心管理闭包,可能会占用大量内存。

2. 避免不必要的闭包

尽量减少不必要的闭包使用,特别是那些只在局部范围内使用的变量。可以通过将变量声明移到函数外部或使用立即执行函数表达式(IIFE)来限制变量的作用域。

3. 及时解除引用

对于不再需要的闭包,应该主动解除对相关变量的引用,以便让垃圾回收机制能够及时清理内存。例如,在移除事件监听器时,记得调用removeEventListener方法。

4. 性能优化 闭包的使用会影响JavaScript引擎的优化效果,因为闭包的存在使得变量无法被内联或提前分配。为了提高性能,可以考虑以下几种优化策略:

  1. 减少闭包层数:尽量简化嵌套结构,避免过多的闭包层次
  2. 避免频繁创建闭包:如果某个函数会被频繁调用,尽量避免每次都创建新的闭包,而是复用已有的闭包。
  3. 使用类和原型继承:对于面向对象编程,可以考虑使用类和原型继承代替闭包,以降低内存消耗和提
相关推荐
八了个戒4 小时前
「数据可视化 D3系列」入门第三章:深入理解 Update-Enter-Exit 模式
开发语言·前端·javascript·数据可视化
胚芽鞘6815 小时前
vue + element-plus自定义表单验证(修改密码业务)
javascript·vue.js·elementui
小陈同学呦5 小时前
聊聊双列瀑布流
前端·javascript·面试
键指江湖5 小时前
React 在组件间共享状态
前端·javascript·react.js
烛阴6 小时前
零基础必看!Express 项目 .env 配置,开发、测试、生产环境轻松搞定!
javascript·后端·express
诸葛亮的芭蕉扇6 小时前
D3路网图技术文档
前端·javascript·vue.js·microsoft
徐小夕6 小时前
花了2个月时间研究了市面上的4款开源表格组件,崩溃了,决定自己写一款
前端·javascript·react.js
拉不动的猪7 小时前
UniApp金融理财产品项目简单介绍
前端·javascript·面试
苏卫苏卫苏卫7 小时前
【Vue】案例——To do list:
开发语言·前端·javascript·vue.js·笔记·list
聪明的墨菲特i8 小时前
React与Vue:哪个框架更适合入门?
开发语言·前端·javascript·vue.js·react.js