前端知识点---闭包(javascript)

文章目录

1.怎么理解闭包?
2.闭包的特点
3.闭包的作用?
[4 闭包注意事项：](#4 闭包注意事项：)
[5 形象理解](#5 形象理解)
[6 闭包的应用](#6 闭包的应用)

1.怎么理解闭包?

函数里面包着另一个函数，并且内部函数可以访问外部函数的变量。

js 复制代码

<script>
function box() {
        //周围状态（外部函数中定义的局部变量）
        let a = 1;

        // fn 就是封闭的函数
        function fn() {
          //封闭函数使用-外部的局部变量a（引用了周围状态）
          //   console.log(a++);
          a++;
          console.log(a);
          
        }
        // 外部函数-返回了内部函数
        return fn;
      }

      //   调用box，就会得到一个函数（就是box内部定义的那个函数fn）
      let resFn = box();
      //   resFn 引用box内部的fn，fn引用了局部变量a，导致a在box函数执行完毕以后，所占用的内存，没有被回收掉
      // 让a常驻内存，像是全局变量一样
      console.log(resFn);
</script>

外部没法修改count 只能调用fn 相当于count被保护了

不像是全局变量, 任和地方都可以改值 , 如果在别的地方想用count的值可以在console.log(a);下return a

📌 关键点：

inner() 是闭包，它能访问 outer() 作用域里的 count。
每次调用 fn()，count 的值都会保留，不会重置。

2.闭包的特点

特点	说明
访问外部变量	内部函数能访问外部函数的变量
变量不会消失	外部函数执行完后，变量不会被销毁，因为被内部函数"记住"了
常用于记忆数据	比如计数器、缓存、封装数据等

3.闭包的作用?

封闭数据，实现数据私有，外部也可以访问函数内部的变量

做缓存/记忆功能

在异步代码中保存上下文

4 闭包注意事项：

闭包会占用内存，变量不会被回收，要小心内存泄漏。

不要滥用闭包，大量使用可能影响性能。

5 形象理解

你开了一家面馆：

js 复制代码

function 开饭店() {
  let 秘方 = "老坛酸菜配方"; // 这是私密变量，别人不能直接拿走

  return function 厨师() {
    console.log("我记得老板的秘方是：" + 秘方);
  };
}

let 厨师小王 = 开饭店(); // 开店完，返回了一个记得秘方的厨师

🍽️ 每次叫他做菜：

js 复制代码

厨师小王(); // 我记得老板的秘方是：老坛酸菜配方
厨师小王(); // 我记得老板的秘方是：老坛酸菜配方

6 闭包的应用

js 复制代码

for(var i=0;i<10;i++){
        setTimeout(() => {
            console.log(i);
            
        }, 1000);
        
    }

js 复制代码

for(let i=0;i<10;i++){
        setTimeout(() => {
            console.log(i);
            
        }, 1000);
        
    }

js 复制代码

let btns=document.querySelectorAll('button')
    btns.forEach((v,i)=>{
        v.onclick=()=>{
            console.log(v,i);
            
        }
    })
    console.log('111');

循环已经结束了但还能拿到v跟i的值说明形成了闭包