一个常见的关于闭包的面试题

题目：创建10个a标签,点击并弹出对应的序列号？

常见的错误写法

for(var i=0;i<10;i++){
　　var a=document.createElement("a");
　　a.innerHTML=i+"<br/>";
　　a.addEventListener("click",function(e){
　　　　e.preventDefault();
　　　　alert(i);
　　})
　　document.body.appendChild(a);
}

这样得到的答案每次弹出的i都是10，为什么呢？

因为这个时候i是自由变量，当前作用域找不到i就去父级的作用域找，而此时i的值早变成了10，这里相当于创建了10个函数

正确的解法

for(var i=0;i<10;i++){
　　(function(i){
　　　　var a=document.createElement("a");
　　　　a.innerHTML=i+"<br/>";
　　　　a.addEventListener("click",function(e){
　　　　　　e.preventDefault();
　　　　　　alert(i);
　　　　})
　　　　document.body.appendChild(a);
　　})(i);
}

闭包的使用场景：

1.函数作为返回值 

function F1(){

　　var a =100;

　　return function(){

　　    console.log(a);

       }

}

var f1 = F1();

var a = 200;

f1();

2. 函数作为参数传递

function F1(){

　　var a=100;

　　return function(){

　　　 console.log(a);

　　}

}

var f1 = F1();

function F2(fn){

　　var a = 200;

　　fn();

}

F2(f1);

上述两个题目的答案都是100，为什么呢？因为此时的a是一个自由变量，在父作用域上寻找，我们应该找定义它的地方，而不是执行它的地方。

本人正在不断地学习和摸索中，如有错误，欢迎指正！

 

转载于:https://www.cnblogs.com/xuniannian/p/7448655.html