应该如何理解闭包

摘要

本文介绍了闭包的定义,作用,及常见的理解中的误区,并没有引入其他的专业词汇。

定义

闭包对应的英文是closure,下边的定义是来自MDN。

A closure is the combination of a function bundled together (enclosed)
with references to its surrounding state (the lexical environment). In
other words, a closure gives you access to an outer function’s scope
from an inner function. In JavaScript, closures are created every time
a function is created, at function creation time.
-MDN- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures

根据上边的定义:闭包 = 函数 + 周围状态(环境的)的引用 。所以闭包不等于是函数, 为了表述的方便,我称之为闭包结构。

从这个意义上来讲,如下代码段就构成一个闭包结构:

let a = 1;
function f() {
    
    
    console.log(a)
}

执行函数f只用到了a这个变量,所以f + a 构成一个闭包结构。

好像和我们平常看到的闭包不一样哈,下面继续:

function outer() {
    
    
  let a = 1;
  function f() {
    
    
    console.log(a)
  }
}

在上面的代码中,第2-5行 构成了一个闭包结构。

而如下的代码块中,就没有闭包结构

function f() {
    
    
    let a = 1
  console.log(a)
}

原因是:函数f没有使用它周围的变量 , 它的变量是它内部定义的。

推而广之,如果一个函数引用了它外部的变量,则,这个函数和这些外部变量一起构成了闭包结构。得到这样的结论之后,是不是会发现我们平常的代码到处都有闭包的影子?

在调试工具中观察闭包
通过给代码添加断点,如下:

function outer() {
    
    
  debugger
  let a = 1
  function f() {
    
    
    console.log(a)
  }
  f() // return f
}
outer()

从浏览器(chrome)调试工具中可以看到 Scopes/ Closure 字样。
在这里插入图片描述

值得注意的是:上面的函数f必须被调用,或者是 return ,才能在调试工具中看到closure。

从调试工具中来看,closure出现在scopes下,它就像一个资源库:执行f时,需要访问的资源可以在它里面(它包含a)去找。

闭包的作用

我理解闭包在开发中的作用是:封闭数据,提供操作。

function outer() {
    
    
  let a = 0 
  function f() {
    
     return a }
  window.test = f
}
outer()
window.test()

上面的代码中,由于a定义在outer函数的内部,则我们永远不能直接访问: console.log(a),但是由于我们把函数f挂载在window对象的test属性上,则可以通过 window.test()来间接获取a的值。

当然,更常见的写法是:用一个变量来接收outer()的返回值,如下:

function outer() {
    
    
  let a = 0 
  function f() {
    
     return a }
  return f
}
const test = outer()
test()

上面的例子,有些偏理论,下面给出一个更加实用的例子:
buildLife创建了一个用来游戏主角生命条数进行管理的对象,我们可以通过add,sub,reset来间接操作life这个数据,但是,不能直接修改life。

function buildLife() {
    
    
  let life = 5 
  function add() {
    
     life++ }
  function sub() {
    
     life-- }
  function reset() {
    
     life = 5 }
  function get() {
    
     return life }
  return {
    
     add, sub, reset, get}
}
const life = buildLife()
console.log(life.get()) // 5
life.add()
console.log(life.get()) // 6

上面的代码中有 4个闭包结构: life + add, life +sub, life+reset, life+get。

闭包的理解误区

误区1:闭包会造成内存泄漏。内存泄漏是指:我们再也用不到(无法访问到)的变量,依然占着内存空间。而闭包内部的变量是可以访问到呀,所以不应该归到内存泄漏中去。

误区2:闭包比较复杂,写代码尽量别写闭包。以现在前端代码的复杂程度,没有闭包的代码决计不可能发生!

误区3:只有js中才有闭包。这个就更离谱了。隔壁的python兄弟,c#兄弟会笑话我们的。 闭包并不是针对某一特定语言的概念,而是一个通用的概念。除了在各个支持函数式编程的语言中,我们会接触到它。一些不支持函数式编程的语言中也能支持闭包(如java8之前的匿名内部类)。

小结

闭包就是一个概念,闭包在我们的代码无处不在。
概念的理解是需求层层递进的,每学一个新的知识,就可能会加深对旧知识的理解。
希望本文对你有帮助。

猜你喜欢

转载自blog.csdn.net/sqLeiQ/article/details/118306636