JavaScript/TypeScript变量声明

前言

未整理,勿看

面试过程中, 总有一些面试官喜欢问概念性的东西, 我懂, 但是我忘了专业名词…

let 和 const是 JavaScript 里相对较新的变量声明方式。let 在很多方面与 var 是相似的，但是可以帮助大家避免在 JavaScript 里常见一些问题。const 是对 let 的一个增强，它能阻止对一个变量再次赋值。

因为 TypeScript 是 JavaScript 的超集，所以它本身就支持let 和const。 下面我们会详细说明这些新的声明方式以及为什么推荐使用它们来代替var。

let

• 不存在变量提升
• 暂时性死区
• 不允许重复声明
• 块级作用域
  块级作用域的出现，实际上使得获得广泛应用的匿名立即执行函数表达式（匿名 IIFE）不再必要了。

const
const声明一个只读的常量。一旦声明，常量的值就不能改变。

const实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动。对于简单类型的数据（数值、字符串、布尔值），值就保存在变量指向的那个内存地址，因此等同于常量。
但对于复合类型的数据（主要是对象和数组），变量指向的内存地址，保存的只是一个指向实际数据的指针，const只能保证这个指针是固定的（即总是指向另一个固定的地址），至于它指向的数据结构是不是可变的，就完全不能控制了。因此，将一个对象声明为常量必须非常小心。(对象类型是可以变的)

var 声明

在 ES5 的时代，我们都是通过 var关键字定义JavaScript 变量：

var a = 10

大家都能理解，这里定义了一个名为 a 值为 10 的变量。

我们也可以在函数内部定义变量：

function f() {
     
  var message = 'Hello World!'

  return message
}

并且我们也可以在其它函数内部访问相同的变量：(闭包场景)

function f() {
     
  var a = 10
  return function g() {
     
    var b = a + 1
    return b
  }
}

var g = f()
g() // returns 11

面试题1:变量声明提升

关键：作用域规则、变量声明提升

var 声明有些奇怪的作用域规则。 看下面的例子：

function f(shouldInitialize) {
     
  // var x;
  if (shouldInitialize) {
     
    var x = 10
  }

  return x
}

f(true)  // returns '10'
f(false) // returns 'undefined'

有些同学可能要多看几遍这个例子。 变量 x是定义在if语句里面，但是我们却可以在语句的外面访问它。 这是因为var 声明的作用域是函数作用域，函数参数也使用函数作用域。就是所谓的变量声明提升。

这些作用域规则可能会引发一些错误。 其中之一就是，多次声明同一个变量并不会报错：

function sumMatrix(matrix) {
     
  var sum = 0
  for (var i = 0; i < matrix.length; i++) {
     
    var currentRow = matrix[i]
    for (var i = 0; i < currentRow.length; i++) {
     
      sum += currentRow[i]
    }
  }
  
  return sum
}

var matrix = [
  [1,2,3],
  [4,5,6]
]
console.log(SumMatrix(matrix)) // 6

这里很容易看出一些问题，里层的for循环会覆盖变量 i，因为所有 i都引用相同的函数作用域内的变量。 有经验的开发者们很清楚，这些问题可能在代码审查时漏掉，引发无穷的麻烦。

面试题2:捕获变量怪异之处

关键: EventLoop 事件循环 、执行栈

猜一下下面的代码会返回什么：

for (var i = 0; i < 10; i++) {
     
  setTimeout(function() {
     
    console.log(i)
  }, 100 * i)
}

答案是，setTimeout 会在若干毫秒的延时后执行一个函数（等待其它代码执行完毕）：

10
10
10
10
10
10
10
10
10
10

很多 JavaScript 程序员对这种行为已经很熟悉了，但如果你很不解也没有关系，因为你并不是一个人。 大多数人期望输出结果是这样：

0
1
2
3
4
5
6
7
8
9

我们传给setTimeout的每一个函数表达式实际上都引用了相同作用域里的同一个 i。

让我们花点时间思考一下这是为什么。 setTimeout在若干毫秒后执行一个函数，并且是在 for 循环结束后。for循环结束后，i的值为 10。 所以当函数被调用的时候，它会打印出 10。

一个通常的解决方法是使用立即执行的函数表达式（IIFE）来捕获每次迭代时i的值：

for (var i = 0; i < 10; i++) {
     
  (function(i) {
     
    setTimeout(function() {
     
      console.log(i)
    }, 100 * i)
  })(i)
}

这种奇怪的形式我们已经司空见惯了。 参数 i 会覆盖 for循环里的 i，但是因为我们起了同样的名字，所以我们不用怎么改for 循环体里的代码。

第二种方法就是声明变量用 let

let 声明

现在你已经知道了 var 存在一些问题，这恰好说明了为什么用let 语句来声明变量。 除了名字不同外，let 与 var 的写法一致：

let hello = 'Hello!'

主要的区别不在语法上，而是语义，我们接下来会深入研究。

块作用域

当用 let声明一个变量，它使用的是块作用域。 不同于使用 var声明的变量那样可以在包含它们的函数外访问，块作用域变量在包含它们的块或 for循环之外是不能访问的。

function f(input: boolean) {
     
  let a = 100

  if (input) {
     
    // OK: 仍然能访问到 a
    let b = a + 1
    return b
  }

  // Error: 'b' 在这里不存在
  return b
}

这里我们定义了 2 个变量 a和 b。 a 的作用域是f 函数体内，而 b的作用域是 if语句块里。

