什么是闭包

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

内部的函数存在外部作用域的引用就会导致闭包

如何理解闭包

闭包是一个可以访问外部作用域的内部函数，即使这个外部作用域已经执行结束。

闭包允许函数访问并操作函数外部的变量。
闭包是指有权访问另外一个函数作用域中的变量的函数。
闭包是指那些能够访问自由变量的函数。这里的自由变量是外部函数作用域中的变量。
函数和函数内部能访问到的变量的总和，就是一个闭包
函数和对其词法环境的引用捆绑在一起，这样的组合就是闭包

闭包的本质

·内部函数总是可以访问其所在的外部函数中声明的变量和参数，即使在其外部函数被返回了之后。

·上级作用域内变量的生命周期，因为被下级作用域内引用而没有被释放。从而导致上级作用域内的变量需要等到下级作用域执行完之后才能得到释放。

闭包的作用

保护函数的私有变量不受外部的干扰，形成不销毁的栈内存。
保存函数内的值，实现方法和属性的私有化。

例子

var n = 10
function fn(){
    var n =20
    function f() {
       n++;
       console.log(n)
     }
    f()
    return f
}

var x = fn()
x()
x()
console.log(n)

/* 输出
    21
    22
    23
    10
/

fn 的返回值是什么变量 x 就是什么，这里 fn 的返回值是函数名 f 也就是 f 的堆内存地址，x() 也就是执行的是函数 f()，而不是 fn()，输出的结果显而易见

使用场景

模块封装防止变量污染全局

var Yideng = (function () {
    // 这样声明为模块私有变量，外界无法直接访问
    var foo = 0;

    function Yideng() {}
    Yideng.prototype.bar = function bar() {
        return foo;
    };
    return Yideng;
}());

函数作为参数

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

function f(p){
    var a = 'f'
    p()
}
f(foo())
/* 输出
*   foo
/

使用 return fo 返回回来，fo() 就是闭包，f(foo()) 执行的参数就是函数 fo，因为 fo() 中的 a 的上级作用域就是函数foo()，所以输出就是foo

IIFE 自执行函数

var n = 'leemo';
(function p(){
    console.log(n)
})()
/* 输出
*   leemo
/

同样也是产生了闭包p()，存在 window下的引用 n。

循环赋值。在循环中创建闭包，防止取到意外的值

for(var i = 0; i<10; i++){
  (function(j){
       setTimeout(function(){
        console.log(j)
    }, 1000) 
  })(i)
}
// 0 1 2 3 4 5 6 7 8 9

for (var i = 0; i < 10; i++) {
  setTimeout(function () {
    console.log(i);
  }, 1000);
}
// 10 10 ^10

使用回调函数就是在使用闭包

window.name = 'leemo'
setTimeout(function timeHandler(){
  console.log(window.name);
}, 100)

手写节流防抖

// 节流
function throttle(fn, timeout) {
    let timer = null
    return function (...arg) {
        if(timer) return
        timer = setTimeout(() => {
            fn.apply(this, arg)
            timer = null
        }, timeout)
    }
}

// 防抖
function debounce(fn, timeout){
    let timer = null
    return function(...arg){
        clearTimeout(timer)
        timer = setTimeout(() => {
            fn.apply(this, arg)
        }, timeout)
    }
}

手写函数柯里化略

思考题

输出判断

var data = [];

for (var i = 0; i < 3; i++) {
  data[i] = function () {
    console.log(i);
  };
}

data[0]();
data[1]();
data[2]()
/* 输出
    3
    3
    3
/

这里的 i 是全局下的 i，共用一个作用域，当函数被执行的时候这时的 i=3，导致输出的结构都是3。

Q:如何改善此场景？

自执行函数形成闭包

var data = [];

for (var i = 0; i < 3; i++) {
    (function(j){
      setTimeout( data[j] = function () {
        console.log(j);
      }, 0)
    })(i)
}

data[0]();
data[1]();
data[2]()
// 0 1 2

使用let

var data = [];

for (let i = 0; i < 3; i++) {
  data[i] = function () {
    console.log(i);
  };
}

data[0]();
data[1]();
data[2]()
// 0 1 2

let 具有块级作用域，形成的3个私有作用域都是互不干扰的。

进阶：

var result = [];
var a = 3;
var total = 0;

function foo(a) {
    for (var i = 0; i < 3; i++) {
        result[i] = function () {
            total += i * a;
            console.log(total);
        }
    }
}

foo(1);
result[0]();  
result[1]();
result[2]();

// 输出
//
//
//3 6 9

闭包变量的存储位置

闭包只存储外部变量的引用，而不会拷贝这些外部变量的值。

闭包中变量的存储位置是堆内存。

假如闭包中的变量存储在栈内存中，那么栈的回收会把处于栈顶的变量自动回收。所以闭包中的变量如果处于栈中那么变量被销毁后，闭包中的变量就没有了。所以闭包引用的变量是出于堆内存中的。

使用闭包需要注意什么

内存泄漏闭包会携带包含其它的函数作用域，因此会比其他函数占用更多的内存。过度使用闭包会导致内存占用过多，所以要谨慎使用闭包。

栈内存释放

一般当函数执行完后函数的私有作用域就会被释放掉。

但栈内存的释放也有特殊情况

函数执行完，但是函数的私有作用域内有内容被栈外的变量还在使用的，栈内存就不能释放里面的基本值也就不会被释放。
全局下的栈内存只有页面被关闭的时候才会被释放。

JavaScript基础：闭包