03-javascript从原理上彻底理解闭包的本质-一一网

coderwwh w：what是什么？ w：why为什么？ h：how怎么样？

理解闭包先理解：内存管理和 JS中函数是一等公民

是什么？什么是内存管理

所有编程语言，在代码的执行过程中都是需要给它分配内存的，不同的是某些编程语言需要我们自己手动的管理内存（比如C、C++、OC（malloc和free函数）），某些编程语言会可以自动帮助我们管理内存（比如Java、JavaScript、Python、Swift、Dart）

内存的管理步骤：

第一步：分配申请内存（申请）
第二步：使用内存（存放东西，比如对象等）
第三步：不需要使用时，对其进行释放

JS的内存管理

JavaScript会在定义变量时为我们分配内存。

JS对于基本数据类型内存的分配会在执行时，直接在栈空间进行分配；
JS对于复杂数据类型内存的分配会在堆内存中开辟一块空间，并且将这块空间的指针返回值变量引用；

为什么？为什么要有垃圾回收

因为内存的大小是有限的，所以当内存不再需要的时候，我们需要对其进行释放，以便腾出更多的内存空间。

在手动管理内存的语言中，我们需要通过一些方式自己来释放不再需要的内存，比如free函数：

弊端：但是这种管理的方式其实非常的低效，影响我们编写逻辑的代码的效率；并且这种方式对开发者的要求也很高，并且一不小心就会产生内存泄露；

所以大部分现代的编程语言都是有自己的垃圾回收机制：

垃圾回收的英文是Garbage Collection，简称GC；

对于那些不再使用的对象，我们都称之为是垃圾，它需要被回收，以释放更多的内存空间；

而我们的语言运行环境，比如Java的运行环境JVM，JavaScript的运行环境js引擎都会内存垃圾回收器；

垃圾回收器我们也会简称为GC，所以在很多地方你看到GC其实指的是垃圾回收器；

怎么做？GC怎么知道哪些对象不再使用？

引用计数

当一个对象有一个引用指向它时，那么这个对象的引用就+1，当一个对象的引用为0时，这个对象就可以被销毁掉；

这个算法有一个很大的弊端就是会产生循环引用；

图片.png

标记清楚

这个算法是设置一个根对象（root object），垃圾回收器会定期从这个根开始，找所有从根开始有引用到的对象，对
于哪些没有引用到的对象，就认为是不可用的对象；（不可达）

这个算法可以很好的解决循环引用的问题，JS引擎比较广泛的采用的就是标记清除算法

图片.png

JS中函数是一等公民

在JavaScript中，函数是非常重要的，并且是一等公民：

那么就意味着函数的使用是非常灵活的；
函数可以作为另外一个函数的参数，也可以作为另外一个函数的返回值来使用

函数作为另外一个函数的参数

function foo(aaaaa) {
  aaaaa()
}
function bar() {
  console.log("bar")
}
foo(bar)
复制代码

函数作为返回值

js允许函数内部再定义函数

function foo() {
  function bar() {
    console.log("bar")
  }
  return bar
}
var fn = foo()
fn()
复制代码

高阶函数

把一个函数如果接受另外一个函数作为参数,或者该函数会返回另外一个函数作为返回值的函数, 那么这个函数就称之为是一个高阶函数

闭包是什么？

维基百科

闭包（英语：Closure），又称词法闭包（Lexical Closure）或函数闭包（function closures）；

是在支持头等函数的编程语言中，实现词法绑定的一种技术；

闭包在实现上是一个结构体，它存储了一个函数和一个关联的环境（相当于一个符号查找表）；

闭包跟函数最大的区别在于，当捕捉闭包的时候，它的 自由变量 会在捕捉时被确定，这样即使脱离了捕捉时的上下文，它也能照常运行；

MDN

一个函数和对其周围状态（lexical environment，词法环境）的引用捆绑在一起（或者说函数被引用包围），这样的组合就是闭包（closure）；

也就是说，闭包让你可以在一个内层函数中访问到其外层函数的作用域；

在 JavaScript 中，每当创建一个函数，闭包就会在函数创建的同时被创建出来；

不好理解不要紧，往下看，最后回头来理解官方的解释

coderwhy老师的总结：
那么我的理解和总结：

一个普通的函数function，如果它可以访问外层作用于的自由变量，那么这个函数就是一个闭包；

从广义的角度来说：JavaScript中的函数都是闭包；

从狭义的角度来说：JavaScript中一个函数，如果访问了外层作用于的变量，那么它是一个闭包；

准备工作：理解高阶函数的执行过程

先看代码

图片.png

代码执行之前，

创建全局执行上下文，

编译代码，变量函数在这时候提升，

图片.png

开始执行，一旦开始执行，在调用栈里再创建一个函数的执行上下文，创建对应函数的AO对象

图片.png

foo的AO对象创建完，就会对foo函数里的内容进行编译，内容是bar函数，

发现bar是个函数，这时候需要创建bar的函数对象

图片.png

这个时候才算编译完了

开始执行

回顾一下代码
图片.png

给fn赋值foo的返回值, foo执行完，弹出调用栈

图片.png

这时候执行fn，在调用栈里创建fn的函数执行上下文，并且创建bar执行的AO对象（该函数里面是空），执行完后，执行上下文弹出调用栈

图片.png

了解了执行过程，现在引入闭包

对上面的代码稍加改进

function foo() {
  var name = "foo"
  function bar() {
    console.log("bar", name)
  }
  return bar
}

var fn = foo()
fn()
复制代码

前面过程和上面一样，这里直接跳到执行var fn = foo()这行代码

图片.png

开始执行foo，执行完以后

图片.png

执行fn

图片.png

至此，形成了严格意义的闭包

图片.png

fn是bar函数，bar访问着foo里的name，当foo()执行完。本该销毁了foo里的东西，但是这里bar还访问着name这个自由变量

总结

那么我的理解和总结：

一个普通的函数function，如果它可以访问外层作用于的自由变量，那么这个函数就是一个闭包；

从广义的角度来说：JavaScript中的函数都是闭包；

从狭义的角度来说：JavaScript中一个函数，如果访问了外层作用于的变量，那么它是一个闭包；

引用自coderwhy老师的图

引用自coderwhy老师的图

补充：理解执行过程中的内存

先上代码

function foo() {
  var name = "foo"
  var age = 18
}
function test() {
  console.log("test")
}
foo()
test()
复制代码

代码解析如下：

图片.png

执行foo()，执行完，foo函数的执行上下文弹出调用栈

执行上下文销毁，指向的AO引用自然也销毁，同时foo的AO对象也消失

图片.png

结果如下

图片.png

test()执行过程如上

为什么闭包里AO不销毁

function foo() {
  var name = "foo"
  var age = 18

  function bar() {
    console.log(name)
    console.log(age)
  }
  return bar
}

var fn = foo()
fn()
复制代码