了解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中没有没有块级作用域,只包含函数作用域和全局作用域。函数作用域定义的变量只对当前函数内有效。所以就不存在有变量泄露的问题。

代码地址

案例代码

回复

我来回复
  • 暂无回复内容