1. 什么是闭包
在理解闭包的概念之前,要先知道JS中的变量作用域,分为全局变量和局部变量两种。特点是,函数内部可以直接读取全局变量,而函数外部无法直接读取函数内部的局部变量。
那我们想要从外部读取函数内部的局部变量怎么办呢?
这就需要我们在函数内部再定义一个函数:
function f1(){
var n=999;
function f2(){
alert(n); // 999
}
}
上述代码中,函数f2
在函数f1
内部,此时f1
中的所有局部变量对f2
都是可见的,但是f2
内部的局部变量对f1
是不可见的。
原因:JS特有的链式作用域结构,子对象会一级一级地向上寻找所有父对象的变量。所以,父对象的所有变量,对子对象都是可见的,反之则不成立。
既然f2
能够读取到f1
中的局部变量,那么只要把f2
作为返回值,我们就可以在f1
外部读取到它的内部变量了。而这个f2
函数,就是闭包。
综上所述,闭包就是能够读取其他函数内部变量的函数,换句话说,其实它就是定义在一个函数内部的函数,也是将函数内部和外部连接起来的一个媒介。
2. 闭包的用途
- 读取其他函数的内部变量
- 让这些变量的值始终保持在内存中,不会在 f1 调用后被自动清除。
原因:f1
是f2
的父函数,而f2
被赋给了一个全局变量,这导致f2
始终在内存中,而f2
的存在依赖于f1
,因此f1
也始终在内存中,不会在调用结束后,被垃圾回收机制(garbage collection)回收。
3. 闭包的应用场景
防抖(debounce)
当事件被触发后,延迟n秒再执行回调函数,如果这n秒内事件被再次触发,则重新计时。这样可以保证当用户频繁触发某些事件时,不会频繁执行回调函数,而是只执行一次。
例子:用户在输入框连续输入一串字符时,通过防抖策略,只有在输入完成后,才执行查询的请求,这样可以有效减少请求次数,节约资源。
实现:
借助setTimeout()
来实现,当下次触发事件时,如果setTimeout()
已经存在,则清除setTimeout()
并重新计算时间。
<button id="debounce">防抖</button>
window.onload = function() {
// 1、获取这个按钮,并绑定事件
var myDebounce = document.getElementById("debounce");
myDebounce.addEventListener("click", debounce(sayDebounce,4000));
}
// 2、防抖功能函数,接受传参
function debounce(fn,delay) {
// 4、创建一个标记用来存放定时器的返回值
let timeout = null;
return function() {
// 5、每次当用户点击/输入的时候,把前一个定时器清除
clearTimeout(timeout);
// 6、然后创建一个新的 setTimeout,
// 这样就能保证点击按钮后的 interval 间隔内
// 如果用户还点击了的话,就不会执行 fn 函数
timeout = setTimeout(() => {
fn.apply(this, arguments);
}, delay);
};
}
// 3、需要进行防抖的事件处理
function sayDebounce() {
// ... 有些需要防抖的工作,在这里执行
console.log("防抖成功!");
}
节流(throttle)
指定时间间隔内只会执行一次回调函数,可以减少一段时间内事件的触发频率。
例子:鼠标不断触发某个事件时,比如点击,指定事件内只会执行一次;懒加载时要监听计算滚动条的位置,不必每次滑动都触发,可以降低计算频率,节约资源。
实现:借助setTimeout()
和一个标志位来实现,当标志位为true
时,代表可以执行回调函数,在回调函数内把标志位设为false
,否则,说明距离上次操作还不满足指定的时间间隔,直接返回。
<button id="throttle">节流</button>
window.onload = function() {
// 1、获取按钮,绑定点击事件
var myThrottle = document.getElementById("throttle");
myThrottle.addEventListener("click", throttle(sayThrottle,4000));
}
// 2、节流函数体
function throttle(fn,delay) {
// 4、通过闭包保存一个标记
let canRun = true;
return function() {
// 5、在函数开头判断标志是否为 true,不为 true 则中断函数
if(!canRun) {
return;
}
// 6、将 canRun 设置为 false,防止执行之前再被执行
canRun = false;
// 7、定时器
setTimeout( () => {
fn.apply(this, arguments);
// 8、执行完事件(比如调用完接口)之后,重新将这个标志设置为 true
canRun = true;
}, delay);
};
}
// 3、需要节流的事件
function sayThrottle() {
console.log("节流成功!");
}
更多应用场景参考:
闭包–防抖和节流的应用场景及区别
4. 使用闭包的注意事项
- 闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题。解决方法:在退出函数之前,将不使用的局部变量全部删除。
- 闭包会在父函数外部,改变父函数内部变量的值。