javaScript中var与let的区别

最新推荐文章于 2024-07-21 16:07:54 发布

壮乡码农

最新推荐文章于 2024-07-21 16:07:54 发布

阅读量90

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/yuwusheng18/article/details/119756130

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

代码案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>var和let区别测试</title>
</head>
<body>
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
</body>
<script>
    let btns = document.getElementsByTagName("button");
    for(var i = 0;i< btns.length;i++) {
        btns[i].addEventListener("click", function () {
            console.log("第" + i + "按钮被点击")
        });
    }

    // ES5作用域  使用闭包解决
    // ES5作用域  没有代码块作用域，但是存在函数作用域，使用闭包解决作用域问题
    var btns = document.getElementsByTagName("button");
    for(var i = 0;i< btns.length;i++){
        (function(i){
            btns[i].addEventListener("click",function(){
                console.log("第"+i+"按钮被点击")
            });
        }(i));
    }

    //ES6使用let，存在代码块作用域
    let btns = document.getElementsByTagName("button");
    for(let i = 0;i< btns.length;i++) {
        (function (i) {
            btns[i].addEventListener("click", function () {
                console.log("第" + i + "按钮被点击")
            });
        }(i));
    }

    //ES5错误用法
    var i = 0;
    {
        var i = 1;
        btns[0].addEventListener("click",function(){
            console.log("i是不是等于1?i="+i);
        })
    }

    {
        var i = 2;
        btns[1].addEventListener("click",function(){
            console.log("i是不是等于2?i="+i);
        });
    }

    {
        var i = 3;
        btns[2].addEventListener("click",function(){
            console.log("i是不是等于3?i="+i);
        });
    }

    {
        var i = 4;
        btns[3].addEventListener("click",function(){
            console.log("i是不是等于4?i="+i);
        });
    }
</script>
</html>

总结

1.ES5作用域没有代码块作用域，但是存在函数作用域，使用闭包解决作用域问题
2.ES6使用let，存在代码块作用域

壮乡码农

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javaScript中var与let的区别

代码案例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>var和let区别测试</title></head><body><button>1</button><button>2</button><button>3</button&g
复制链接

扫一扫

专栏目录