TypeScript 变量声明

今天药忘吃喽~ 2023-07-24 08:39 4阅读 0赞

# TypeScript 变量声明 #

本节介绍 `var` `let` `const` 这三种变量的声明方式，重点讨论作用域与变量提升的相关知识点，这部分往往也是面试常考部分，需要多加注意。

## 1. 慕课解释 ##

TypeScript 是 JavaScript 的超集，同 JavaScript 一样，声明变量可以采用下面三个关键字：

*  var
 *  let
 *  const

## 2. var 声明 ##

通过 `var` 关键字来定义 JavaScript 变量，这个大家都能理解：

var num = 10

### 2.1 作用域 ###

**下面我们来讨论一个为什么尽量避免使用 `var`。**

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

案例演示

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

[运行案例][Link 1]点击 "运行案例" 可查看在线运行效果

相信很多人都踩过这个坑，这几乎是作用域的必考题目，但如果你不了解，不要担心，你并不是一个人。大多数人期望输出的结果是这样的：

0
    1
    2
    3
    4
    5
    6
    7
    8
    9

然而，实际结果是这样的：

10
    10
    10
    10
    10
    10
    10
    10
    10
    10

解释：这里的 `i` 是在全局作用域中的，只存在一个值。 `setTimeout` 这个异步函数在若干毫秒后执行，并且它是在 `for` 循环结束后的。在 `for` 循环结束后， `i` 的值为 `10`，所以当函数被调用的时候，它会打印出 `10`。

下面介绍几种可以实现我们预期输出结果的方法：

1.  通过调用函数，创建**函数作用域**：

案例演示

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

[运行案例][Link 2]点击 "运行案例" 可查看在线运行效果

1.  立即执行函数，创建**函数作用域**：

案例演示

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

[运行案例][Link 3]点击 "运行案例" 可查看在线运行效果

1.  通过 `let` 关键字创建**块级作用域**：

案例演示

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

[运行案例][Link 4]点击 "运行案例" 可查看在线运行效果

### 2.2 变量提升 ###

看下面的例子：

console.log(a) // undefined
    var a = 1

它等价于：

var a
    console.log(a) // undefined
    a = 1

从上面的例子中可以看出，关键词 `var` 会进行变量提升。

如果把上面的 `var` 换成 `let` 呢？

console.log(a) // ReferenceError: a is not defined
    let a = 1

会报错 `a is not defined` 未定义，这里也可以看出 `var` 与 `let` 在变量提升的不同：

*  var 会将变量的**创建**和**初始化**都进行提升
 *  let 只会将**创建**提升，而**初始化**未被提升，称之为**暂时性死区**

## 3. let 声明 ##

现在你已经知道了 `var` 存在全局作用域和变量提升的问题，这恰好说明了为什么用 `let` 语句来声明变量。

let num = 10

下面介绍 `let` 的一些特点：

### 3.1 块作用域 ###

在 ES6 之前，ECMAScript 的作用域只有两种：

*  全局作用域
 *  函数作用域

现在通过命令 let 和 const 新增了“**块级作用域**”，定义在代码块中的变量在代码块被执行结束后会被释放掉：

案例演示

function block() {
      if (true) {
        let a = 10
        console.log(a) // 10
      }
    
      console.log(a) // Cannot find name 'a'.ts(2304)
    }

[运行案例][Link 5]点击 "运行案例" 可查看在线运行效果

**代码解释：**

第 3 - 4 行，a 变量在 if\{\} 代码块中是有效的，正常输出 10。

第７行，在 if\{\} 代码块外就被释放掉了，所以会报错误。

包括在一对花括号中的一组语句称之为”**代码块**“，它可以替换掉上面介绍 var 时使用的立即执行函数：

// 立即执行函数
    (function(){
      var a = 10
    }())
    
    // 代码块
    {
      let a = 10
    }

### 3.2 重定义 ###

在使用 `var` 声明时，不论声明几次，最终只会得到一个：

var x
    var x
    var x

这是一个完全有效的代码，所有 `x` 的声明其实都指向了同一个引用，但这也是很多 bug 产生的原因。 `let` 的声明就严格了许多：

let x
    let x // Cannot redeclare block-scoped variable 'x'

**代码解释：** 第 2 行，重新声明了块作用域的变量 x 。

## 4. const 声明 ##

关键字 `const` 声明变量，它被赋值后不能再改变。 换句话说，它拥有与 `let` 相同的作用域规则，但是不能重新赋值。

用 const 声明变量，并不是变量的值不得改动，而是变量指向的那个内存地址不得改动。用 const 声明初始数据类型如布尔值、数字、字符串，可以理解为声明常量，因为这些初始类型的值就保存在变量所指向的那个内存地址。

const num = 10
    const brand = 'imooc'
    const registered = true
    
    num = 20 // Cannot assign to 'num' because it is a constant.ts(2588)

**代码解释：** 第 5 行，在给 num 第二次赋值时会报错。

对于复合类型的数据来说，变量所指向的内存地址保存的只是一个指针，const 能够保证其指针不变，但属性值是可变的：

const person = {
      name: 'Tom',
      address: 'Baker Street 221b'
    }
    
    // error
    person = {
      name: 'Sherlock',
      address: 'Baker Street 221b'
    }
    
    // ok
    person.name = 'Sherlock'

**代码解释：** 第 7 行，对已经使用 const 声明的变量重新赋值报错，但是在第 13 行，只是对这个对象的属性赋值是可以的。

## 5. 小结 ##

阅读本小节中三种不同的变量声明，我们知道了：

*  `let` 和 `count` 实现了块级作用域。
 *  所有变量除了你计划去修改的都应该使用 `const`。
 *  尽量使用 `let` 和 `const` 来声明变量，减少 `var` 的使用。

[Link 1]: http://www.imooc.com/wiki/run/326.html
[Link 2]: http://www.imooc.com/wiki/run/327.html
[Link 3]: http://www.imooc.com/wiki/run/328.html
[Link 4]: http://www.imooc.com/wiki/run/329.html
[Link 5]: http://www.imooc.com/wiki/run/330.html