js闭包原理及其应用场景

Posted 2021-06-25 微个日光日

闭包这个概念一直困扰这我，很多时候背了，过段时间又记不住了。之所以这样是因为自己并没有真正理解什么是闭包。很多时候你觉得一个概念很复杂记不住，很有可能是你对这个概念理解错了。

很多人会说闭包会造成内存泄露，其实这是错误的。之所以会造成内存泄露是因为IE浏览器造成的，并不是所有浏览器都会这样。通常之所以会造成内存泄露，是因为浏览器保存了没有被引用的变量，但是闭包的本地变量是被引用和使用的，就不存在内存泄露的问题。

我们来看一下闭包的定义：

「函数」和「函数内部能访问到的变量」（也叫环境）的总和，就是一个闭包。

防抖和节流是闭包的典型应用场景，我们来看一下代码：

防抖：

function debounce(fn, delay) {
    var timer = null;
    return function() {
        if(timer) {
            clearTimeout(timer);
        }  
        timer = setTimeout(() => {
                fn&&fn();
        }, delay);
    }
    
}

节流：

function throttle(fn, delay) {
	var timer = null;
	return function() {
		if(!timer) {
			timer = setTimeout(() => {
				timer = null
				fn&&fn()
			}, delay);
		}
	}
}

防抖的业务场景一般是在实时输入检索，节流的业务场景一般为高频事件回调，比如图片懒加载