当前位置：网站首页>Closure and closure function

Closure and closure function

2022-07-03 17:58:00 【Yellow sauce!】

<script>
        // Closure ： A function can read variables inside another function externally 
        function fn(){
    
            let a = 10
            // There is one  A  function , Again  A  The function returns an  B  function 
            return function(){
    
                //B  The function internally accesses  A  Private variables inside the function 
                console.log(a)
            }
        }
        // Again  A  There is a variable outside the function to refer to this  B  function 
        let res = fn()
        res()

        // Closure effect ： Extends the life cycle of variables , Protected private variables 
    </script>


<body>
    <button> Button 1</button>
    <button> Button 2</button>
    <button> Button 3</button>
    <script>
        var aBtn = document.querySelectorAll('button')
        // for(var i=0; i<aBtn.length; i++){
    
        //     // Custom properties 
        //     aBtn[i].index = i
        //     aBtn[i].onclick = function(){
    
        //        console.log(this.index)
        //     }
        // }

        // Beneficial closure 
        // for(var i=0; i<aBtn.length; i++){
    
        //     /*
        //          Code execution order ：
        //         +  First execution 
        //           => i=0, index=0, A reference data type is returned inside the function , A new function definition space is created inside the function execution space , Extended index The declaration period of variables 
        //            The function is finished ,index Already exists in memory 
        //           => i=1, index=1, index Already exists in memory 
        //           => ...
        //     */
        //     function fn(index){
    
        //         return function(){
    
        //             console.log(index)
        //         }
        //     }
        //     aBtn[i].onclick = fn(i)
        // }

        // for(var i=0; i<aBtn.length; i++){
    
        //     /*
        //          Code execution order ：
        //         +  First execution 
        //           => i=0, index=0, A reference data type is returned inside the function , A new function definition space is created inside the function execution space , Extended index The declaration period of variables 
        //            The function is finished ,index Already exists in memory 
        //           => i=1, index=1, index Already exists in memory 
        //           => ...
        //     */
        //     // Is the combination of self executing functions and closures 
        //     aBtn[i].onclick = (function(index){
    
        //         return function () {
    
        //             console.log(index)
        //         }
        //     })(i)
        // }

        // let res = (function(){
    
        //     let a = 666
        //     return function(){
    
        //         console.log(a)
        //     }
        // })()
        // res()

        for(let i=0; i<aBtn.length; i++){
    
            aBtn[i].onclick = function(){
    
               console.log(i)
            }
        }    
    </script>

原网站

版权声明
本文为[Yellow sauce!]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/02/202202150316531427.html

当前位置：网站首页>Closure and closure function

Closure and closure function

边栏推荐

猜你喜欢

随机推荐