闭包

闭包的概念

闭包（closure）是一个函数以及其捆绑的周边环境状态（lexical environment，词法环境）的引用的组合。换而言之，闭包让开发者可以从内部函数访问外部函数的作用域。在 JavaScript 中，闭包会随着函数的创建而被同时创建。

红宝书(p178)上对于闭包的定义：闭包是指有权访问另外一个函数作用域中的变量的函数

MDN 对闭包的定义为：闭包是指那些能够访问自由变量的函数。（其中自由变量，指在函数中使用的，但既不是函数参数arguments也不是函数的局部变量的变量，其实就是另外一个函数作用域中的变量。）

闭包是指有权访问另一个函数作用域中的变量的函数

闭包就是能够读取其他函数内部变量的函数，或者子函数在外调用，子函数所在的父函数的作用域不会被释放。

闭包产生的原因?

首先要明白作用域链的概念，其实很简单，在ES5中只存在两种作用域————全局作用域和函数作用域，当访问一个变量时，解释器会首先在当前作用域查找标示符，如果没有找到，就去父作用域找，直到找到该变量的标示符或者不在父作用域中，这就是作用域链，值得注意的是，每一个子函数都会拷贝上级的作用域，形成一个作用域的链条。比如:

var a = 1;
function f1() {
  var a = 2
  function f2() {
    var a = 3;
    console.log(a);//3
  }
}

在这段代码中，f1的作用域指向有全局作用域(window)和它本身，而f2的作用域指向全局作用域(window)、f1和它本身。而且作用域是从最底层向上找，直到找到全局作用域window为止，如果全局还没有的话就会报错。就这么简单一件事情！

闭包产生的本质就是，当前环境中存在指向父级作用域的引用。还是举上面的例子:

function f1() {
  var a = 2
  function f2() {
    console.log(a);//2
  }
  return f2;
}
var x = f1();
x();

这里x会拿到父级作用域中的变量，输出2。因为在当前环境中，含有对f2的引用，f2恰恰引用了window、f1和f2的作用域。因此f2可以访问到f1的作用域的变量。

那是不是只有返回函数才算是产生了闭包呢？、

回到闭包的本质，我们只需要让父级作用域的引用存在即可，因此我们还可以这么做：

var f3;
function f1() {
  var a = 2
  f3 = function() {
    console.log(a);
  }
}
f1();
f3();

让f1执行，给f3赋值后，等于说现在f3拥有了window、f1和f3本身这几个作用域的访问权限，还是自底向上查找，最近是在f1中找到了a,因此输出2。

在这里是外面的变量f3存在着父级作用域的引用，因此产生了闭包，形式变了，本质没有改变。

实用的闭包

闭包很有用，因为它允许将函数与其所操作的某些数据（环境）关联起来。这显然类似于面向对象编程。在面向对象编程中，对象允许我们将某些数据（对象的属性）与一个或者多个方法相关联。

词法作用域

JavaScript 实现了一种名为词法作用域（或静态作用域）的作用域机制。它被称为词法（或静态），因为引擎仅通过查看 JavaScript 源代码来确定范围的嵌套，无论它在哪里调用。

var a = 10;
function foo() {
  console.log(a); // 10
}

function bar() {
  var a = 20;
  foo();
}

bar();

var a = 10;

function bar() {
  var a = 20;

  function foo() {
    console.log(a); // 20
  }

  foo();
}

bar();

闭包的作用

函数再执行完以后，函数内部声明的局部变量依旧存在内存中，未被回收（延长了局部变量的生命周期）；
在函数外部可以直接访问（操作）函数内部的局部变量；暴露内部变量，暴露指定方法（内部函数），使得外部可以使用指定的方法读取或者操作内部变量。
闭包对象一直存在的原因： fn2没有被引用，函数执行完会自动释放；fn3这个变量会自动释放，f指向fn3这个函数对象的地址，函数对象又关联着闭包对象，所以闭包对象不会被回收（有f还引用着它）。

function fn1(){
    var a = 2
    function fn2(){
        a++
        console.log(a);
    }
    function fn3(){
        a--
        console.log(a);
    }
    debugger
    return fn3
}

var f = fn1()
f()
f()

闭包的生命周期

产生：嵌套内部函数声明完成时就会产生闭包对象销毁：嵌套内部函数成为垃圾对象（null）

函数声明式定义内部函数

function fn1(){
    // 此时闭包就已经产生了（函数提升，内部函数对象已经创建）
    var a = 2
    function fn2(){
        a++
        console.log(a);
    }
    function fn3(){
        a--
        console.log(a);
    }
    debugger
    return fn3
}

var f = fn1()
f()
f()
f = null // 闭包销毁，包含闭包的函数对象成为垃圾对象

