关于闭包的简单整理

休174

已于 2023-09-24 20:20:59 修改

阅读量25

点赞数

文章标签：前端 javascript 开发语言

于 2023-09-24 17:37:40 首次发布

本文链接：https://blog.csdn.net/weixin_72974213/article/details/133243753

版权

什么是闭包

简单讲，闭包就是指有权访问另一个函数作用域中的变量的函数。就是能够读取其他函数内部变量的函数。

简单的闭包例子

毕竟简单常见的就是内部返回一个函数

function closure(){
    var a = 0
    return function(){
        return a
    }
}

var b = closure()
console.log(b()) //输出：1


for(var i = 0;i<5;i++){
    (function(i){
        setTimeout(function(){
            console.log(i + ' ')
        },1000)    
    }(i))
}

闭包的优缺点

优点

①保护函数内的变量安全，实现封装，防止变量流入其他环境发生命名冲突；

var one= "one";
var oneNum= function(){
	var one= "1";
	return function(){
	    return one;
    }
}()
console.log(one);//"one"
console.log(oneNum());//"1"

②做缓存

③匿名自执行函数可以减少内存消耗（function（）{}）{}

缺点

①内存泄漏

解决

①及时释放闭包：手动调用闭包函数，并将其返回值赋值为null

②使用立即执行函数

其他应用

防抖

当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果延时还没执行，又触发了就重新开始延时。

function debounce(fn, delay) {
    let timer = null;
    return function() {
        clearTimeout(timer);
        timer = setTimeout(() => {
            fn.apply(this, arguments);
        }, delay);
    }
}

节流

当持续触发事件时，保证在一定时间内只调用一次事件处理函数。

function throttle (func ,wait){
    let context ,args,timeout;
    return function(){
        context = this
        args = arguments
        if(!timeout){
            timeout = setTimeout(){
                func.apply(context,args)
                timeout = null
            }
        }
    }   
}

---------------------------

const throttle = (fn, interval) => {
    var enterTime = 0; //触发的时间
    var gapTime = interval || 300; //间隔时间，如果interval不传，则默认300ms
    return function () {
        var context = this;
        var backTime = new Date(); //第一次函数return即触发的时间
        if (backTime - enterTime > gapTime) {
            fn.call(context, arguments);
            enterTime = backTime; //赋值给第一次触发的时间，这样就保存了第二次触发的时间
        }
    };
}