闭包函数的认识-CSDN博客

本文链接：https://blog.csdn.net/qq_52886072/article/details/120337322

概念：函数可以应用函数内部的局部变量

特点：

1、使用不但会很容易造成内存泄漏；

2、设置私有变量

作用：

1、函数外部可以访问函数内部的函数的变量，减少变量的声明

2、内存占用空间大，浪费内存

3、防止变量污染

实例：

<!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>Document</title>
</head>
<body>
<ul>
    <li>红</li>
    <li>橙</li>
    <li>黄</li>
    <li>绿</li>
    <li>青</li>
</ul>
</body>
<script>
    // 需求1：读取每个li的下标
    let li =document.querySelectorAll("li");
    // 1.常规写法：
        // 注意：
            // 使用var定义i时,需等待执行完成后输出下标,即每次点击的下标都是索引的最后一个
            // 使用let定义i时，循环之间互不干扰，输出下标为每个li对应的下标
    // for(let i=0;i<li.length;i++){
    //    li[i].onclick=function(){
    //        console.log(i);
    //    } 
    // }


    //2.闭包写法：
    // for(var i=0;i<li.length;i++){
    //     liClick(i);//将li传递出去
    // } 
    // function liClick(key){
    //     li[i].onclick=function(){
    //         console.log(key);
    //     }
    // }


    //3.函数自调用写法
    // for(var i=0;i<li.length;i++){
    //     // ()()使用自调用函数
    //     (function (k){
    //         li[k].onclick=function(){
    //             console.log(k);
    //         }
    //     })(i);//括号中传入实参
    // }

    // 4.利用事件委托实现
    let ul=document.querySelectorAll("ul");
    ul.onclick=function($event){//$event:调用window事件
        console.log($event.target.innerHTML);
    }

</script>
</html>