let与var：JavaScript作用域解析对比-优快云博客

本文链接：https://blog.youkuaiyun.com/wang_swa99er/article/details/122983883

let和var关键字

let 关键字用来声明变量只要遇到大括号就形成作用域
【注】let关键字声明的变量，所在作用域叫做块级作用域
var 关键字声明变量，将变量或者形参所在函数的大括号作为作用域处理

1.作用域不同
在函数中声明了var，整个函数内都是有效的，比如说在for循环内定义的一个var变量，实际上其在for循环以外也是可以访问的

而let由于是块作用域，所以如果在块作用域内定义的变量，比如说在for循环内，在其外面是不可被访问的，所以for循环推荐用let

2、let不能在定义之前访问该变量，但是var可以（声明提升）
let必须先声明，再使用。
而var先使用后声明也行，只不过直接使用但没有定义的时候，其值是undefined。var有一个变量提升的过程，当整个函数作用域被创建的时候，实际上var定义的变量都会被创建，并且如果此时没有初始化的话，则默认为初始化一个undefined。

3、let不能被重新定义，但是var是可以的

案例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script>
            window.onload = function(){
                var aBtns = document.getElementsByTagName("button");
                for(let i = 0; i <= aBtns.length ; i++) {
                    aBtns[i].onclick = function(){
                        alert(i);
                    }
                }
            }
        </script>
    </head>
    <body>
        <button>按钮1</button>
        <button>按钮2</button>
        <button>按钮3</button>
    </body>
</html>

let关键词

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script>
            window.onload = function(){
                var aBtns = document.getElementsByTagName("button");
                for(var i = 0; i <= aBtns.length ; i++){
                    aBtns[i].onclick = function(){
                        alert(i);
                    }
                }
            }
        </script>
    </head>
    <body>
        <button>按钮1</button>
        <button>按钮2</button>
        <button>按钮3</button>
    </body>
</html>