ES6中新增加了let命令,用它声明的变量,只在代码块内有效。 什么是代码块? if(true){ let a=1; console.log(a); } 现在if语句用{}包裹起来的部分,算是代码块; for(let i=0;i<10;i++){ console.log(i); } console.log(i); 在for循环中{}包裹起来的部分是代码块;但是{}包裹起来的部分,能够访问到for语句的循环条件,应该说在for循环中,循环条件和{}包裹来的部分,都是代码块,用let,在这里面声明的变量,在外面是访问不到的。 while循环里面呢? let a=10; while(a<12){ a=a+1; let b=a+1; console.log(b); } console.log(b); 在这段代码里面,window.a是undefined, b在while循环外面是访问不到的。 在es5中,如果我们要实现下面的需求: var arr=[]; for(let i=0;i<10;i++){ arr[i]=function(){ console.log(i); } } a[2](); 这里一定要用到闭包。下面代码是用闭包来实现的: var arr=[]; for(var i=0;i<10;i++){ (function(val){ arr[val]=function(){ console.log(val); } })(i) } 这样,在控制台里面输入arr[0](),会得到0, arr[1](),会得到1. 关于闭包的使用,这里有一个比较经典的例子。页面上有5个元素,都是a标签,你可以这样来生成并附加到页面上一个id为abc的div标签中: for(let i=0;i<5;i++){ let str="<a href='javascript:void(0)' id="+i+">"+i+"</a>" $("#abc").append(str); } 针对这些a标签元素,有这样一个需求,点击一个a标签,弹出一个提示框,提示框中显示这个a标签的id号码。下面是实现代码: for(var i=0;i<5;i++){ (function(a){ $("#"+a+"").on('click',function(){ alert(a); }) })(i) } |
|