var、let、const – 有什么不同?

末蓝、 2022-09-02 12:54 191阅读 0赞

### 文章目录 ###

*  var
 *   *  变量的作用域
     *  可以重新声明和更新
     *  作用域提升
     *  var 的问题
 *  let
 *   *  let 是块作用域
     *  可以更新，但不能重新声明
     *  作用域提升
 *  const
 *   *  const 声明是块作用域的
     *  常量不能更新或重新声明
 *  总结

> 在本文中，我们将讨论`var、 let 和 const`，它们的作用域、用途和提升。（关于作用域我们下篇介绍）

# var #

在 `ES6`出现之前，`var` 声明占主导地位。不过，与用`var` 声明的变量相关的问题也存在。这就是为什么有必要用新的方法来声明变量的出现。比如`let 和 const`

## 变量的作用域 ##

> 作用域本质上意味着这些变量可以在哪些地方使用。 `var` 声明的变量是全局作用域。

当在函数外部声明 `var` 变量时，作用域是全局的。这意味着任何在函数块之外用 `var` 声明的变量都可以在整个窗口中使用。

在函数中声明`var`时，它的作用域是函数。这意味着它是可用的，并且只能在该函数中访问。

为了进一步理解，请看下面的例子。

var greeter = "hey hi";
    
    function newFunction() { 
        var hello = "hello";
    }

在这里，`greeter` 是全局的作用域，因为它存在于函数之外，而 `hello` 是函数作用域的。所以我们不能在全局作用域中访问到函数作用域的变量 `hello`。

所以如果我们这样做:

var tester = "hey hi";
        
    function newFunction() { 
        var hello = "hello";
    }
    console.log(hello); // error: hello is not defined

我们将得到一个错误，这是由于 `hello`在函数之外不可用的结果。

## 可以重新声明和更新 ##

> 这意味着我们可以在相同的作用域内完成此操作，并且不会得到错误。

var greeter = "hey hi";
    var greeter = "say Hello instead";

还有这个

var greeter = "hey hi";
    greeter = "say Hello instead";

## 作用域提升 ##

> 提升是一种 `JavaScript` 机制，其中变量和函数声明在代码执行之前移动到它们作用域的顶部。

这意味着如果我们这样做:

console.log (greeter);
    var greeter = "say hello"

它等价于:

var greeter;
    console.log(greeter); // greeter is undefined
    greeter = "say hello"

因此，`var`变量会提升到其作用域的顶部，并用一个未定义的值`undefined`初始化。

## var 的问题 ##

> `var` 有一个弱点，我将用下面的例子来解释:

var greeter = "hey hi";
    var times = 4;
    
     if (times > 3) { 
         var greeter = "say Hello instead"; 
     }
     
     console.log(greeter) // "say Hello instead"

因此，由于 `times > 3`返回 `true`，`greeter`被重新定义为`“ say Hello instead”`。  
如果你知道并且希望重新定义变量，那这不是一个问题，但是当你没有意识到一个变量已经被定义过了，这就成了一个问题。

如果您在代码的其他部分使用了`greeter`，那么您可能会对得到的结果感到惊讶。  
这可能会在你的代码中引起很多错误。这就是为什么 `let` 和 `const` 是必要的。

# let #

> `let` 现在是首选的变量声明。因为它是对 `var`声明的改进。也解决了我们前面提到的`var` 问题。

## let 是块作用域 ##

> 块是由`{}`限定的代码块。大括号内的任何东西都是块。

因此，在一个带 `let`的块中声明的变量只能在该块中使用。

让我用一个例子来解释这一点:

let greeting = "say Hi";
     let times = 4;
    
     if (times > 3) { 
          let hello = "say Hello instead";
          console.log(hello);// "say Hello instead"
      }
     console.log(hello) // hello is not defined

我们看到在它的块外使用`hello` (定义它的大括号)将返回一个错误。  
这是因为 `let` 变量是块范围的。

## 可以更新，但不能重新声明 ##

> 与 `var` 一样，用 `let`声明的变量可以在其作用域内进行更新。与 `var` 不同，`let`变量不能在其作用域内重新声明。

因此，尽管这样做会奏效:

let greeting = "say Hi";
    greeting = "say Hello instead";

下面将返回一个错误:

let greeting = "say Hi";
    let greeting = "say Hello instead"; // error: Identifier 'greeting' has already been declared

但是，如果同一个变量在不同的作用域中定义，就不会有错误:

let greeting = "say Hi";
    if (true) { 
        let greeting = "say Hello instead";
        console.log(greeting); // "say Hello instead"
    }
    console.log(greeting); // "say Hi"

为什么没有错误? 这是因为两个实例被视为不同的变量，因为它们有不同的作用域。

这个事实使得 `let` 比`var` 更好的选择。  
在使用 `let`时，您不必担心以前是否为变量使用过名称，因为变量只存在于其作用域中。

另外，由于一个变量不能在一个范围内声明多次，因此前面讨论过的与 `var` 有关的问题就不会发生。

## 作用域提升 ##

就像 `var` 一样，让声明挂在顶部。与被初始化为未定义的 `var` 不同，`let`关键字没有初始化。  
因此，如果在声明之前尝试使用`let`变量，就会得到一个引用错误。

# const #

> 用 `const` 声明的变量保持常量值。 `const`声明与`let`声明有一些相似之处。

## const 声明是块作用域的 ##

> 与`let`声明一样，`const`声明只能在声明它们的块内访问。

## 常量不能更新或重新声明 ##

这意味着用 `const` 声明的变量的值在其作用域内保持不变。无法更新或重新声明。

因此，如果我们使用 `const`声明一个变量，我们既不能这样做:

const greeting = "say Hi";
    greeting = "say Hello instead";// error: Assignment to constant variable.

也不是：

const greeting = "say Hi";
    const greeting = "say Hello instead";// error: Identifier 'greeting' has already been declared

因此，每个常量声明都必须在声明时初始化。

当涉及到用 `const`声明的对象时，这种行为会有所不同。  
虽然不能更新`const` 对象，但可以更新此对象的属性。

因此，如果我们将一个 `const`对象声明为:

const greeting = { 
           message: "say Hi",
           times: 4
       }

虽然我们不能这么做:

greeting = { 
        words: "Hello",
        number: "five"
    } // error: Assignment to constant variable.

我们可以这么做:

greeting.message = "say Hello instead";

这将更新 `greeting.message`的值而不返回错误。

# 总结 #

*  `var` 声明是全局范围或函数范围的，而`let 和 const`是块范围的。
 *  `var`变量可以在其范围内更新和重新声明；`let` 变量可以更新但不能重新声明；`const`变量既不能更新也不能重新声明。
 *  他们都被提升到他们的范围的顶部。但是当 `var` 变量被初始化为 `undefined`时，`let`和 `const` 变量没有被初始化。
 *  虽然 `var`和`let` 可以在未初始化的情况下声明，但`const`必须在声明期间初始化。