闭包与它的两个作用

闭包

主要依赖的点是里面的变量和参数不会被垃圾回收机制回收

函数的定义过程与执行过程

1.开辟一个存储空间来装代码块

2.预编译

3.将存储空间和预编译的空结合变成一个执行空间

4.找到这个执行空间进行执行

5.销毁这个执行空间 存储空间也会被销毁

如果里面返回的数据类型 为引用数据类型就存储空间不会被销毁(对象的存储空间和函数存储空间不在一个地方 保持引用关系)

闭包主要使用的以返回函数作为保持引号关系而不让回收机制回收的特点

闭包的满足条件

1.内部函数必须调用外部函数的变量或者参数

2.必须以返回函数作为对应的一种返回形式

闭包的特点

function fn(a){
    //参数a 这个参数a是不会被销毁的(坏处:内存占用)
    return function(){
        //访问到这个a
        console.log(a);
    }
}
console.log( fn('hello'));//调用外部函数 (好处:内部的变量不会被外部污染)
1.内部的函数可以访问外部的内容
2.外部不能访问内部函数的变量

2.1 优点 保证内部函数变量的私有性(不会被外部内容污染)

2.2 缺点 一直要保持对这个变量的引用(效率低)

3.里面的变量和参数不会被垃圾回收机制回收

3.1 优点 可以作为缓存

3.2 缺点 占用内存

闭包的应用案例

防抖

在一定时间范围内进入执行的函数 会被忽略掉只剩一个(避免函数重复调用)

// 防抖  避免函数的重复调用  只执行一次
// 电梯  隔10秒一个人 再隔10秒一个人  .... 电梯关门为20秒 乘坐的都是一个电梯 
// 应用场景 表单输入验证 等我有段时间没输入内容他就会验证
// setTimeout

function antishake(func,wait){//传入参数 为执行的方法 间隔的时间
    let timer = null //声明延时器对象为空
    return function(){
        clearTimeout(timer) //清除延时器
        timer = setTimeout(()=>{//延时器调用
            func()
        },wait)//区间内进来的只有一次执行
    }
}
let antishake1 = antishake(function(){
    console.log('hello');
},1000)
document.querySelector('div').onmouseenter = function(){
    antishake1()
}
节流

减少对应的函数执行次数 (连续多次的执行)

// 节流
//减少重复调用
//高铁站出租车只有一俩 如果有人在亮红灯 不能坐(让他走) 没有人绿灯(自己上去做)
//节流阀来控制节流 
function throttle(fn,wait){//执行的函数 等待的时间
    let timer = null //节流阀
    return function(){
        if(timer) return //null false 不是null结果就是true 如果上车了没有直接跳过 没有人我就上去
        timer = setTimeout(()=>{ //上车了
            fn()
            timer = null//做完以后节流阀设置null 人下车了
        },wait)
    }
}
let throttle1 = throttle(function(){
    console.log("我上车了");
},2000)
document.querySelector('div').onclick = function(){
    throttle1()
}
节流与防抖的区别
// 节流和防抖的区别
防抖避免重复执行  只执行一次
节流 减少执行次数 执行多次
``

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值