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规定在一个函数作用域内,程序执行完以后变量就会被销毁,这样可节省内存

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

附言

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

posted @ 2022-05-23 20:29  JanYork(小简)  阅读(26)  评论(0编辑  收藏  举报