var声明用来计数的循环变量泄漏为全局变量问题

问题描述：遍历a标签依次输出该标签的序号,结果3次都输出的是3，预期是0，1，2

   <ol>

        <li><a href="javascript:void(0);" class="clickBox">clickbox</a></li>

        <li><a href="javascript:void(0);" class="clickBox">clickbox</a></li>

        <li><a href="javascript:void(0);" class="clickBox">clickbox</a></li>

    </ol>

var clickBoxs = document.querySelectorAll('.clickBox')

for (var i = 0; i < clickBoxs.length; i++){

    clickBoxs[i].onclick = function(){

        console.log(i)

    }

}

问题本质：变量i用var声明，在全局范围内有效。所以每一次循环，新的i值都会覆盖旧的，导致最后输出的都是最后一轮的i的值。

解决方法一：闭包

function iteratorFactory(i) {

     return function(e) {

          console.log(i);

     }

}

var clickBoxs = document.querySelectorAll('.clickBox')

for (var i = 0; i < clickBoxs.length; i++){

    clickBoxs[i].onclick = iteratorFactory(i);

}

解决方法二：es6用let声明用来计数的循环变量

var clickBoxs = document.querySelectorAll('.clickBox')

for (let i = 0; i < clickBoxs.length; i++) {

    clickBoxs[i].onclick = function() {

        console.log(i)

    }

}

es6更优雅的写法：箭头函数

var clickBoxs = document.querySelectorAll('.clickBox')

for (let i = 0; i < clickBoxs.length; i++) {

    clickBoxs[i].onclick = () => console.log(i);

}

ES6与ES5声明变量补充：

1.ES5只有全局作用域和函数作用域，没有块级作用域，会导致两种常见的不合理场景：1）var声明的内层变量覆盖外层变量，例如：

var nickname = 'freedom';

{

    var nickname = 'victory';

    console.log(1, nickname);

}

console.log(2, nickname)

VM76:4 1 "victory"

VM76:6 2 "victory"

ES6解决方法：使用let的块级作用域避免变量提升

var nickname = 'freedom';

if(true) {

    let nickname = 'victory';

    console.log(1, nickname);

}

console.log(2, nickname)

VM97:4 1 "victory"

VM97:6 2 "freedom"

2)var声明用来计数的循环变量泄漏为全局变量，详细见前文。

2.ES6块级作用域变量声明的另外一个关键字const，用于声明常量

常用场景：引用第三方库声明的变量，避免未来重复命名或者重命名

例如：const os = require(‘os’);