JavaScript闭包从概念、原理到应用

简介: 闭包的概念:有权访问另一个函数作用域中的变量的函数;一般情况就是在一个函数中包含另一个函数。

何为闭包?

闭包的概念:有权访问另一个函数作用域中的变量的函数;一般情况就是在一个函数中包含另一个函数。

从官方定义我们知道闭包是一个函数,只不过这个函数有[特殊权限],可以访问到另一个函数的作用域。

特殊权限?

因为我们知道函数作用域是独立的、封闭的,外部的执行环境是访问不了的,但是闭包具有这个能力和权限。

我们先来看一段普普通通的函数。

网络异常,图片无法展示
|

控制台输出结果:

1
 2
 3

再来看一段局部变量的代码:

网络异常,图片无法展示
|

控制台输出结果:

红色框是当前的这段局部变量代码。看得出,他并没有累加。

网络异常,图片无法展示
|

当我们调用时,局部变量b为0,然后b+=1后返回一个值,然后,此时,因为全局变量不会消失,而局部变量在运行完后,他是会被JavaScript的运行机制处理掉的。

所以,当你调用第二次,他重新创建了变量b,然后,结果可想而知。

//闭包函数
 function add3(){
     var b= 0;
     return function(){
         return b += 1;
     }
 }

最后,就看看我们的特殊权限。

我们将运算过程使用匿名函数包裹,此时,这个匿名函数在我们的主函数内,就相当于时主函数的儿子,既然是父子关系,自然你父亲对待你和对待其他孩子不一样。这就是里面的这个函数的特殊权限。

所以,他是有权限去访问到内部的b的,当我们调用这个函数,因为有子函数的存在,所以b这个对象不会消失。相当于后继有人,b就不会被机制回收。

所以,此时运行结果,也是1、2、3

随后,贴上三段代码,自行琢磨:

//普通函数(全局变量)
 var a = 0;
 function add(){
     return a += 1;
 }
 //调用3次函数
 for (var i = 0; i <3; i++){
     console.log(add());
 }
 //普通函数(局部变量)
 function add2(){
     var b= 0;
     return b += 1;
 }
 //调用3次函数
 for (var i = 0; i <3; i++){
     console.log(add2());
 }
 //闭包函数
 function add3(){
     var b= 0;
     return function(){
         return b += 1;
     }
 }
 //调用请自行琢磨

最终原理

闭包的实现原理,其实是利用了作用域链的特性,我们都知道作用域链就是在当前执行环境下访问某个变量时,如果不存在就一直向外层寻找,最终寻找到最外层也就是全局作用域,这样就形成了一个链条。

至于什么是作用域链,你可以将其看成函数嵌套。

访问某个变量时,如果不存在就一直向外层寻找。

闭包优势

作用1: 隐藏变量,避免全局污染

作用2: 可以读取函数内部的变量

同时闭包使用不当,优点就变成了缺点:

缺点1: 导致变量不会被垃圾回收机制回收,造成内存消耗

缺点2: 不恰当的使用闭包可能会造成内存泄漏的问题

为什么使用闭包时变量不会被垃圾回收机制收销毁呢?

这里需要了解一下JS垃圾回收机制:

JS规定在一个函数作用域内,程序执行完以后变量就会被销毁,这样可节省内存

使用闭包时,按照作用域链的特点,闭包(函数)外面的变量不会被销毁因为函数会一直被调用,所以一直存在,如果闭包使用过多会造成内存销毁

附言

所以说,我们要通晓一个事物的原理,并且最优化的使用它。知己知彼,方可百战百胜。

相关文章
|
21天前
|
监控 JavaScript 算法
如何使用内存监控工具来定位和解决Node.js应用中的性能问题?
总之,利用内存监控工具结合代码分析和业务理解,能够逐步定位和解决 Node.js 应用中的性能问题,提高应用的运行效率和稳定性。需要耐心和细致地进行排查和优化,不断提升应用的性能表现。
171 77
|
19天前
|
存储 缓存 监控
如何使用内存监控工具来优化 Node.js 应用的性能
需要注意的是,不同的内存监控工具可能具有不同的功能和特点,在使用时需要根据具体工具的要求和操作指南进行正确使用和分析。
63 31
|
20天前
|
JavaScript 前端开发 API
深入理解Node.js事件循环及其在后端开发中的应用
本文旨在揭示Node.js的核心特性之一——事件循环,并探讨其对后端开发实践的深远影响。通过剖析事件循环的工作原理和关键组件,我们不仅能够更好地理解Node.js的非阻塞I/O模型,还能学会如何优化我们的后端应用以提高性能和响应能力。文章将结合实例分析事件循环在处理大量并发请求时的优势,以及如何避免常见的编程陷阱,从而为读者提供从理论到实践的全面指导。
|
19天前
|
JavaScript
如何使用内存快照分析工具来分析Node.js应用的内存问题?
需要注意的是,不同的内存快照分析工具可能具有不同的功能和操作方式,在使用时需要根据具体工具的说明和特点进行灵活运用。
38 3
|
21天前
|
前端开发 JavaScript 关系型数据库
基于 Vue2.0 + Nest.js 全栈开发的后台应用
Vue2 Admin 是一个基于 Vue2 和 Ant Design Pro 开发的前端项目,配合 Nest.js 构建的后端,提供了一个完整的全栈后台应用解决方案。该项目支持动态国际化、用户权限管理、操作日志记录等功能,适合全栈开发者学习参考。线上预览地址:https://vue2.baiwumm.com/,用户名:Admin,密码:abc123456。
|
22天前
|
JavaScript 前端开发 API
Vue.js 3:深入探索组合式API的实践与应用
Vue.js 3:深入探索组合式API的实践与应用
|
22天前
|
JavaScript 前端开发 API
Vue.js响应式原理深度解析:从Vue 2到Vue 3的演进
Vue.js响应式原理深度解析:从Vue 2到Vue 3的演进
51 0
|
26天前
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
25 1
JavaScript中的原型 保姆级文章一文搞懂