JavaScript中var、let、const的区别 (详解)

参加了几场前端方向的校招笔试面试,发现考察var、let、const的区别及用法还是较为频繁的,所以今天在这里总结一下,巩固知识点。


在Javascript中,var、let、const都可用于变量声明。但是之前没有梳理过它们之间的区别,本文主要通过详解var、let、const,以此来发现它们的不同之处。

JavaScript中var、let、const的区别

  • var
    • var的作用域
      • 全局作用域
      • 局部(函数)作用域
      • 对其他块定义没有作用域,比如if、for
    • var的声明与变量提升
      • var的声明
      • var的变量提升
  • let
    • let的作用域
    • let的声明
    • let不存在变量提升
    • 暂存性死区
  • const
    • const的作用域
    • const的声明
    • const的对象声明
  • 总结

var

在ES6 之前,都是使用var声明变量的。let 和const的出现解决了var声明变量带来的一些问题。所以 了解var 才能更好地了解let和const。

var的作用域

作用域是指函数或变量的可供访问的范围。
var可以定义全局变量和局部变量
var的作用域主要和函数的定义有关
  • 全局作用域

如果是在任意函数的外部声明var变量,其作用域是全局的;

  • 局部(函数)作用域

如果是在函数内部声明var,其作用域是局部的,只能在函数内部被访问;

var a = 10
function alter(){
    var b = 20
}
alter()
console.log(a) // 10
console.log(b) // Uncaught ReferenceError: b is not defined

/*  a是定义在函数外部的,所以是全局变量
b 是定义在函数内部的,无法在函数外部被访问  */
  • 对其他块定义没有作用域,比如if、for

 for (var i = 0; i < 10; i++) {
       }
console.log(i);// 10
var i = 1;
        if (i === 1) {
            var i = 2;
            console.log(i); //  2
        }
console.log(i); // 2

由于var对于for、if 是没有块级作用域的,所以在开发中会引起一些问题,比如外部同名变量可以随意修改在if/for内定义的变量。

var的声明与变量提升

var的声明

  • 在使用变量前,需要先对变量进行声明,如果只声明、未赋值,则会初始化值为undefined。
var a
console.log(a); // undefined
  • var可以修改,也可以被重复声明。当对var 进行重复声明时,后面的变量可以覆盖前面的变量,相当于变量重置。
var a = 10
var a = 20
console.log(a) // 20
a = 30
console.log(a) // 30
var a = 10
function alter(){
     a = 20
}
alter()
console.log(a) // 20
/*  此时函数内部 a = 20并没有用var定义,
相当于对var的修改,
所以a也是全局变量  */

var的变量提升

JS引擎在预编译代码时,会优先获取所有被var声明的变量和函数,将它们放在代码的头部然后从上到下执行,这就是var的变量提升。

console.log(a) // undefined
var a = 10
console.log(a) // 10
/*这里输出的undefined不是说a没有被定义(报错),而是声明了a但尚未赋值*/

上面的代码会被解释为:

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

let

let是ES6新增的命令,用来声明变量。用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效。我们可以将let视为更完美的var。

let的作用域

let允许声明一个作用域被限制在 块级中的变量、语句或者表达式。与 var 关键字不同的是, var声明的变量只能是全局或者整个函数块的。

let声明的变量 只在它所处的代码块内有效,属于块级作用域。块是由 { } 界定的。

for (let i = 0; i < 10; i++) {}
        console.log(i); // 报错:Uncaught ReferenceError: i is not defined
let i = 1;
        if (i === 1) {
            let i = 2;
            console.log(i); //  2
        }
console.log(i); // 1

let的声明

  • 在使用变量前,需要let先对变量进行声明,如果只声明、未赋值,则会初始化值为undefined。
let a
console.log(a); // undefined
  • let 可以被修改,但不能被重复声明。 注意:这里的重复声明是指let不允许在相同作用域内,重复声明同一个变量。
let a = 10
a = 20
console.log(a) // 20
let a = 10
let a = 20
console.log(a) // 报错:Uncaught SyntaxError: Identifier 'a' has already been declared

let不存在变量提升

let要求所有的变量 要先声明后才能使用,不会发生变量提升现象。这说明,在声明a 之前,该变量是不存在的。未声明便使用会发生报错。

console.log(a) // 报错: Uncaught ReferenceError: Cannot access 'a' before initialization
let a = 10
console.log(a) // 

这也就引发了一个新的问题 — 暂存性死区。

暂存性死区

所谓暂存性死区,就是在使用let声明变量前,该变量都不可用。
在变量初始化前访问该变量会导致"ReferenceError: Cannot access ‘a’ before initialization"。

var a ='10'
if (true) {
     a = '20'; // ReferenceError
     let a;
   }

ES6 明确规定,如果区块中存在let和const命令,这个区块对这些命令声明的变量,从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量,就会报错。在上述代码中,由于块级作用域内存在let声明了a,于是let绑定了这个块级作用域,尚未声明a就对a赋值便会报错。

const

const的作用域

像let声明一样,const声明只能在声明它们的块级作用域中访问

const的声明

  • const 声明一个只读的常量,这意味着声明后的常量不能被修改并且不能被重复声明。
const a = 10
a = 20 // Uncaught TypeError: Assignment to constant variable
const b = 10
const b = 20 //Uncaught SyntaxError: Identifier 'b' has already been declared
  • 这也意味着const声明时就必须初始化,不能等到之后赋值。
const a // Uncaught SyntaxError: Missing initializer in const declaration
  • 所以,当我们修饰的标识符不会被再次赋值时, 就可以使用const来保证数据的安全性。

const的对象声明

当用const声明对象时,虽然不能修改该对象,但是可以修改对象的属性。

 const test = {
            name: 'koala'
        }
        test.name = '考拉'
        test.sex = '女'
        console.log(test); // {name: '考拉', sex: '女'}
/* 代码中是对 对象的属性进行修改,可以修改成功*/  
 const test = {
            name: 'koala'
        }
        test = {} // Uncaught TypeError: Assignment to constant variable.
/*因为const声明的对象test已经声明,所以不能修改*/

总结

  • 作用域:
    var声明的是全局作用域或函数作用域;而let和const是块作用域。
  • 声明初始化:
    var和let在声明的时候可以不进行初始化;而const在声明的时候必须初始化。
  • 修改与重复声明:
    var在可以修改和重复声明;而let只能修改,不能在同一作用域下重复声明;const声明常量不可修改也不可重复声明。
  • 变量提升:
    var声明的变量存在变量提升,即变量可以在声明之前调用,值为undefined;let和const不存在变量提升,即它们所声明的变量一定要在声明后使用,否则会报错。
  • 暂存性死区:
    var不存在暂时性死区;let和const存在暂时性死区,只有等到声明变量的那一行代码出现,才可以获取和使用该变量。

待续。

你可能感兴趣的:(Javascript学习笔记,javascript,前端,es6)