在 catch语句里声明的变量也具有同样的作用域规则。

try {
     
  throw 'Oh no!';
}
catch (e) {
     
  console.log('Catch it.')
}

// Error: 'e' 在这里不存在
console.log(e)

拥有块级作用域的变量的另一个特点是，它们不能在被声明之前读或写。 虽然这些变量始终“存在”于它们的作用域里，但在直到声明它的代码之前的区域都属于暂时性死区。 它只是用来说明我们不能在 let语句之前访问它们，幸运的是 TypeScript 可以告诉我们这些信息。

test1.ts:1:13 - error TS2448: Block-scoped variable 'bool' used before its declaration.

js 如果在之前声明之前使用, 会报错

ReferenceError: Cannot access 'var' before initialization

注意一点，我们仍然可以在一个拥有块作用域变量被声明前获取它。 只是我们不能在变量声明前去调用那个函数。 如果生成代码目标为 ES2015，现代的运行时会抛出一个错误；然而，现今 TypeScript 是不会报错的。

function foo() {
     
  // okay to capture 'a'
  return a
}

// 不能在'a'被声明前调用'foo'
// 运行时应该抛出错误
foo()

let a

关于暂时性死区的更多信息，查看这里 Mozilla Developer Network

重定义及屏蔽

我们提过使用 var 声明时，它不在乎你声明多少次；你只会得到 1 个。

function f(x) {
     
  var x
  var x

  if (true) {
     
    var x
  }
}

在上面的例子里，所有 x 的声明实际上都引用一个相同的x，并且这是完全有效的代码，但这经常会成为bug的来源。幸运的是let 的声明就不会这么宽松了。

let x = 10
let x = 20 // 错误，不能在 1 个作用域里多次声明 x

并不是要求两个均是块级作用域的声明 TypeScript 才会给出一个错误的警告。

function f(x) {
     
  let x = 100 // Error: 干扰参数声明
}

function g() {
     
  let x = 100
  var x = 100 // Error: 不能同时具有 x 的两个声明
}

并不是说块级作用域变量不能用函数作用域变量来声明。 而是块级作用域变量需要在明显不同的块里声明。

function f(condition, x) {
     
  if (condition) {
     
    let x = 100
    return x
  }

  return x
}

f(false, 0) // returns 0
f(true, 0)  // returns 100

在一个嵌套作用域里引入一个新名字的行为称做屏蔽。 它是一把双刃剑，它可能会不小心地引入新问题，同时也可能会解决一些错误。 例如，假设我们现在用 let 重写之前的 sumMatrix函数。

function sumMatrix(matrix: number[][]) {
     
  let sum = 0
  for (let i = 0; i < matrix.length; i++) {
     
    let currentRow = matrix[i]
    for (let i = 0; i < currentRow.length; i++) {
     
      sum += currentRow[i]
    }
  }

  return sum
}

这个版本的循环能得到正确的结果，因为内层循环的 i 可以屏蔽掉外层循环的i。

通常来讲应该避免使用屏蔽，因为我们需要写出清晰的代码。 同时也有些场景适合利用它，你需要好好权衡一下。

块级作用域变量的获取

每次进入一个作用域时，let 会创建一个变量的环境。就算作用域内代码已经执行完毕，这个环境与其捕获的变量依然存在。

回想一下前面 setTimeout 的例子，我们最后需要使用立即执行的函数表达式来获取每次 for循环迭代里的状态。 实际上，我们做的是为获取到的变量创建了一个新的变量环境。 这样做挺痛苦的，但是幸运的是，你不必在 TypeScript 里这样做了。

当let 声明出现在循环体里时拥有完全不同的行为。不仅是在循环里引入了一个新的变量环境，而且针对每次迭代都会创建这样一个新作用域，这就相当于我们在使用立即执行的函数表达式时做的事。所以在 setTimeout 例子里我们仅使用 let声明就可以了。

for (let i = 0; i < 10 ; i++) {
     
  setTimeout(function() {
     
    console.log(i)
  }, 100 * i)
}

会输出与预料一致的结果：

0
1
2
3
4
5
6
7
8
9

const 声明

关键: 基本数据类型不能更改，引用类型内部变量可以修改、堆栈

const 声明是声明变量的另一种方式。

const numLivesForCat = 9

它们与 let 声明相似，但是就像它的名字所表达的，它们被赋值后不能再改变。 换句话说，它们拥有与 let 相同的作用域规则，但是不能对它们重新赋值。

这很好理解，它们引用的值是不可变的。

const numLivesForCat = 9
const kitty = {
     
  name: 'Kitty',
  numLives: numLivesForCat
}

// Error
kitty = {
     
  name: 'Tommy',
  numLives: numLivesForCat
};

// OK
kitty.name = 'Jerry'
kitty.numLives--

除非你使用特殊的方法去避免，实际上 const 变量的内部状态是可修改的。 幸运的是，TypeScript 允许你将对象的成员设置成只读的。接口一章有相关说明。

let vs. const

现在我们有两种作用域相似的声明方式，我们自然会问到底应该使用哪个。与大多数泛泛的问题一样，答案是：依情况而定。

使用最小特权原则，所有变量除了你计划去修改的都应该使用 const。 基本原则就是如果一个变量不需要对它写入，那么其它使用这些代码的人也不能够写入它们，并且要思考为什么会需要对这些变量重新赋值。使用 const 也可以让我们更容易的推测数据的流动

参考

阮一峰 ES6