闭包函数

概念

闭包函数：声明在一个函数中的函数，叫做闭包函数。

闭包：内部函数总是可以访问其所在的外部函数中声明的参数和变量，即使在其外部函数被返回（寿命终结）了之后。

 

优缺点

让外部访问函数内部变量成为可能；

局部变量会常驻在内存中；

可以避免使用全局变量，防止全局变量污染；

会造成内存泄漏（有一块内存空间被长期占用，而不被释放）

 

代码示例

 1       function outer() {
 2           //私有空间
 3           function inner() {
 4               console.log("内部函数")
 5           }
 6          return inner;
 7       }
 8      const closure=outer();
 9      closure();
10     //  const closure=function(){
11     //      console.log("内部函数")
12     //  }
13 
14 
15 
16 
17   // ES6
18   const outer=()=>{
19     return ()=>{
20       console.log("内部函数")
21     }
22   }
23   const closure=outer();
24   closure();

 

 

案例（计时器）

像我们如下写一个计时器

  // // 计数器

  const add=()=>{
    let counter=0;
    counter++;
    return counter;
  }
  // 调用三次 add()
  console.log(add());
  console.log(add());
  console.log(add());

会发现三次执行效果都是1，这是因为每一次调用都会销毁原函数，所以需要使用闭包来达到计时效果，调用闭包函数是不会销毁闭包函数的，会一直保存，也就造成了内存占用

  const add = () => {
    let counter = 0;
    //闭包
    return () => {
      counter++;
      return counter;
    }
  }
  // 调用三次 add()
  const closure=add();
  console.log(closure());
  console.log(closure());
  console.log(closure());

如此，便能实现计时效果。

案例（验证码）

像我们登录设备的时候获取验证码，倒计时可以使用闭包函数来实现，如

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <p id="demo"></p>
</body>

</html>
<script>

  const add = () => {
    let counter = 10;
    //闭包
    return () => {
      counter--;
      return counter;
    }
  }
  const closure = add()
  let timer = setInterval(() => {
    let h1 = document.getElementById('demo')
    h1.textContent = closure();
    if (h1.textContent == 0) {
      clearInterval(timer)
      h1.textContent = "重新获取验证码";
    }
  }, 1000)

</script>

达到一种倒计时效果。

 

 

 

posted @ 2022-03-18 10:29  AKpz  阅读(138)  评论(0)    收藏  举报