js闭包扫盲，一分钟带你了解闭包

最新推荐文章于 2024-10-02 05:39:15 发布

YouyuZhao

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量146

点赞数

文章标签： javascript 函数闭包 html

本文链接：https://blog.csdn.net/YouyuZhao/article/details/104470102

版权

什么是js闭包？关闭的书包？

一、了解闭包

闭包的生成有三个必要条件(缺一不可)
在函数 A 内部直接或者间接返回一个函数 B
B 函数内部使用着 A 函数的私有变量(私有数据)
A 函数外部有一个变量接受着函数 B
这样就形成了一个不会销毁的函数空间。

闭包空间
我们管这个不会销毁的 a 函数的执行空间叫做闭包空间
把函数 a 里面返回的函数 b, 叫做函数a 的闭包函数（闭包 => 函数内部的函数）

例：
function a(){
    
    var num=100;
    
    return function b(){
        console.log(num)
    }
}

var res=a()

res() //100

详解：
这个num就是函数a的私有变量
res 接受的是 a 函数执行以后的返回值
res 接受的就是函数 a 内部返回的一个复杂数据类型(函数b)
导致函数 a 的执行空间不会销毁
从现在开始, res 随时可以是一个 函数a 里面返回的 函数b
res 随时可以调用
并且res()一调用，就会打印num的值

二、闭包的特点

1、闭包的特点(优点和缺点并存)

延长了变量的生命周期

优点: 因为执行空间不销毁, 变量也没有销毁
缺点: 因为执行空间不销毁, 会一直存在在内存中

可以访问函数内部的私有变量

优点: 利用闭包函数可以访问函数内部的私有变量
缺点: 执行空间不会销毁, 会一直存在在内存中

保护私有变量(只要是函数, 就有这个特点)

优点: 保护私有变量不被外界访问
缺点: 如果向访问, 必须要利用闭包函数

2、闭包的函数的缺点致命
+ 因为当一段内存空间中有一个不会被销毁的东西一直存在
+ 那么就会出现内存占用, 如果过多, 就会导致内存溢出
+ 那么结果就是内存泄漏

3、那闭包既然优缺点并存，那它到底有啥作用呢？
闭包的作用
+ 就是当你需要延长变量的声明周期的时候
+ 或者你需要访问某一个函数内部的私有数据的时候
+ 你可以使用闭包函数来解决

    + 前提:

如果有别的方法, 尽量不要使用闭包函数
只有到没有招的时候, 我们在使用闭包函数
所以：闭包！慎用！

三、闭包函数的应用

1、简单应用（间接地返回一个函数）

直接返回一个函数：
return function b() {}

间接返回一个函数：
return 一个对象或者数组
//这个对象或者数组里面有一个函数

使用情况：
+ 当你只需要访问一个数据的时候, 可以使用直接返回或者间接返回
+ 当你需要访问多个私有数据的时候：
我们就需要使用间接返回的方式
返回一个对象内包含多个闭包函数

例：
function fn() {
      var num = 100
      var num2 = 200

      return { 
        getNum: function () {
          console.log(num)
        },
        getNum2: function () {
          console.log(num2)
        }
      }
    }

    var res = fn()
 
    console.log(res)

    res.getNum() //100
    
    res.getNum2() //200

详解：
var res=fn(),res 得到的是一个对象
这个对象里面有一个函数是 fn 的闭包函数
console.log(res)得到的就是一个对象，对象里面有两个函数
res.getNum()得到的是第一个函数的num值：100
res.getNum2()得到的是第二个函数的num2的值：200

2、闭包应用之绑定事件

例：
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>

  <button>1</button>
  <button>2</button>
  <button>3</button>
  <button>4</button>

  <script>
 
var btns=document.querySelectorAll("button")

function loop(num) {
    btns[num].onclick = function () {
        console.log(num)
    }
}

for (var i = 0; i < btns.length; i++) {
    loop(i)
}

  </script>

详解：
需求： 点击的时候打印出对应的索引
实现步骤：循环绑定事件
        + 获取所有 button 按钮
        + for 循环绑定好一个点击事件
//loop(num)这个函数第一次执行的时候，i=0,num也就等于0；

//btns就相当于一个外部的变量，btns[0]就是外部的内容，
  btns[0].onclick 成员就是外部的数据；
  
// for (var i = 0; i < btns.length; i++) {
    loop(i)
}就是循环执行loop(num)函数