函数表达式（匿名函数）定义内部函数

function fn1(){
    var a = 2
    function fn2(){
        a++
        console.log(a);
    }
    var fn3 = function (){ // 只有运行到这里才产生闭包对象
        a--
        console.log(a);
    }
    return fn3
}

var f = fn1()
f()
f()
f=null

闭包的应用

可以定义JS模块具有特定功能的js文件，将所有数据和功能封装在函数内部（私有），只对外暴露一个内部函数或者包含多个内部函数的对象，模块的使用者，只需要通过调用模块中暴露的函数或者对象中的函数，来实现对应的功能。

定义模块

function myModule(){
    var msg = 'message'
    function getMsg(){
        console.log(msg);
    }
    return {
        getMsg
    }
}

IFFE

(function (window){
    var msg = 'message'
    function getMsg(){
        console.log(msg);
    }
    window.myModule = {
        getMsg
    }
})(window)

闭包的缺点

函数执行完后，函数内部的局部变量没有释放，占用内存事件长，容易导致内存泄漏（占用内存没有被及时释放）。
当需要内存太大，超出剩余内存时，就会内存溢出（页面崩溃直接报错）。

少用闭包，及时释放内存，用完后赋值为null，让内部函数成为垃圾对象，回收闭包当需要内存太大

闭包测试题

var name = "The window"
var obj = {
    name:"My Object",
    getNameFunc: function(){ // 没有闭包对象
        return function(){ // 里面的this指向window,匿名函数外层的this指向obj
            return this.name
        }
    }
}
console.log(obj.getNameFunc()()); // The window

var obj1 = {
    name:"My Object",
    getNameFunc: function(){ // 存在闭包对象
        var that = this
        return function(){
            return that.name
        }
    }
}
console.log(obj1.getNameFunc()()); // My Object

var obj2 = {
    name:"My Object",
    getNameFunc: function(){ // 没有闭包对象
        return ()=>{ // 箭头函数没有this,匿名函数外层的this指向obj
            return this.name
        }
    }
}
console.log(obj2.getNameFunc()()); // My Object

function fun(n,o){
    console.log(o);
    return {
        fun:function(m){
            return fun(m,n)
        }
    }

}

var a = fun(0) // undefined
a.fun(1) // 0
a.fun(2) // 0
a.fun(3) // 0
// a.fun(1) a.fun(2) a.fun(3) 没有产生新的闭包对象（没有新的引用指向闭包对象），一直用的是var=fun(0)产生的闭包对象，闭包内的变量是n，n是第一次传入的0

var b = fun(0).fun(1).fun(2).fun(3) // undefined 0 1 2
// 每一次都返回新的对象，不断产生新的闭包对象，每一次都打印前一次传入的值（这个值是闭包对象里的值）

var c = fun(0).fun(1) // undefined 0
c.fun(2) // 1
c.fun(3) // 1
// 先生成c的闭包对象（打印undefined和0），之后一直用c里面的闭包对象，里面存着上一次的传入值1

如何解决下面的循环输出问题？

for(var i = 1; i <= 5; i ++){
  setTimeout(function timer(){
    console.log(i)
  }, 0)
}

为什么会全部输出6？如何改进，让它输出1，2，3，4，5？(方法越多越好)

因为setTimeout为宏任务，由于JS中单线程eventLoop机制，在主线程同步任务执行完后才去执行宏任务，因此循环结束后setTimeout中的回调才依次执行，但输出i的时候当前作用域没有，往上一级再找，发现了i,此时循环已经结束，i变成了6。因此会全部输出6。

解决方法：

1、利用IIFE(立即执行函数表达式)当每次for循环时，把此时的i变量传递到定时器中

for(var i = 1;i <= 5;i++){
  (function(j){
    setTimeout(function timer(){
      console.log(j)
    }, 0)
  })(i)
}

2、给定时器传入第三个参数, 作为timer函数的第一个函数参数

for(var i=1;i<=5;i++){
  setTimeout(function timer(j){
    console.log(j)
  }, 0, i)
}

3、使用ES6中的let

for(let i = 1; i <= 5; i++){
  setTimeout(function timer(){
    console.log(i)
  },0)
}

let使JS发生革命性的变化，让JS有函数作用域变为了块级作用域，用let后作用域链不复存在。代码的作用域以块级为单位，以上面代码为例:

// i = 1
{
  setTimeout(function timer(){
    console.log(1)
  },0)
}
// i = 2
{
  setTimeout(function timer(){
    console.log(2)
  },0)
}
// i = 3

闭包

闭包的概念​

闭包产生的原因?​

实用的闭包​

词法作用域​

闭包的作用​

闭包的生命周期​

闭包的应用​

闭包的缺点​

闭包测试题​

如何解决下面的循环输出问题？​