JS闭包及其作用(简单举例)

    闭包:保证数据的安全,需要反复使用的时候采用闭包

    查阅了很多资料,把闭包分为两类理解:

         广义闭包:函数内部用到了外部变量

         狭义闭包:内部函数用到了外部函数的局部变量

因为闭包是用来反复调用的安全数据,因此把闭包分为两层:

        外部函数用来存储数据,且返回一个方法;而内部函数用来进行过程的逻辑处理并返回结果

下面代码为闭包函数的例子,外部死数据,内部逻辑处理

 function getFn() {
            let arr = [{ name: "金" }, { name: "木" }, { name: "水" }, { name: "火" }, { name: "土" }]
            let index = -1
            return () => {
                index++;
                if (index == arr.length) index = 0
                return arr[index].name
            }
        }

         咱为什么要用闭包?用全局不香吗?

    香,确实香,但是你敢这样老板分分钟弄死你哈哈哈哈,因为全局的东西随便改,非常不安全,不仅程序员容易改到全局的变量而造成变量污染,因此闭包当然有必要,但是他的主要功能还是数据的安全.

      但是闭包也有缺点,他会造成内存的占用,大家都知道JS的垃圾回收机制吧.首先,先看下面的代码,再返回这里看,很好你现在看完了是吗,而这就是占用内存的原因,当我叫读者去看下面代码的时候,其实我这里的文字已经存在了,而在等待你们看完再回来读这段话,而这就是内存的占用.

        从代码看,将函数的回调函数保存在变量show里面,而可以看到,show这个里面保存的函数,是包括index和arr的,那我如果要去调用这个show,那么index和arr哪里来?正常来说,当给show赋值后,getFn这个函数用完就会释放内存了,但是因为闭包原因,其实他们还在,他们始终还在内存中没有释放,因为他们的index和arr还在准备复用的状态,他们就不会被垃圾回收机制收掉.

        那这闭包岂不是占用了内存了吗?答案是肯定的,但也是可以解决的,比如重新给show一个null值就可以释放内存了,因此这里记得声明变量show的时候不要用const!!变了常量就永远改不了了.但是说实话,在开发中我也没让他为null过,为什么,那就要从出发点开始想,我是为了多次复用这个东西才去做的闭包,才用的变量保存这个东西,为了方便调用,也不会在乎这点内存了,而且既然只用一次闭包也就不用返回回调函数了不是吗,所以没必要,按照原来占着内存就好,省内存固然是好事,但你可以在其他地方去节省,在这节省只会加重程序员的负担,嘿嘿嘿

        //接上面代码  
        let show = getFn()

        let h1 = document.querySelector('h1')
        h1.innerText = show()

        document.querySelector('button').addEventListener('click', function () {
            h1.innerText = show()
        })