闭包的认识

那年仲夏 提交于 2020-02-29 09:48:43
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>闭包</title>
</head>

<body>
    <li>零</li>
    <li>一</li>
    <li>二</li>
    <li>三</li>
    <li>四</li>
    <script>
        //jS闭包
        //概念:简单的说就是一个函数外部变量被该函数调用,这样这个函数就形成了一个闭包

        //demo1:
        // function out() {
        //     var a = 100;
        // }
        // out()
        // console.log(a);     //输出:a is not defined。
        //out()函数执行之后函数执行空间被销毁,因为此时a已经不存在了,无法被外部访问

        //demo2:
        // function out() {
        //     var a = 100;
        //     return function () {
        //         a++
        //         console.log(a);
        //     }
        // }
        // var b = out();
        // b();           //输出:101
        // b();           //输出:102   此时的a是局部变量,但是被其内部匿名函数调用,所以在out()执行之后,返回匿名函数被变量b接收
        //                //因为匿名函数调用了out函数里面的a,所以out的内存空间并没有被销毁,b每次执行a在原有基础上++

        //demo3:
        // var li = document.getElementsByTagName("li")
        // function out() {
        //     for (var i = 0; i < 5; i++) {
        //         li[i].onclick = function () {
        //             console.log(i);
        //         }
        //     }
        // }
        // out();           //输出:不管点哪个,输出都是5,li在循环的时候已经分别绑定匿名函数0-4,
        //匿名函数里面的i就是out函数的内部变量i,在out()执行完之后已经循环到5了,所以不管点哪个都是5
        //稍作修改

        //demo4:
        // var li = document.getElementsByTagName("li")
        // function out() {
        //     for (var i = 0; i < 5; i++) {
        //         li[i].onclick = (function (j) {
        //             return function () {
        //                 console.log(j);
        //             }
        //         })(i)
        //     }
        // }
        // out();             //点几输出几,li绑定了立即执行函数的返回值(也是个匿名函数),把i传入匿名函数形参j,这样
        //立即执行函数执行完之后形参j不会被销毁,而是被它的内部函数调用,所以每次点击li就能调用相应的j,返回0,1,2,3,4

        //但是let关键字可以很好的代替这个功能
        //demo5:
        // var li = document.getElementsByTagName("li")
        // function out() {
        //     for (let i = 0; i < 5; i++) {
        //         li[i].onclick = function () {
        //             console.log(i);
        //         }
        //     }
        // }
        // out();              //效果同上,点几显示几

        //总结:
        //闭包的作用:1.调用函数局部变量给外部使用
        //缺点:1.由于一个函数局部变量被其他函数调用,所以这个局部变量就会一直存在,占用较大内存
        //     2.有内存泄漏风险

        //如有错误,欢迎指正

        ***如果你知道身上肩负着多少希望,你就能面对任何事***

    </script>
</body>

</html>

 

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!