JavaScript题 - 闭包

/*
JS 作用域的问题。

var申明的变量，作用域是函数作用域，因为作用域链的关系，虽然外部函数执行结束，但内部函数仍然保持着对外部函数变量的引用。注意这里是引用。

因此，在下面的代码中，外部for循环结束后，i的值是 10。而内部函数因为setTimeout的关系，在for循环结束后执行，此时，10 个内部函数引用的外部函数的 i 已经变成了 10，所以就打印了 10 个 10。

函数作用域链的问题也是闭包问题产生的原因。

for (var i = 0; i < 10; i++) {
   setTimeout(function() { console.log(i) }, 0);
}

而 ES6 (ES2015) 中，用let申明的变量，作用域是块级作用域（在此之前 js 应该是没有块级作用域的概念的）。

在下面这个 for 循环中，每次循环，都会生成一个块级作用域，每个块级作用域的 i 都是相互独立的。相当于将某个循环时，i的值赋给了内部函数，注意这里是赋值，类似函数的参数传递。

当内部函数执行时，i就是循环当时i的值。let也是闭包问题解决的一个办法。传统的解决办法是使用参数传递，或者bind这样的方式。

for (let i = 0; i < 10; i++) {
   setTimeout(function() { console.log(i) }, 0);
}
*/

var arr = document.getElementsByTagName("p");
for(var i = 0; i < arr.length;i++){

    // arr[i].onclick = function(){
    //   console.log(i);
    // }

    // // 1
    // (function(arg) {
    //   arr[arg].onclick = function(){
    //       console.log(arg);
    //   }
    // })(i);

    // // 2
    // arr[i].i = i;
    // arr[i].onclick = function(){
    //   console.log(this.i);
    // }

    // // 3
    // arr[i].onclick = (function(arg){
    //   return function() {
    //     console.log(arg);
    //   }
    // })(i)

    // //4
    // let j = i;
    // arr[j].onclick = function(){
    //   console.log(j);
    // }
}