经典回顾——JavaScript闭包详解

1. 什么是闭包？

闭包（closure）指有权访问另一个函数作用域中变量的函数。 ----- 《JavaScript 高级程序设计》

函数对象可以通过作用域链相互关联起来，函数体内部变量可以保存在函数作用域内，这就是闭包。-----《JavaScript权威指南》

理解：

闭包就是能够读取其他函数内部变量的函数。
闭包就是跨作用域访问变量。
在javascript中，函数内部可以直接读取全局变量，但是在函数外部无法读取函数内部的局部变量，只有函数内部的子函数才能读取局部变量，所以闭包可以理解成 “定义在一个函数内部的函数”。在本质上，闭包是将函数内部和函数外部连接起来的桥梁。(闭包的最典型的应用是实现回调函数（callback) )。

2. 闭包的作用

闭包常常用来 间接访问一个变量。换句话说，隐藏一个变量 或者 保护一个变量。

3. 闭包的优缺点以及特性

优点

希望一个变量长期存储在内存中。
封装对象的私有属性和私有方法。（然后在全局作用域中通过调用闭包就能访问函数中的变量）
可以重复使用变量，并且不会造成变量污染。（全局变量可以重复使用，但是容易造成变量污染。局部变量仅在局部作用域内有效，不可以重复使用，不会造成变量污染。闭包结合了全局变量和局部变量的优点。）

缺点

比普通函数更占用内存。
在 IE 下容易造成内存泄露。解决方法：在退出函数之前，将不使用的局部变量全部删除。

function makeAdder(x) {
  return function(y) {
    return x + y
  }
}

var add5 = makeAdder(5)
var add10 = makeAdder(10)

console.log(add5(2)) // 7
console.log(add10(2)) // 12

// 释放对闭包的引用
add5 = null
add10 = null

特性

函数嵌套函数。
函数内部可以引用外部的参数和变量。
参数和变量不会被垃圾回收机制回收。

4. 闭包的应用

需求背景：实现变量 a 自增

1、通过全局变量，可以实现，但会污染其他程序

var a = 10;
function add(){
    a++;
    console.log(a);
}
add();  // 11
add();  // 12
add();  // 13

2、定义一个局部变量，不污染全局，但是实现不了递增

var a = 10;
function add2(){
    var a = 10;
    a++;
    console.log(a);
}
add2();  // 11
add2();  // 11
add2();  // 11
console.log(a); // 10

3、通过闭包，可以是函数内部局部变量递增，不会影响全部变量！！

var a  = 10;
function add3(){
    var a = 10;
    return function(){
        a++;
        return a;
    };
};
var closure =  add3();
console.log(closure());  // 11
console.log(closure());  // 12
console.log(closure());  // 13
console.log(a);  // 10

5. 闭包的使用场景

闭包实例-函数防抖

指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。
通俗理解：在一段固定的时间内，只能触发一次函数，在多次触发事件时，只执行最后一次。

使用：

搜索功能，在用户输入结束以后才开始发送搜索请求，可以使用函数防抖来实现；

/**
 * @function debounce 函数防抖
 * @param {Function} fn 需要防抖的函数
 * @param {Number} interval 间隔时间
 * @return {Function} 经过防抖处理的函数
 * */
function debounce(fn, interval) {
    let timer = null; // 定时器
    return function() {
        // 清除上一次的定时器
        clearTimeout(timer);
        // 拿到当前的函数作用域
        let _this = this;
        // 拿到当前函数的参数数组
        let args = Array.prototype.slice.call(arguments, 0);
        // 开启倒计时定时器
        timer = setTimeout(function() {
            // 通过apply传递当前函数this，以及参数
            fn.apply(_this, args);
            // 默认300ms执行
        }, interval || 300)
    }
}

闭包实例-函数节流

限制一个函数在一定时间内只能执行一次。

使用:

改变浏览器窗口尺寸，可以使用函数节流，避免函数不断执行；
滚动条scroll事件，通过函数节流，避免函数不断执行。

/**
 * @function throttle 函数节流
 * @param {Function} fn 需要节流的函数
 * @param {Number} interval 间隔时间
 * @return {Function} 经过节流处理的函数
 * */
function throttle(fn, interval) {
    let timer = null; // 定时器
    let firstTime = true; // 判断是否是第一次执行
    // 利用闭包
    return function() {
        // 拿到函数的参数数组
        let args = Array.prototype.slice.call(arguments, 0);
        // 拿到当前的函数作用域
        let _this = this;
        // 如果是第一次执行的话，需要立即执行该函数
        if(firstTime) {
            // 通过apply，绑定当前函数的作用域以及传递参数
            fn.apply(_this, args);
            // 修改标识为null，释放内存
            firstTime = null;
        }
        // 如果当前有正在等待执行的函数则直接返回
        if(timer) return;
        // 开启一个倒计时定时器
        timer = setTimeout(function() {
            // 通过apply，绑定当前函数的作用域以及传递参数
            fn.apply(_this, args);
            // 清除之前的定时器
            timer = null;
            // 默认300ms执行一次
        }, interval || 300)
    }
}

闭包实例-给元素伪数组添加事件

// DOM操作
let li = document.querySelectorAll('li');
for(var i = 0; i < li.length; i++) {
    (function(i){
        li[i].onclick = function() {
            alert(i);
        }
    })(i)
}

闭包实例-不使用循环返回数组

function getArr() {
    let num = 10;
    let arr = [];
    return (function(){
        arr.unshift(num);
        num--;
        if(num > 0) {
            arguments.callee();
        }
        return arr;
    })()
}
console.log(getArr());  //[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]