es6-块级作用域

ES6 块级作用域

在var声明的时候，我们只有在function中才会限制变量的提升，

而在let和const声明的时候，只要是{}都会限制作用域，我们称

这种作用域为块级作用域！

举个简单的例子

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <script>
        let liArr = document.querySelectorAll('ul li')
        for (var i = 0; i < liArr.length; i++) {
            liArr[i].onclick = () => {
                console.log(i);
            }
        }
    </script>

在这个例子中，我们绑定的点击事件，但是因为var变量的提升，此时i就为一个全局变量，而点击事件又是异步的。所以无论点击哪个li，都会打印5！

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <script>
        let liArr = document.querySelectorAll('ul li')
        for (let i = 0; i < liArr.length; i++) {
            liArr[i].onclick = () => {
                console.log(i);
            }
        }
    </script>

在这个里面，因为我们使用了let声明，所以作用域仅限于for循环中，所以此时点击上面的li都会对应相应的i值。

所以块级作用域在点击事件绑定中应用非常方便！