闭包原来并没有那么难!一文带你深入理解JavaScript的闭包

Posted 程序猿就是我

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了闭包原来并没有那么难!一文带你深入理解JavaScript的闭包相关的知识,希望对你有一定的参考价值。

对于那些有一点 javascript 使用经验但从未真正理解闭包概念的人来说,理解闭包可以看作是某种意义上的重生,但是需要付出非常多的努力和牺牲才能理解这个概念。

                                                                                                                             ——《你不知道的JavaScript》

在JavaScript中的”神兽“,很多小伙伴会觉得闭包这玩意太恶心了,怎么着都理解不了...其实刚接触JavaScript的时候我也是这样。

但是!!!闭包真的非常重要!非常重要!非常重要!重要的事情说三遍!!!

接下来,我会带着大家真正意义上的理解闭包。

一 、闭包概念描述

《JavaScript权威指南》这样描述:

函数对象可以通过作用域链相互关联起来,函数体内部的变量都可以保存在函数作用域内,这就是叫闭包。

《你不知道的JavaScript》这样描述:

闭包是基于词法作用域书写代码时所产生的自然结果。

当函数可以记住并访问所在的词法作用域时,就产生了闭包,即使函数是在当前词法作用域之外执行。

从以上的描述。要真正理解闭包概念,要先深刻理解以下几个知识点,可以称为闭包前置知识点

二 、闭包前置知识点

1、作用域

《你不知道的JavaScript》这样描述:

作用域可以理解为一套规则,来定义变量存储在哪里,使用的时候怎么找到他们。

作用域是负责收集并维护由变量组成的一系列查询,并实施一套非常严格的规则,确定当前执行的代码对变量的访问权限。

而我是这么理解的:作用域就是一个独立的对象,里面存储了变量,在对象中定义了一系列的规则,来限制外部访问里面的变量,来区分变量让不同作用域下同名变量不会有冲突。

如下图所示,红框区域就是一个作用域

2、作用域链

2.1 概念

作用域链可以理解为一个全局对象。在不包含嵌套的函数体,作用域链上有两个对象,第一个定义函数参数和局部变量的对象,第二个是全局对象。在一个嵌套的函数体内,作用域链上至少有三个对象。

举个栗子,如图所示这是不包含嵌套的函数体的作用域链

举个栗子,如图所示这是包含嵌套的函数体的作用域链

2.2 使用规则

当一个块或函数嵌套在另一个块或函数中时,就发生了作用域的嵌套。因此,在当前作用域中无法找到某个变量时,就会在外层嵌套的作用域中继续查找,直到找到该变量,或抵达最外层的作用域(也就是全局作用域)为止。

举个栗子,如图所示

比如要在作用域3中查找变量a的值,但是发现作用域3中没有变量a,就去作用域2中找,发现了变量a就停止了查找。

注意:在查找过程中不会跑去作用域4中查找。因为作用域4不是作用域3的外层嵌套作用域。

2.3 创建规则

理解作用域链的创建规则对理解闭包是非常重要的

首先我们定义一个函数的时候,开始就创建并保存了一条作用域链,里面包含一个全局作用域对象,当函数被调用时,会创建一个新对象(作用域)来存储它的变量,并将这个对象添加到开始创建的作用域链上,同时创建一条新的表示调用函数的作用域的“链”。

仔细琢磨一下下面代码,就可以理解。

function foo(a){
    let b = a*3;
    function bar (c){
        console.log(a,b,c)
    }
    bar(b*2)
}
foo(2);//2,6,12
foo(3);//3,9,18

 

3、词法作用域

词法作用域是作用域的一个工作模型。

词法作用域就是定义在词法阶段的作用域。换句话说,词法作用域是由你写代码时将变量和块作用域写在哪里来决定的。

举个栗子,如下图我把let b = a *3 写在foo(){...}这个函数作用域中,那么变量b的作用域就是foo(){...}这个函数作用域。

三、解释闭包下面以一个非常典型的闭包例子来解释闭包。

function foo(){
    let a = 2;
    function bao(){
        console.log(a)
    }
    return bao
}
let bar=foo();
bar();

 

上面代码中,闭包是哪个,是foo(){...},还是bao(){...}。用Chrome断点调试一下就知道。

闭包是foo(){...}这个函数,再看一下计算机科学文献是怎么定义闭包的。

这个术语非常古老,是指函数中的变量可以被隐藏在作用域之内,因此看起来是函数将变量“包裹”起来。

上面foo(){...}将变量a隐藏在它的作用域内,从代码上看把变量a包含在函数内。

看到这里你也许会这么想,为什么下面的函数pyh不是闭包,它也把变量b包含在函数内。

function pyh(){
    let b = 2;
    console.log(b)
}

 

再读一下《JavaScript权威指南》中怎么表述闭包

函数对象可以通过作用域链相互关联起来,函数体内部的变量都可以保存在函数作用域内,这就是叫闭包。

注意上面说函数内的变量可以保存在函数作用域内,那么pyh函数内的变量b可以保存在pyh(){...}这个函数作用域内。

