JS闭包基本及注意事项_js闭包注意事项-CSDN博客

本文链接：https://blog.csdn.net/qq_47043757/article/details/131096085

本文介绍了JavaScript中的闭包概念，强调其用于隐藏和保护变量的作用。通过示例展示了闭包如何保持对外部变量的访问，同时解释了词法作用域和函数作用域。还讨论了闭包的内存消耗以及何时选择使用闭包或类。

摘要由CSDN通过智能技术生成

学习JS闭包后的一些心得

<!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>2023.6.7</title>
    <script>
        //当需要隐藏不希望被访问的内容可以使用闭包
        //目标：尝试隐藏全局变量number，做到调用number增加
        //注意 闭包就是一个函数(就是能访问到外部函数作用域中变量的函数)
        //以下面的sooa 理解 只有当前的闭包内可以访问到number，外界是不知道number的
        //闭包使用的就是词法作用域
        function sooa(){
            let number=0 //外部
            return ()=>{//内部
                number++
                console.log('调用次数',number)

            }
        }
        const newa=sooa()
        newa()
        console.log('1')



        //闭包就是需要藏东西时使用
        let a='global'
        function ce(){
            console.log(a)
        }
        ce() //注意 这里是调用的全局变量a  
        console.log('2')
        
        //问题: 在ce2（）中调用ce() 那么变量是ce2中变量？还是global？
        //答 global  注意 看函数的外层作用域是谁 即 函数作用域在创建时已然确定 和调用位置无关
        function ce2(){
            let a='ce2中变量'
            console.log(a)
            ce()
        }
        ce2()
        console.log('3')
        
        //以下情况就是调用ce3() -->ce3中的变量 如果单独ce4()--->报错
        function ce3(){
            let a='ce3中的变量' 
            function ce4(){
                console.log(a)
            }
            ce4()
        }
        
        ce3()
        
        console.log('*4*')
        //闭包在外部函数调用时产生，外部函数每次调用时会产生全新的闭包
        function ce5(){
            let ccc=10
            return ()=>{
                ccc++
                console.log(ccc)
            }
            
        }
        
        /*此时cc1和cc2都是全新的 假设cc1循环2次 会得到12，然后循环cc2 
          还是会的到12 说明了有自己的独立闭包，互不干扰
        
        */
        const cc1= ce5()  
        const cc2= ce5()
        cc1()  //结果11
        cc2()  //结果11
        console.log('*5*')

        /*闭包在内部函数丢失时销毁 上方的cc1和cc2调用了ce5 所以闭包存在
          当cc1和cc2不在调用ce5 闭包销毁 */

        //cc1=null
        //cc2=null
        
        /* 注：闭包会占用一定空间 相较于类（类可以用原型闭包不能），闭包
               比较浪费空间
               举例来说就是上面cc1和cc2 只要有调用产生新闭包 就占用空间
               执行次数少---》使用闭包 
               执行次数多---》使用类


        */



    </script>
</head>
<body>
    
</body>
</html>