var、let、const三者的使用及区别

最新推荐文章于 2023-08-28 16:25:11 发布

扛狼1427

最新推荐文章于 2023-08-28 16:25:11 发布

阅读量484

点赞数 1

分类专栏： ES6 文章标签： es6 JavaScript let const var

本文链接：https://blog.csdn.net/weixin_42661283/article/details/102822846

版权

ES6 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

var：全局作用域声明变量

变量提升：

可重复性声明：

全局作用域和局部作用域：

var 全局作用域带来的问题

<body>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>
</body>


<script>
    var btns = document.getElementsByTagName('button')
    for (var i = 0; i < btns.length; i++) {

        /* 没有块级作用域带来的问题 */
        // btns[i].addEventListener('click', function () {
        //     console.log('第' + i + '个按钮被点击') // 不管点击那个按钮，打印的i都是5
        //     /* 因为for循环，i一直被改变，for循环结束后，i已经变成5，所以无论点击哪个按钮打印的i都是5 */
        // })

        /* 使用闭包的形式解决 i 被改变的问题：函数是一个作用域  */
        (function (i) {
            btns[i].addEventListener('click', function () {
                console.log('第' + (i + 1) + '个按钮被点击') // 点击的哪个按钮，打印的就是那个 i 值
            })
        })(i)
    }
</script>

let ：块级作用域声明变量

不存在变量提升

同一个块级作用域中不能重复声明

块级作用域：

实力解决for循环等变量的问题：

<body>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>
</body>


<script>
    var btns = document.getElementsByTagName('button')
    for (let i = 0; i < btns.length; i++) {
        btns[i].addEventListener('click', function () {
            console.log('第' + (i + 1) + '个按钮被点击') // 点击的哪个按钮，打印的就是那个 i 值
        })
    }
</script>