【JS基础】闭包

在阅读vue源码时发现vue源码大量运用了闭包的技巧来实现某些特性,发现自己并不是真的理解闭包,所以写这篇文章来深入学习闭包

闭包的概念

闭包是 JS 的常见概念,它是一个函数嵌套了内部函数,并返回这个内部函数的形式,返回的内部函数引用了外层函数的变量,就会以闭包的形式保存下来。

MDN上的解释:闭包 (closure)是一个函数以及其捆绑的周边环境状态(lexical environment词法环境)的引用的组合。

可能我们在书写js代码时,不知不觉中已经使用了闭包。我们从下边这段代码具体来看一下:

javascript 复制代码
function foo() {
  var a = 2;

  function bar() {
    console.log(a);
  }

  return bar;
}

var baz = foo();
baz(); // 2------朋友,这就是闭包的效果。

这段代码中,函数foo(),内部有一个局部变量a以及一个函数bar(),并且返回了函数bar。 在foo执行后,通常会觉得foo内部的作用域已经销毁,它内部的a变量应该不复存在。但由于闭包的性质,函数bar()内部引用foo的内部作用域,而这个引用就叫做闭包。

闭包的用处

闭包给JavaScript代码带来了很多的灵活性,它的最大用处有两个,一个是前面提到的可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中。 来看下边这段代码:

javascript 复制代码
// 函数add返回了一个内部函数,这个内部函数持有add的参数的引用。
function add(a){
	return (b)=> b+a
}
const add5 = add(5) // add5通过闭包的性质可以引用add的局部变量a。
add5(1) //6

理解闭包

要理解闭包,需要理解作用域链。还是以上文中的代码为例: 内部函数的作用域链中持有add函数的活动对象,所以在add函数执行完返回内部函数后,add函数的活动对象a仍然不会被销毁,直到持有内部函数的引用的对象全部被销毁后。

使用闭包的注意点

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

相关推荐
踩着两条虫几秒前
AI 驱动的 Vue3 应用开发平台 深入探究(六):双向代码转换之DSL到Vue代码生成
前端·vue.js·ai编程
Wect几秒前
React 中的双缓存 Fiber 树机制
前端·react.js·面试
天才熊猫君1 分钟前
Vue 3 中 Watch 的陷阱:为什么异步操作后创建的监听会泄漏?
前端·javascript
梵得儿SHI2 分钟前
Vue3 生态工具实战进阶:API 请求封装 + 样式解决方案全攻略(Axios/Sass/CSS Modules)
前端·css·vue3·sass·api请求·样式解决方案·组合式api管理
有梦想的咸鱼还是咸鱼吗3 分钟前
前端必会|防抖与节流从原理到实战,解决90%高频事件卡顿问题
前端
阿诺木5 分钟前
Node.js 局域网设备发现:mDNS、UDP 广播和子网扫描
前端
盐焗乳鸽还要砂锅6 分钟前
亲手造一只有灵魂的 AI 小龙虾是种什么体验?
前端·llm·agent
YimWu7 分钟前
Opencode 核心设计-Session会话机制
前端·agent·ai编程
Mintopia10 分钟前
诗词如何影响人:从认知机制到可落地的文本分析技术路线
前端·代码规范
WaywardOne16 分钟前
iOS必看!Deepseek给的Runtime实现原理,通俗易懂~
前端·面试