闭包

本文深入探讨了JavaScript中的闭包概念,它允许函数访问并操作外部作用域的变量。通过示例代码展示了闭包如何实现只执行一次的功能。同时,文章提到了闭包可能导致的内存泄漏问题,并提供了防抖函数的实现,说明了闭包在性能优化中的作用。此外,还讨论了闭包在事件监听中可能导致的内存冗余问题及其解决策略。
摘要由CSDN通过智能技术生成

闭包

一个函数和对其周围状态(lexical environment,词法环境)的引用捆绑在一起(或者说函数被引用包围),这样的组合就是闭包(closure)。
简单来说就是一个函数可以访问其他函数作用域的变量。

function once(fn){
  let flag = false;
  return function(){
  //done不会被释放
    if(!flag){
      flag = true;
      return fn.apply(this,arguments)
    }
  }
}
let pay = once(function(money){
  console.log(`已支付${money}元`)
})
// 只会执行一次
pay(1)
pay(1)

闭包的本质:函数在执行的时候会放到一个执行栈上当函数执行完毕之后会从执行栈上移除,但是堆上的作用域成员因为被外部引用不能被释放,因此内部函数依然可以访问外部的成员。

弊端

//内存泄漏
<div dec="a">1</div>
<div dec="b">2</div>

//script
let divs = domcument.querySelectorAll("div")
divs.forEach(item => {
	let desc = item.getAAttribute("desc")
	item.addEventListener("click",()=>{
		console.log(desc)
		//每次都会存储item,导致内存冗余
		console.log(item)
	})
	//手动释放内存
	item = null
})

常用的闭包操作

//防抖(debounce)
/**
     * @fn: function 需要防抖的函数
     * @delay: number 毫秒
**/
function debounce(fn,delay){
    let timer = null //借助闭包
    return function() {
        if(timer){
        	// 在定时的过程中出发相同的事件
            clearTimeout(timer) 
        }
        timer = setTimeout(fn,delay)
    }
}
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值