- 1.块级作用域
(1)
<script>
if (true) {
var i = 100;
}
console.log(i); // 输出100
</script>
<script>
if (true) {
let i = 100;
}
console.log(i); // 报错!
</script>
(2)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
<script>
var oli = document.querySelectorAll("ul li")
for (var i = 0; i < oli.length; i++) {
oli[i].onclick = function() {
console.log(i); // 无论点击哪个li 都只输出3; 将var改成let后 可以对应输出123
}
}
</script>
</body>
</html>
- 是否运行重复声明
<script>
var a = 1;
var a = 2;
console.log(a); // 输出2(var允许重复声明)
</script>
<script>
let a = 1;
let a = 2;
console.log(a); // 报错!(let不允许重复声明)
</script>
- 是否有变量提升
<script>
function test() {
console.log(myname); // 暂存性死区
var myname = 'frank';
}
test() // 输出 undefined (myname变量提升)
</script>
<script>
function test() {
console.log(myname); // 暂存性死区
let myname = 'frank';
}
test() // 报错! (myname没有变量提升)
</script>
- 是否与顶层对象挂钩
<script>
var myage = 100
console.log(window.myage); //输出100 (var与顶层对象挂钩)
</script>
<script>
let myage = 100
console.log(window.myage); //输出undefined (let不与顶层对象挂钩)
</script>