javascript 闭包详解

发表于:2018-7-23 17:20

字体: | 上一篇 | 下一篇 | 我要投稿

 作者:淘淘笙悦    来源:简书

  闭包(Closure)是前端开发者经常会听到的一个概念,也是我们在求职面试中经常会遇到的题目之一。透过表象去理解闭包的本质,对前端开发者来说是进阶的必经之路。
  闭包跟执行上下文中的变量对象和作用域链有着千丝万缕的关系,深刻理解变量对象以及作用域链对理解闭包的本质有很大的帮助。
  MDN 中对闭包的定义是:闭包是函数和声明该函数的词法环境的组合。
  我认为 MDN 中对闭包的定义比较抽象以致并不能让我们很清楚地知道闭包是什么东西。在这里我直接给闭包做一个我认为比较本质且好理解(前提当然是你对执行上下文系列已经有相应的了解啦)的定义:闭包是指其所在执行上下文已经出栈,但仍访问了其所在执行上下文变量对象的函数。
  我们经常问,闭包是什么?其实从上述的定义我们可以很简单地知道,闭包是一个函数。但跟普通的函数不一样,闭包是具有特殊能力的函数。
  从上述的定义我们可以知道,闭包具有两个特点,即
  其所在执行上下文已经出栈
  访问了其所在执行上下文变量对象
  这里需要注意的是,「其所在执行上下文」指的是闭包所在函数对应的执行上下文,而不是指闭包本身所对应的执行上下文。
  一个简单的能够产生闭包的例子是,在函数 A 中创建了函数 B 并且返回函数 B,当函数 B 执行时,如果访问了 A 中的变量,则产生了闭包。
   
  在大部分书中,对闭包的概念解释为:能够读取其它函数内部变量的函数。在上述的简单例子中,即以函数 B 指代闭包,在我们平时开发过程中,也经常会以函数 B 来指代闭包。而在 chrome 的开发者工具中,则会以函数 A 指代闭包。
  那么,闭包的本质又是什么呢?
  我们都知道,javascript 拥有自动的垃圾回收机制,当一个值失去引用的时候,垃圾回收机制会根据特殊的算法找到它并将其回收。
  函数的执行上下文在出栈后,其变量对象会失去引用等待被回收,而闭包的存在会阻止这一过程,因为闭包的作用域链包含了其所在执行上下文的变量对象。
  举个例子来说明其中的过程,假设有一个 javascript 文件中包含如下代码
   
  在代码执行过程中,执行上下文栈的行为如下
   
  从执行上下文栈的行为我们可知,在 fn2 函数执行的时候,其实 fn1 上下文已经出栈了,按照 javascript 的垃圾回收机制,fn1 上下文的变量对象失去引用后会被垃圾回收机制回收,但由于在 fn2 上下文的作用域链包含了 fn1 上下文的变量对象,所以 fn1 上下文的变量对象不会被垃圾回收机制回收。
  我在之前的文章说过,函数作用域是在函数被定义(声明)的时候确定的。每一个函数都会包含一个 [[scope]] 内部属性,在函数被定义的时候,该函数的 [[scope]] 属性会保存其上层上下文的变量对象,形成包含上层上下文变量对象的层级链。
  从代码中可知,在 fn2 函数被定义的时候,其上层上下文包括了 fn1 上下文和全局上下文
  
  当 fn2 被调用的时候,其执行上下文被创建并入栈,此时会生成变量对象并将该变量对象添加进作用域链的顶端,并且将 [[scope]] 添加进作用域链
    
  可见,fn2 上下文的作用域链中包含了 fn1 上下文的变量对象,并且由于 fn2 访问了 fn1 中的变量,所以阻止了 fn1 上下文的变量对象被垃圾回收机制回收。
  让我们来看一个面试题经常会遇到的一个关于闭包的很经典的题目~
    
  求出上面代码三个函数的输入结果。
  如果对前面执行上下文系列文章已经理解透彻的童鞋,应该能够很容易得出,三个函数都是输出 3 。让我们来分析一波~
  在 arr[0] 函数执行之前,我们可以知道,全局上下文的变量对象如下所示
   
  在 arr[0] 被调用执行时,其作用域链在函数上下文的创建阶段被创建,其作用域链如下
   


上文内容不用于商业目的,如涉及知识产权问题,请权利人联系博为峰小编(021-64471599-8017),我们将立即处理。
21/212>
《2023软件测试行业现状调查报告》独家发布~

关注51Testing

联系我们

快捷面板 站点地图 联系我们 广告服务 关于我们 站长统计 发展历程

法律顾问:上海兰迪律师事务所 项棋律师
版权所有 上海博为峰软件技术股份有限公司 Copyright©51testing.com 2003-2024
投诉及意见反馈:webmaster@51testing.com; 业务联系:service@51testing.com 021-64471599-8017

沪ICP备05003035号

沪公网安备 31010102002173号