js 中 var let const 的区别

  1. 很多人认为 var 和 let const 的区别在于,var 会变量提升,而 let const 不会,虽然可以这样认为,但是我觉得并不完全对。
  2. 在 JS 引擎解析代码的时候,遇到变量不同的声明方式过程是不一样的。

通过 var 声明变量的过程

console.log(a);  // undefined
var a = 1;
console.log(a);  // 1
  • 过程:
    • var 声明的变量会提升到顶部,创建 a 变量。
    • 创建完变量后会初始化 a,此时为 undefined。
    • 执行代码,将 a 变量值赋予 a 变量。

这就是 var 变量声明之前,输出这个变量为 undefined 的原因了。


通过 let 声明变量的过程

{
    console.log(a);  // index.html:28 Uncaught ReferenceError: Cannot access 'a' before initializationat
    let a = 1;
    console.log(a);
}
let b = 1;
let b = 2;  // Uncaught SyntaxError: Identifier 'a' has already been declared 

第一个输出结果:无法在初始化之前访问 ' a '

  • 那么 let 声明的变量会提升吗?

  • 过程:

    • let 声明的变量在创建过程中被提升。
    • 开始执行代码,但未初始化,可以认为在变量初始化之前,是无法使用这个变量的。
    • 初始化代码,在修改变量的前提下赋值。

第二个输出结果:未捕获的语法错误:已声明标识符 “a”

  • let 声明的变量是无法重复声明的。

通过 const 声明变量的过程

const a = 1;
console.log(a);  // 1
a = 2;  // Uncaught TypeError: Assignment to constant variable.at

重新赋值了常量变量。也就是重新修改了const声明的变量的值。

  • const 和 let 只有一个区别,就是 const 声明的变量过程只有两步。
  • 创建和初始化,没有赋值的过程。所以无法给 const 变量进行重新赋值。

const 和 let 具有块级作用域

{
    var a = 1;
    let b = 2;
    const c = 3;
}
console.log(a);  // 1
console.log(b);  // ReferenceError: b is not defined
console.log(c);  // ReferenceError: c is not defined

我们会发现,let 和 const 只限于当前作用域的,外部作用域时无法访问到的,那么两者声明的变量是属于 window 的吗?

var a = 1;
let b = 2;
const c = 3;
console.log(window.a);  // 1
console.log(window.b);  // undefined
console.log(window.c);  // undefined

看完结果之后,在全局作用域中 var 和 不使用 var 声明的变量都是属于 window 的,而 let const 不是。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。