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]
