使用let
替代var
JavaScript中变量声明方式有:let
var
const
。
TypeScript中推荐使用let
来替代var
,避免在JavaScript中常见的一些问题。
场景一:
function f() {
var a = 10;
return function g() {
var b = a + 1;
return b;
}
}
上面的代码中在JavaScript中是被允许的,而一般在其他语言中,函数g里面肯定是访问不到函数f中的变量a。
场景二:
function f(shouldInitialize: boolean) {
if (shouldInitialize) {
var x = 10;
}
return x;
}
f(true); // returns '10'
f(false); // returns 'undefined'
上面这个例子更是让人看不懂。这是因为JavaScript中var
的作用域可以在包含它的函数,模块,命名空间或全局作用域内部任何位置被访问,包含它的代码块对此没有什么影响。
这种作用域规则可能会引发一些错误,其中之一就是多次声明同一个变量不会报错。
场景三:
for (var i = 0; i < 10; i++) {
setTimeout(function() { console.log(i); }, 100 * i);
}
// setTimeout会在若干毫秒的延时后执行一个函数(等待其它代码执行完毕)
上面这段代码我们可能觉着输出结果是:
0
1
2
3
4
5
6
7
8
9
然而结果确是:
10
10
10
10
10
10
10
10
10
10
反正我是看不懂,不过书上说是捕获变量。我们传给setTimeout
的每一个函数表达式实际上都引用了相同作用域里的同一个i
。
setTimeout
在若干毫秒后执行一个函数,并且是在for
循环结束后。 for
循环结束后,i
的值为10
。 所以当函数被调用的时候,它会打印出10
!
总之:尽量的使用let
来替代var
来避免上面的问题发生。
let VS const
const
与let
有相同的作用域,不过声明后不能对它们重新再赋值。