typescript中let和var、for循环和闭包的探索

typescript中let和var、for循环和闭包的探索

最近在做一些场景优化时，突然发现一些代码的实现效果并没有如我所预期的那样运行，仔细研究了一下发现了一些有趣的知识。

1. 和问题有关的知识储备

闭包：在TypeScript中，闭包是一个函数和它所引用的外部环境的组合。闭包可以捕获并维持外部环境的状态。

function outerFunction() {
  let outerVariable = "I am from outer function";

  function innerFunction() {
    console.log(outerVariable);
  }

  return innerFunction;
}

let closure = outerFunction();
closure(); // 输出：I am from outer function

在这段代码里可以看到，内部函数innerFunction因为闭包的特性访问到了outerVariable 这个变量，这就是闭包的一个典型用法，它允许函数保持与某个特定环境的关联，即使那个环境已经消失了。

2. 当闭包碰到了for循环，let和var的替换

//这是一个添加promise的函数，里面延迟0.1秒触发callFunc并触发下一个promise
addPromise(callFunc: Function): void {}

main(){
	let i= 0;
	i++;
	this.addPromise(()=>{
		console.log(i);
	});
	i++;
	this.addPromise(()=>{
		console.log(i);
	});
}

• 此方法打印的结果是

2
2

这是因为闭包引用的i指向的是同一个地址，在函数触发时的值为2。

那么使用for循环呢？

main(){
	for(let i = 1; i <= 2; i++){
		this.addPromise(()=>{
			console.log(i);
		});
	}
}

• 此方法打印的结果是

1
2

为何跟之前的结果不一样呢？

在这个for循环中，i是由let声明的，使用let声明的变量具有块级作用域，每一次迭代中都会创建一个新的i变量实例，这时候由于闭包的机制，只会捕捉到此环境中的i值。

但是，如果这个for循环中i是使用var声明的，要知道var是共享同一个变量，也就是回到了第一种情况

• 使用var声明时，打印的结果是

3
3

这是因为使用 var 声明的变量会存在变量提升（hoisting）和函数作用域的特性。当你在一个作用域内使用 var 声明变量时，该变量会被提升到作用域的顶部，而不是保留在声明位置。

所以请习惯使用let，而不是var，避免出现奇怪的闭包问题。