let是es6中新加的作用域,即块级作用域。
var申明的变量要么全局,要么函数级,而let允许把变量的作用域限制在块级域中,这里的块级可以是()内,或{}内。
示例:
code_1:
1 "use strict"; 2 var a = []; 3 for(let i=0; i<10; i++){ 4 a[i] = function(){ 5 console.log(i); 6 } 7 } 8 a[6]();//结果为6
code_2:
1 var a = []; 2 for(var i=0; i<10; i++){ 3 a[i] = function(){ 4 console.log(i); 5 } 6 } 7 a[6]();//结果为10
code_3:
1 var a = []; 2 for (var i = 0; i < 10; i++) 3 (function(c) { 4 a[i] = function() { 5 console.log(c); 6 } 7 }(i)); 8 a[6]();//结果为6
先来说说code_1和code_2,最开始接触到let作用域时,就看到这个例子,尽管当时也看了别人写的一些文章,但感觉一直没有弄懂,看着这两段代码挺简单的,但就是想不明白为什么code_1的结果是6,code_2的结果是10(自己还是太菜了(ー?ー|||)),今天看redux时,决定从头把一些基础知识进行梳理一遍,然后又接触到let,就想到这两段代码,想了很久,还是没明白(ー?ー|||),于是问同事,同事给了我一个提示,最终算是真正理解了,至少这个结果能够解释得通了(觉得自己废话好多)。
言归正传,在code_2中,由var定义的变量 i 是一个全局变量,每次循环的时候 i 都会被覆盖,而for循环体内的a[i]只是定义了一个函数,函数内部的打印的 i 在使用前还是一个变量,并不是固定的值,循环结束,全局变量 i = 10,所以最后调用a[6]()时打印的结果为10。在code_1中,由let定义的变量 i 在块级作用域内,每次循环时,a[i]函数中的 i 不会再改变,所以循环结束后打印的结果为6。code_3涉及到函数闭包,在网上看到了,就贴一下。
参考:
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/let
https://segmentfault.com/q/1010000002466776
时间: 2024-10-29 14:35:00