前端面试之JavaScript基础(五)—— 闭包

闭包 是一个在 JavaScript 当中比较生涩的知识,它好像一直被一层迷雾笼罩,让人好像理解了又说不上具体是什么。我查看了许多关于讲解闭包的材料,其中有两种对于闭包的解释我认为比较容易被接受:

  • 当创建它的上下文被销毁后,仍能引用该上下文作用域当中的 自由变量函数 称为闭包。
  • 函数 离开被定义时所处的词法作用域仍可以 记住并访问 所在作用域环境,这时就产生了闭包。

根据上面的两种说法,我们看到关键的词汇是 函数作用域 ,接下来我们通过例子来更清晰的认识闭包,示例如下:

function foo() {
  var a = 'foo'
  return function baz() {
    console.log(a)
  }
}

var bar = foo()

bar() // foo
复制代码

结合上面两种闭包概念,我将上方的示例执行步骤分解如下:

  1. 从执行角度看, foo 函数执行引擎会创建相应的 上下文对象,上下文对象当中包含了作用域的相关信息,记录了当前作用域当中存在标识符 abazreturn 语句会将 baz 函数向外传递;
  2. 赋值语句结束后函数 foo 的执行就终止了,此时引擎会 回收 函数执行时的上下文对象。上下文对象被回收,也代表作用域当中的标识符会随之消失(正常情况下)。
  3. 函数 baz 离开 了被定义时的词法作用域,在全局作用域当中通过函数别名的方式调用。此时它需要寻找一个变量 a ,遵循词法作用域的变量查找规则最终打印出了 foo 作用域当中 a 变量的值。

上面的分析中本应该被销毁的变量 a 被神奇的保留了下来,我们可以将这种现象或是机制理解为闭包。

总结一下,闭包的机制是由函数和词法作用域的查询方式来实现的。我将它理解为:

函数被定义时的词法作用域以外 的地方 被调用 时,仍然能够 访问 定义时的作用域的行为就称为 闭包

闭包无处不在

其实闭包在我们日常编写的程序中无处不在,只是你并不是有意识的认知并将其定义为一个闭包,其中典型的例子就是 回调函数 ,请看以下代码:

function foo() {
  var isShow = true
  setTimeout(() => {
    isShow = false
    console.log(isShow)
  }, 1000)
}

foo()
复制代码

上面的代码当中传入 setTimeout 的回调函数其实就是闭包的体现,在 1000 毫秒过后它所执行的环境已经不是函数 foo 产生的环境,但是它仍然能够引用当时的词法作用域。

诸如此类例子还有许多,事件、Ajax请求、通信等等其实都是闭包的应用。

小结

今天直接上结论:

  1. 闭包:当 函数被定义时的词法作用域以外 的地方 被调用 时,仍然能够 访问 定义时的作用域的机制称为闭包。
  2. 闭包并不是高深的理论,在实际编码中回调函数、事件、请求、通信等等常用的技巧当中都有闭包的应用。
分类:
前端
标签: