JS闭包详解

末蓝、 2022-05-13 12:04 147阅读 0赞

一.函数和作用域  
自定义函数

XXX（）
    function XXX（ ） { 
    }
    // 调用函数，放在哪个位置都可以
    // 如果是获取元素，元素必须放在上面
    var fn = function () { 
    }
    fn()  // 必须放在声明的后面
    这种用var声明的函数调用必须放在声明的后面

函数变量的作用域  
全局变量和局部变量局部变量在函数内部使用  
全局变量在函数外部声明的变量，可以在函数中使用  
局部变量是受保护的，不能随意受外部使用  
如果我们想在外面使用局部变量，要怎么办呢  
闭包  
什么叫闭包  
所谓闭包，是指语法域位于某个特定的区域，具有持续参照位于该区域自身范围之外的执行域上的非持久性比变量值能力的段落，在这些外部执行与的非持久性变量神奇的保留他们在闭包最初定义时的值  
白话： 我们可以用一个函数去访问另外一个函数的内部变量  
![这里写图片描述][70]  
闭包常用写法：  
![这里写图片描述][70 1]

闭包的优缺点  
优点：不产生全局变量，实现属性私有化  
缺点：闭包的数据会常驻内存，在不用的时候要删掉否则会导致内存溢出

进阶：闭包的函数传参  
![这里写图片描述][70 2]

结果： undefined  
6

闭包如何用呢？  
![这里写图片描述][70 3]  
![这里写图片描述][70 4]  
函数立即执行  
不用函数名就可以了  
![这里写图片描述][70 5]  
闭包版的tab栏切换  
![这里写图片描述][70 6]

关于闭包的深度思考  
前面有封装过一些函数，也是有返回值，是这样的

（语法：Vue项目中封装的方法） 
        // 判断验证码是否输入准确
        checkCode () {
          let vcode = this.loginInfo.vcode
          vcode = vcode.toUpperCase()
          let ccode = this.ccode
          ccode = ccode.toUpperCase()
          if (vcode !== ccode) {
            return 0
          } else {
            return 1
          }
        },
    // 使用的话这个样子
    let codestatus = this.checkCode()

调用这个函数，返回的是0和1  
闭包也是返回值，这样看起来闭包到是有些多余了？  
慢慢的看了一些闭包的用法，我明白了闭包的用处  
不用闭包，可能我们返回的是一个数值，但是使用闭包返回的确实一个函数，一个函数体，这时在很多时候像有各种触发事件就可以直接调用闭包函数。这时，如果用我们封装的普通函数，返回的只是值，而闭包返回的是函数体啊

闭包节流  
![这里写图片描述][70 7]

[70]: /images/20220513/e88fb8de109849878f005fe316310b19.png
[70 1]: /images/20220513/8db60f28b69a48c293f22f46abf7db75.png
[70 2]: /images/20220513/7597f24a67a146e499ebaeaa771fc47d.png
[70 3]: /images/20220513/0ed432fd779849b2b8d76c5b6211f020.png
[70 4]: /images/20220513/603252fad3324d03916678fa3d667707.png
[70 5]: /images/20220513/59d3e65887b44f02bd6e89300c49d2dd.png
[70 6]: /images/20220513/217281bf33fe4df587dfb6306bd53429.png
[70 7]: /images/20220513/d7944c64742a478088e0417f25b90abe.png