了解JS中var与let的区别

吐槽君 分类:javascript

平时开发中很少注意到var和let的区别,只知道var是ES5定义变量的标准,letES6的标准。对于后端程序员来说很少会注意到两者的区别,大概了解两者均是定义变量的一种关键字,下面以一个有趣的代码执行现象来看两者的区别

需求

为页面中五个按钮绑定点击事件,点击其中任意一个按钮页面弹出点击按钮值
在这里插入图片描述
我们先简单实现这个需求,实现的代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>the difference between var and let</title>
</head>
<script type="application/javascript">
    // 为每一个button绑定一个点击函数,然后弹出按钮的值   
    window.onload = function () {
        var btns = document.getElementsByTagName("button")
        for (var i = 0; i <= btns.length - 1; i++) {
            var btn = btns[i];
            btn.addEventListener('click', function () {
                alert(btn.innerText)
            })
        }
    }

</script>
<body>
<div id="box">
    <button>button1</button>
    <button>button2</button>
    <button>button3</button>
    <button>button4</button>
    <button>button5</button>
</div>
</body>
</html>
 

执行页面效果如下所示:
在这里插入图片描述

看到这里是不是很奇怪,无论哪个按钮点击弹出的都是button5而不是我们期望的值,但是如果将上面for循环代码定义变量ibtn的关键字由var 改为let
在这里插入图片描述
重新运行效果如下所示:
在这里插入图片描述
看到这里两种运行效果,有同学可能会问为什么将var变为let 就实现了我们想要的运行效果了呢?解释这个问题我们需要先了解一个概念:块级作用域

块级作用域

先看一下以下代码:

    {
        var x =123
    }
    // 控制台可打印123
    console.log(x)
 

向上述被{} 包括的代码我们称之为代码块,有后端开发经验的同学对此肯定不陌生,上面的代码控制台可以输出x的值为123。但是如果我们将var改为let控制台将会报下面的错误:
在这里插入图片描述

由此我们知道let定义的变量只对当前代码块内有效,而ES5只有函数作用域和全局作用域,没有块级作用域,所以{}限定不了var声明变量的访问范围。

正是由于ES5 中没有块级作用域,所以很好理解之前需求代码中for循环定义的变量i泄露为全局变量,所以无论怎么点击都变成了button5。如果将变量ilet声明,当前的i就只会在本轮循环有效,所以每一次循环的i其实都是一个新的变量,所以点击哪个按钮就会弹出当前按钮的值。我们在ES5中还可以使用闭包函数解决这个问题:

    window.onload = function () {
        var btns = document.getElementsByTagName("button")
        for (var i = 0; i <= btns.length - 1; i++) {
            (function () {
                var btn = btns[i];
                btn.addEventListener('click', function () {
                    alert( btn.innerText)
                })
            })(i)
        }
    }
 

虽然ES5中没有没有块级作用域,只包含函数作用域和全局作用域。函数作用域定义的变量只对当前函数内有效。所以就不存在有变量泄露的问题。

代码地址

案例代码

网站出售中,有意者加微信:javadudu

回复

我来回复
  • 暂无回复内容