显然不能的,因为pyh函数执行后,pyh(){...}这个作用域会被销毁,自然变量b就不存在,不会被保存。

浏览器垃圾回收策略,规定如果一个对象没有被引用,会被当垃圾一样回收并销毁。

那怎么不让pyh(){...}作用域不会销毁,很简单,作用域也是个对象,让它被引用,就不会被销毁,这样作用域中的变量b自然也得以保存,这样就实现闭包。

怎么让它被引用?可以通过作用域链来实现。正如上面所说函数对象可以通过作用域链相互关联起来。

对pyh函数进行改造一下

function pyh(){
    let b = 2;
    function bao(){
        console.log(b)
    }
    bao();
}

 

我们用作用域的创建规则来讲解一下pyh(){...}作用域怎么被引用。

pyh函数定义时创建了一条作用域链A,调用时将pyh(){...}作用域添加到作用域链A上,bao函数定义时创建了一条作用域链B,调用时将bao(){...}作用域添加到作用域链B,同时创建一条表示函数调用作用域的“链”,将作用域链A和作用域链B连在一起,相当pyh(){...}作用域嵌套了bao(){...}作用域。

这时候,bao函数中的console.log(b)执行时会去寻找变量b,发现bao(){...}作用域中没有,就会根据作用域链的使用规则去pyh(){...}作用域中寻找,找到后使用其中的变量b,这就对pyh(){...}作用域进行引用,导致pyh函数调用后pyh(){...}作用域本来是会被销毁,但是它被bao函数引用了,导致无法销毁得以保存,自然作用域中的变量b也得以保存,这时pyh函数就变成了闭包。

当然pyh函数不是一个完整的闭包,它只运用到闭包规则的一部分,这部分是闭包规则的核心,非常重要。

返回最上面那个典型的闭包例子foo函数,给大家解释一下foo函数怎么形成闭包。

在foo函数外部定义变量bar来存储foo函数返回的结果。foo函数定义时创建一条作用域链A,调用时foo(){...}作用域被添加到作用域链A,bao函数定义时创建了一条作用域链B,调用时将bao(){...}作用域添加到作用域链B,同时创建一条表示函数调用作用域的“链”,将作用域链A和作用域链B连在一起,相当foo(){...}作用域嵌套了bao(){...}作用域。

在foo函数执行完毕时候,返回bao函数,并赋值到外部变量bar上,当执行bar();时,相当调用bao函数,bao函数中的console.log(a)执行时会去寻找变量a,发现bao(){...}作用域中没有,就会根据作用域链的使用规则去foo(){...}作用域中寻找,找到后使用其中的变量a,这就对foo(){...}作用域进行引用,导致foo函数调用后foo(){...}作用域本来是会被销毁,但是它被bao函数引用了,导致无法销毁得以保存。

大家注意了,bao函数调用后bao(){...}作用域会被销毁,这时候foo(){...}作用域的引用就会消失,也会被销毁。但是,但是foo函数返回值是bao函数,被外部变量bar引用了,被赋值给外部变量bar,这就导致foo(){...}作用域是无法销毁,那么作用域foo(){...}中的变量a就可以得以保存。这是foo函数就形成了一个闭包,foo函数把变量a包裹起来。

理解闭包过程中,要切记一点,函数调用结束后,在函数定义时创建的作用域链式不会马上消失的。

四、再次解释闭包

上面是通过作用域链来解释闭包,大家看起来是不是云里雾里的。其实闭包没那么神秘,难以理解。

在《你不知道的JavaScript》中写的特别好。

JavaScript中闭包无处不在,你只需要能够识别并拥抱它,闭包是基于词法作用域书写代码时所产生的自然结果。

当函数可以记住并访问所在的词法作用域时,就产生了闭包,即使函数是在当前词法作用域之外执行。

还是以一个非常典型的闭包例子来解释闭包。

function foo(){
    let a = 2;
    function bao(){
        console.log(a)
    }
    return bao
}
let bar=foo();
bar();

首先,我们很清楚知道bao函数的内部作用域3能够访问bao函数的词法作用域2。

然后bao函数被当作foo函数的返回值。在foo函数执行后,其返回值(也就是内部的bao函数)赋值给变量bar并调用bar(),实际上是调用了内部的bao函数。这时bao函数在自己定义的词法作用域2以外的地方(作用域3)执行。

在foo函数执行后,其内部作用域2通常会被销毁,因为浏览器垃圾回收器会将不被引用的对象回收销毁。 事实上foo函数的内部作用域2依然存在,没有被回收。谁在引用这个内部作用域2?是bao函数中变量a在引用。

当变量bar被实际调用(调用内部bao函数),它可以访问bao函数定义时的词法作用域2,因此它可以访问变量a。这时bao函数在定义时的词法作用域2以外的地方被调用。仍然可以继续访问定义时的词法作用域。 这就是闭包。

按照《你不知道的JavaScript》中描述闭包可以这样描述:

