js闭包及var和let对闭包的作用

最新推荐文章于 2021-11-19 10:49:56 发布

WaqarLeaver

最新推荐文章于 2021-11-19 10:49:56 发布

阅读量890

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/wqy248/article/details/100019544

版权

前端专栏收录该内容

32 篇文章 1 订阅

订阅专栏

js闭包及var和let对闭包的作用

为了便于理解，本文用一个例子程序来体现js闭包和var、let变量声明对所谓闭包的作用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script>
    function test() {
        for(var i=0;i<10;i++){
            console.log(i);
        }
    };

    var testclosing_innerfuncs=[];
    function test_closing(){
        for(var inner=0;inner<10;inner++){
            testclosing_innerfuncs.push(function f() {
                console.log(inner);
            })
        }
    }

    var testavoidclosing_innerfuncs=[];
    function test_avoidclosing(){
        for(let inner=0;inner<10;inner++){
            testavoidclosing_innerfuncs.push(function f() {
                console.log(inner);
            })
        }
    }
    test();
    console.log("------------");

    test_closing();
    testclosing_innerfuncs.forEach(item=>{
        item();
    });
    console.log("------------");
    test_avoidclosing();
    testavoidclosing_innerfuncs.forEach(item=>{
        item();
    })


</script>
<body>

</body>
</html>

以上例子控制台输出：
在这里插入图片描述

其中第一个函数test()是普通函数，用于对比。
第二个函数test_closing是存在闭包的函数，虽然函数内部变量inner作用域只存在函数内循环体，但由于全局变量testclosing_innerfuncs的赋值引用，所以在执行test_closing函数时，仍然可以使用该内部变量，但由于闭包，调用时inner早已循环递加到10，所以输出10个10。
第三个函数test_avoidclosing是避免闭包对原始函数的影响，方法是让内部变量inner用let声明而不是var，let使变量只在作用域内有效，而不会存在于闭包所在的“气泡”（引自Secrets of the JavaScript Ninja）中。

WaqarLeaver

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js闭包及var和let对闭包的作用

js闭包及var和let对闭包的作用为了便于理解，本文用一个例子程序来体现js闭包和var、let变量声明对所谓闭包的作用。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></hea...
复制链接

扫一扫

专栏目录