关于var和let的疑惑

我是这样想的,当i=0的时候,把i的值传给btnA[i].onclick并开辟一块内存空间,之后两次也各开辟一块内存空间,这样不就是三块内存空间了吗,那我点击按钮的时候不就能返回对应的数字吗?但为什么无论我点哪个按钮,输出的值都是3,而把var换成let后就正常了?


for (let i = 0; i < 3; i++) {
          btnA[i].onclick = function () {
              console.log(i);
          };
        }
  1. 简单说就是var存在变量提升的问题,i提升到window上,按你的说法可以看作只占了一个栈内存,它的值由循环中的0、1、2最终跳到出循环的3停止,而你事件绑定的就只是这个栈内存而已,最终指向的堆内存的值也在跟着变,所以只有3。
  2. 而let块级变量,你就可以看作每次循环都声明了一个i,也就是开辟了三个内存。
  3. 简单记录过一个博客介绍了例子:https://blog.csdn.net/weixin_43877799/article/details/120905486

var是函数级别的作用域类似于全局变量,独一份的,因此for循环会一直改变一个变量的值,最后输出的肯定全是最后一个值。而let是块级作用域相当于局部变量,一个代码块一份独立的,所以for每次输出的值都是不一样的