lovecoding
/
VIP32


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <p class="main1">0</p>
    <div class="btn1">加一</div>
    <br><br><br><br><br>
    <div class="main2">1</div>
    <div class="btn2">2倍</div>
    <!-- 
        闭包
        什么是闭包:闭包 指 有权访问另一个函数内部的变量
        * 什么是闭包：闭包的一大特性就是
        内部函数总是可以访问其所在的外部函数中声明的参数和变量
        外部变量不可以访问内部变量
        - 函数嵌套函数
        - 内部函数引用外部函数的局部变量
        * 闭包的作用：
        - 实现函数外部访问私有变量
        - 避免全局变量的污染 实现封装
        - 希望一个变量长期驻扎在内存中
        * 闭包的缺点：容易引发内存泄漏
    -->
    <script>
        /**经典写法*/
        // function news() {
        //     var today = '今天星期五';
        //     return function() {
        //         console.log(today)
        //     }
        // }
        // var list = news();
        // list();
        
        /**自调用写法*/
        // var list = (function() {
        //     var today = '天气真好';
        //     return function() {
        //         console.log(today)
        //     }
        // })()
        // list();

        // function a() {
        //     console.log("1111")
        // }
        // a()
        
        // (function() {
        //     console.log('222')
        // })()
        // 闭包用法
        var uls = document.querySelector('ul');
        var lis = document.querySelectorAll("ul li");

        for(var i=0;i<lis.length;i++) {
            // lis[i].onclick = function() {
            //     console.log(i);
            // } 
            lis[i].onclick = (function() {
                // console.log(i);
                var item = i;
                return function() {
                    console.log(item)
                }
            })()
        }
        
        // 计数器
        var main1 = document.querySelector(".main1");
        var main2 = document.querySelector(".main2");
        var btn2 = document.querySelector(".btn2");
        var btn1 = document.querySelector(".btn1");
        var count2 = 1;
            var count1 = 0;

        function addCount() {
           return function(main1){
            count1++;
            main1.innerHTML = count1;
          }
        }
        var add = addCount()
        btn1.onclick = function() {
            add(main1)
        }

        var vase = (function(){
            return function(main2) {
                count2 = count2 * 2;
                main2.innerHTML = count2;
            }
        })()
        
        btn2.onclick = function() {
            vase(main2);
        }
        // btn1.addEventListener('click',function() {
        //     count1++;
        //     main1.innerHTML = count1;
        // })

        // btn2.addEventListener("click",function(){
        //     count2 = count2 * 2;
        //     main2.innerHTML = count2;
        // })

        for(var i=0;i<3;i++) {
            console.log(i,'aa')
            setTimeout(function(){
                console.log(i);
            },500)
        }
    </script>
</body>
</html>