当bao函数可以记住并访问所在的词法作用域2时,就产生了闭包(foo函数),bao函数不在词法作用域2中被调用仍然可以访问词法作用域2。

这样描述闭包是不是清楚了很多,不要特意去想如何实现闭包,闭包就是基于词法作用域书写代码时所产生的自然结果。

五、闭包的应用

1、私有化全局变量

说起闭包的作用,我不禁想起我第一次接触闭包的场景。那时在做个轮播图,需要一变量来存储点击按钮的次数,当时想都没想就在全局这么写

var prevCount = 0;
var nextCount = 0;

 

在后面审核代码时候,就挨训了,经理就问我一句话,如果其它地方的变量名跟这一样,那怎么办?你用闭包把这段代码重新改造一下。

接着就去看闭包,结果看的云里雾里的,只能再问经理。经理随口就说用立即执行函数。

<div id="prev">上一张</div>
<script>
    (function() {
        var prevCount = 0;
        var nextCount = 0;
        function prev() {
            //轮播的代码
            prevCount++;
            console.log(prevCount)
        }
        $(\'#prev\').click(prev)
    })()
</script>

 

这样变量prevCount和变量nextCount就变成wheel私有的。

2、外部访问函数内部变量

众所周知,外部是访问不到函数内部的变量。

function foo(){
    let a =\'我是foo函数内部的变量a\'
}
console.log(a);//Uncaught ReferenceError: a is not defined

 

那么怎么在外部访问到foo函数内部的变量a,闭包带你实现。

function foo(){
    let a =\'我是foo函数内部的变量a\'
    function bao(){
        return a
    }
    return bao
}
let b=foo();
console.log(b());//我是foo函数内部的变量a

 

也许你会觉得这个没必要用的闭包,这样就行

function foo(){
    let a =\'我是foo函数内部的变量a\'
    return a
}
let b=foo();
console.log(b);//我是foo函数内部的变量a

 

那么如果你要修改foo函数内部的变量a呢?

function foo(){
    let a =\'我是foo函数内部的变量a\'
    function bao(c){
        a = c
        return a
    }
    return bao
}
let b=foo();
console.log(b(\'我修改了foo函数内部的变量a\'));//我修改了foo函数内部的变量a

 

3、构建私有作用域
一个很经典的例子,就是for循环中闭包应用。

var arr=[]
for(var i = 0; i<10;i++){
    arr[i]=function(){
        console.log(i)
    }
}
arr[6]()

 

上面arr[6]()输出的是10,而不是6,那么要怎么做才输出6。

在块级作用域出现前,我们使用闭包构建私有作用域解决。

var arr=[]
for(var i = 0; i<10;i++){
    (function(i){
        arr[i]=function(){
            console.log(i)
        }
    })(i)
}
arr[6]()

 

4、模块输出

function module() {
    let n = 0;
    function get(){
    	console.log(n)
    }
    
    function set(){
    	n++;
    	console.log(n)
    }
    return {
    	get:get,
    	set:set
    }
}
let a = module();
let b = module();
a.get();//0
a.set();//1
b.get();//0

 

a和b都用于自己的私有作用域,互不影响

六、闭包的副作用

1、在函数中使用定时器,形成闭包,导致内存泄露

function foo(){
    var a =1
    setInterval(function(){
        console.log(a)
    },2000)
}
foo()

 

以上在foo函数中使用了定时器,是foo函数成为闭包,本来foo函数执行后变量a会被回收销毁,但是定时器中调用函数有引用到变量a,导致变量a无法被销毁一直存在内存中。应该使用个外部变量赋值定时器,以便停止。

let timer = null;
function foo(){
    var a =1
    timer=setInterval(function(){
        console.log(a)
    },2000)
}
foo();
clearInterval(timer)

 

2、闭包返回被外部变量引用,导致内存泄露

function foo() {
	var a = 1
 
	function bao() {
		console.log(a)
	}
	return bao
}
 
let bar = foo();
bar();
bar = null;

 

以上在foo函数中返回了bao函数,foo函数又把执行结果,赋值给变量bar,执行bar(),即是执行函数bao,而函数bao对变量a有引用,导致foo函数执行后变量a,不能释放,导致内存泄露。

可以通过将bar = null,断开变量bar对变量a的引用,释放变量a。

如果想要更高效、更系统地学会javascript,最好采用边学边练的学习模式。

如果觉得javascript的学习难度较高,不易理解,建议采用视频的方式进行学习,推荐一套看过讲的很不错的视频教程,可点击以下链接观看:

https://www.bilibili.com/video/BV1Ft411N7R3

以上是关于闭包原来并没有那么难!一文带你深入理解JavaScript的闭包的主要内容,如果未能解决你的问题,请参考以下文章

一文带你深入理解 Spring 事务原理

一文带你弄懂 CDN 技术的原理

一文带你弄懂 CDN 的技术原理!

[万字长文]一文带你深入了解Android Gradle

深入理解javascript原型和闭包(转)

深入理解javascript原型和闭包 (转)