五分钟完全弄懂JS闭包

JS中函数是一等公民

• 在JavaScript中，函数是非常重要的，并且是一等公民：
  • 那么就意味着函数的使用是非常灵活的；
  • 函数可以作为另外一个函数的参数，也可以作为另外一个函数的返回值来使用；
• 自己编写高阶函数
  • 自己编写的高阶函数指的就是这个函数既可以作为另一个函数的参数被使用，也可以作为另一个函数的返回值
• 使用内置的高阶函数
  • 常见的内置高阶函数有很多，比如filter、map、reduce等等

JS中闭包的定义

这里先来看一下闭包的定义，分成两个：在计算机科学中和在JavaScript中。

• 在计算机科学中对闭包的定义（维基百科）：

  • 闭包（英语：Closure），又称词法闭包（Lexical Closure）或函数闭包（function closures）；
  • 是在支持 头等函数 的编程语言中，实现词法绑定的一种技术；
  • 闭包在实现上是一个结构体，它存储了一个函数和一个关联的环境（相当于一个符号查找表）；
  • 闭包跟函数最大的区别在于，当捕捉闭包的时候，它的 自由变量 会在捕捉时被确定，这样即使脱离了捕捉时的上下文，它也能照常运行；

• 闭包的概念出现于60年代，最早实现闭包的程序是 Scheme，那么我们就可以理解为什么JavaScript中有闭包：

  • 因为JavaScript中有大量的设计是来源于Scheme的；

• 我们再来看一下MDN对JavaScript闭包的解释：

  • 一个函数和对其周围状态（lexical environment，词法环境）的引用捆绑在一起（或者说函数被引用包围），这样的组合就是闭包（closure）；
  • 也就是说，闭包让你可以在一个内层函数中访问到其外层函数的作用域；
  • 在 JavaScript 中，每当创建一个函数，闭包就会在函数创建的同时被创建出来；

• 那么我的理解和总结：

  • 一个普通的函数function，如果它可以访问外层作用于的自由变量，那么这个函数就是一个闭包；
  • 从广义的角度来说：JavaScript中的函数都是闭包；
  • 从狭义的角度来说：JavaScript中一个函数，如果访问了外层作用于的变量，那么它是一个闭包；

闭包的访问过程

如果我们编写了如下的代码，它一定是形成了闭包的：

// js语法允许函数内部再定义函数
function foo() {
  var name = 'foo'
  var age = 18
  function bar() {
    console.log(name)
    console.log(age)
  }
  return bar
}

var fn = foo()
fn()

1、创建GO对象，创建全局执行上下文并压入执行上下文栈中

2、执行foo()，创建foo函数的AO对象

3、创建foo函数执行上下文并压入执行上下文栈中，然后开始执行foo函数内的代码

4、foo函数执行结束，将foo函数执行上下文弹出栈

5、执行fn()函数，创建fn函数(bar)的AO对象，创建fn函数（bar）的函数执行上下文并压入执行上下文栈中

6、fn函数（bar）执行完成，将fn函数（bar）的函数执行上下文弹出栈，垃圾回收器销毁bar函数的AO对象

注意：在此之前，是存在内存泄漏的，因为foo函数执行结束了，但是foo函数的AO对象并没有被销毁（因为有bar函数对象指向它）。foo函数的AO对象是应该被销毁的但没被销毁，所以说存在内存泄露！

7、执行fn = null，由于fn变量指向null，bar函数的AO对象没有任何变量指向，所以垃圾回收器会销毁bar函数的AO对象

8、由于bar函数的AO对象被垃圾回收器销毁，foo函数的AO对象没有任何变量指向，也会被垃圾回收器销毁

9、指向foo = null，foo变量指向null，不再指向foo函数对象

10、由于foo函数对象没有任何变量指向，所以会被垃圾回收器销毁

AO不使用的属性

我们来研究一个问题：AO对象不会被销毁时，是否里面的所有属性都不会被释放？

• 下面这段代码中name属于闭包的父作用域里面的变量；
• 我们知道形成闭包之后count一定不会被销毁掉，那么name是否会被销毁掉呢？
• 这里我打上了断点，我们可以在浏览器上看看结果；

function foo(count) {
  let name = "fuyou"
  return function (num) {
    debugger
    return count + num
  }
}

const add10 = foo(10)
console.log(add10(5))
console.log(add10(8))

在debugger时候，我们可以发现，AO不使用的属性name是会被销毁的。