【JavaScript基础】深入了解JS的闭包

    闭包是JS中一个重要的概念,也是面试中的重点,相信大家在面试中都会碰到这样的几个问题:

      1. 请你说说什么是闭包?

      2. 请你说说闭包有哪些应用?

      3. 请你说说闭包有哪些优缺点?

    大家都是怎么回答这几个问题的呢?在网上的文章中对闭包的概念都有不同的说法,导致很多人对闭包没有一个清晰的概念,接下来就和我一起探究什么是闭包。

    首先看一下非常官方的解释:函数和对其周围状态(词法环境)的引用捆绑在一起构成闭包closure)。也就是说一个闭包函数和其词法环境组成了闭包,如果对闭包没有清晰的概念,这看起来似乎难以理解。我们可以有这样一个简单的概念:闭包函数是声明在函数中的内部函数,内部函数可以引用其外部函数的变量,通过闭包可以使这种引用不会随着外部函数寿命终止而销毁。所以闭包可以成为连接函数内部和外部的桥梁,使得其它函数可以使用函数内的变量。看到这里可能还是一头雾水,不着急,接下来让我们来看一下JS的作用域概念以及闭包的产生。

    JS中的执行环境定义了一个关联的变量对象,环境中定义的变量和函数都保存在这里,每个函数都有一个执行环境,当函数执行时,函数的环境会进入栈中,执行完之后再弹出,交出控制权。当函数执行时,它的变量对象就是活动对象(AO),函数执行完AO对象就被释放了,下次执行时会重新创建。在一个环境中执行时,会创建变量对象的一个作用域链,看下面这段简单的代码:

    下图展示了这个例子的作用域链,其中最外层的作用域为全局作用域,在Web浏览器中,全局执行环境为 window 对象。圆形代表了一个特定的执行环境,内部作用域可以访问外部作用域而外部则不能访问内部作用域,这就是作用域链:一级一级地往上搜索。

 

    目前我们已经了解了JS的执行环境以及作用域链,下面就来通过一个简单的例子创建一个闭包: 

    这里外部函数将内部的 closure 函数返回形成闭包,通过执行 outer 函数将其赋值给 adder5 函数。outer函数执行完毕,我们知道,此时 outer 函数的活动对象 AO 已经被内存销毁,普通情况下,其作用域下的 x 变量应该被垃圾回收机制回收了,但是这里闭包函数的作用域链包含了 closure 内部的作用域、outer函数的作用域和全局作用域,这里的 x 变量不会被垃圾回收机制回收,直至闭包的引用被销毁。让我们看一段示例代码更深入了解闭包:

    可以看到 adder5 和 adder2 分别创建了两个闭包,他们有相同的函数定义但是却有独立的执行环境,外部函数 adder 每执行一次就创建一个新的地址。

    重要概念:闭包取得的是同一地址外部函数中任何变量最后的值。

    下面来看两个例子:

    

    

    了解了闭包之后,我们接下来看看闭包有哪些应用:

  • 实现工厂函数:如上面提到的 adder 函数,是一个实现了创建将传入的参数和指定的值相加求和的函数。
  • 模块化应用,摸拟私有方法:在其它面向对象的语言例如 java 中,可以创建一个私有方法,只允许被同一个类的其它方法所调用,原生 JS 不提供这种 API,但我们可以使用闭包来模拟私有方法。私有方法不仅仅有利于限制对代码的访问:还提供了管理全局命名空间的强大能力,避免非核心的方法弄乱了代码的公共接口部分。如以下示例:    
  • 实用的例子:
    • 防抖:在一些按钮中可能用户在很短的间隔内多次点击,此时会造成事件不必要地重复触发,防抖使得在一定时间内连续调用的函数只执行一次。
    • 节流: 例如浏览器的滚动条 onscroll 事件等触发频率非常高,重复执行的代码块中可能包含 ajax 请求,节流的作用就是减少一些过高频率的调用来节约资源,使得一段时间内核心代码只执行一次。
    • 利用闭包实现多个用于改变某一字号的函数:

 

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章