前言

在介绍var、let、const关键字前我们先要了解作用域这个概念，var、let、const关键字区别也主要体现在作用域上。在了解var、let、const之前我们要先了解一下作用域的概念。几乎所有编程语言最基本的功能之一，就是能够储存变量当中的值，并且能在之后对这个 值进行访问或修改。事实上，正是这种储存和访问变量的值的能力将状态带给了程序。 若没有了状态这个概念，程序虽然也能够执行一些简单的任务，但它会受到高度限制，做不到非常有趣。 但是将变量引入程序会引起几个很有意思的问题，也正是我们将要讨论的：这些变量住在 哪里？换句话说，它们储存在哪里？最重要的是，程序需要时如何找到它们？ 这些问题说明需要一套设计良好的规则来存储变量，并且之后可以方便地找到这些变量。 这套规则被称为作用域。 但是，究竟在哪里而且怎样设置这些作用域的规则呢？

作用域

在JavaScript中作用域有且仅有三种:

1.全局作用域

2.函数作用域

3.块级作用域

不同作用域的构成:

全局作用域

全局作用域贯穿整个javascript文档，在所有函数声明或者大括号之外定义的变量，都在全局作用域里。一旦你声明了一个全局变量，那么你在任何地方都可以使用它，包括函数内部。 示例:

var c = 2;
function foo(a) {
    var b = 2;

    function bar(c) {
        console.log(a + b + c);
    }
    bar(3);
}

foo(1);

在该代码中变量c和函数foo都在全局作用域中。

函数作用域:

在JavaScript中，任何定义在函数体内的变量或者函数都将处于函数作用域中，这些变量也无法被在函数外部使用。

示例:

function foo() {
    var a = 1;
}
foo();

console.log(a);

当全局作用域访问函数作用域时，则会报错: ReferenceError: a is not defined

将 a转化为全局作用域时 则可以访问到（也即函数作用域可以访问到全局作用域）

var a = 1;
function foo() {
    console.log(a);
}
foo();

块级作用域

块级作用域由let + {} 构成形如:

{

let

} 的结构，在块级作用域中会存在暂时性死区。例如:

let a = 1;
if (1) {
    console.log(a); //暂时性死区
    let a = 2;
}

执行这段代码时会报错:ReferenceError: Cannot access 'a' before initialization

可能你们会问，a不是已经声明了全局变量吗？为什么访问不到？其实在块级作用域中会存在暂时性死区的现象，也就是只会在该块级区域内查找变量不会跳出到块级作用域以外去查找变量。

在代码函数嵌套的情况下，可以使用气泡法来判断函数作用域。

var、let、const的区别

在了解完JavaScript作用域后，正式开始今天的主题。作为初学者，我们都知道var、let、const是用来声明变量的，但是这三种声明变量的方式却有着巨大的差异。接下来让我们来彻底搞懂var、let、const之间的区别!

var

在了解var之前我们来看一段代码:

console.log(a);
var a = 1;

执行结果为:

为什么这段代码不会报错呢?在输出a的时候a不是还没定义吗？为什么还会输出undefined呢？

与 let 和 const 不同，使用 var 声明的变量时存在”声明提升“在其作用域内被提升到顶部并赋予初始值 undefined。

将var声明提升原理带入代码中可将代码变化成:

var a;
console.log(a);
a = 1;

这样是不是就很好理解输出undefined的原因。

let

let声明和var声明用法是一样的，都是定义变量，但是使用let声明的变量没有var那样的声明提升，let声明的变量只在当前作用域中有效而且let声明变量时不允许重复声明。 例如:

禁止重复声明

let a = 1;
let a = 2;
console.log(a);

在这段代码中会报错:SyntaxError: Identifier 'a' has already been declared

这说明了let声明变量时不允许重复声明。

let组成的块级作用域

if (true) {
    let i = 1;
}
console.log(i);

在这段代码中会报错:ReferenceError: i is not defined.

原理:let与{}组成块级作用域，所有外面的语句块访问不到并且没有变量提升。

const

ES6中还提供了const关键字声明，const声明指的是常量，常量就是一旦被定义就不能修改的值。需要注意的是，常量定义必须初始化值，如果不初始化值就会报错。

const a = 1; // 常量
a = 2;
console.log(a);

例如在改代码中修改定义好的常量的值时则报错:TypeError: Assignment to constant variable.

const a; // 常量
a = 2;
console.log(a);

在该代码中先定义常量再初始化值时会报错:SyntaxError: Missing initializer in const declaration

总结

本篇文章就到此为止啦，本人水平有限难免会有纰漏，欢迎大家指正。如觉得这篇文章对你有帮助的话，欢迎点赞收藏加关注，感谢支持🌹🌹。