let 、var 、const的区别！

目录

一、 var声明的变量会挂载在window上，而let和const声明的变量不会

二、变量提升

三、var没有块级作用域，let、const有块级作用域

四、在同一个作用域下var可以声明同名变量，let和const不能声明同名变量

五、const声明的是常量，必须在声明变量时就赋值，不能先声明变量再赋值

六、const定义的对象，可以更改对象的属性，也可以向对象添加属性

七、const声明的变量 赋值给一个引用数据类型的值,可以修改值里面的内容的。

八、let、const会有暂时性死区（temporal dead zone，简称TDZ），而var不存在

九、预解析

---

一、 var声明的变量会挂载在window上，而let和const声明的变量不会

var a = 100;
console.log(a, window.a);    // 100 100

let b = 10;
console.log(b, window.b);    // 10 undefined

const c = 1;
console.log(c, window.c);    // 1 undefined

二、变量提升

var声明的变量存在变量提升 let和const声明的变量不存在变量提升

console.log(a);
var a = 1;// 输出 undefined，变量提升，已声明未赋值

console.log(b); // Uncaught ReferenceError: Cannot access 'a' before initialization ，找不到b这个变量
let b = 10;

console.log(c); // Uncaught ReferenceError: Cannot access 'a' before initialization，找不到c这个变量
const c = 10;

变量提升，就是把定义在后面的变量或函数，提升到前面中定义。

使用 var 声明变量的时候，声明提到当前作用域的顶端，赋值操作在原处不变。

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

//在函数中
function abc() {
    console.log(a);  //undefined
    var a = 123; 
};
abc();


//转换成
function abc() {
    var a;
    console.log(a);
    a = 123;
}
abc();

三、var没有块级作用域，let、const有块级作用域

if(true) {
    var a = 100;
    let b = 200; 
}
console.log(a); // 100
console.log(b); //Uncaught ReferenceError: b is not defined

四、在同一个作用域下var可以声明同名变量，let和const不能声明同名变量

var a = 20;
var a = 30;
console.log(a); // 30
let b = 10;
let b = 5;
console.log(b); //  Uncaught SyntaxError: Identifier 'b' has already been declared

五、const声明的是常量，必须在声明变量时就赋值，不能先声明变量再赋值

// 错误
const aa;
aa = 123456

// 正确
const aa = 123456

//const声明后不可修改
const aaa = 111;
    console.log(aaa);// 111
    aaa = 222;
    console.log(aaa);// Uncaught TypeError: Assignment to constant variable

六、const定义的对象，可以更改对象的属性，也可以向对象添加属性

const computer = { type: 'lenovo', color: 'black' };
// 更改属性
computer .color = 'red';
// 添加属性
computer .name= '小王';
console.log(computer ); 

七、const声明的变量 赋值给一个引用数据类型的值,可以修改值里面的内容的。

 //基本数据类型和引用数据类型的区别,变量所指向的内存空间地址不变，就可以修改值中的内容

 const abc= {
      n: 1
 };

 abc.n = 100

八、let、const会有暂时性死区（temporal dead zone，简称TDZ），而var不存在

在运行流程进入作用域创建变量，到变量可以被访问之间的这一段时间，就称之为暂时死区

if (true) {
  tmp = 'abc'; // ReferenceError，未let
  console.log(tmp); // ReferenceError
  let tmp; 
  console.log(tmp); // undefined
  tmp = 123;
  console.log(tmp); // 123
}


if(true) {
   console.log(a); //  Uncaught ReferenceError: Cannot access 'a' before initialization
   let a = 500;
}

九、预解析

JavaScript代码执行之前，浏览器首先会默认的把所有带var和function声明的变量进行提前的声明或者定义。

var声明的变量在预解析的时候只是提前的声明，function声明的函数在预解析的时候会提前声明并且会同时定义

 a()
function a(){
       console.log(b); //undefined,只声明了还没有定义，所以会输出undefined
       var b
       b=10;
       console.log(b)//10,已经定义了，所以输出24
 }
 
//由于函数的声明和定义是同时进行的，所以a()虽然是在func函数定义声明处之前调用的，但是依然可以正常的调用，会正常输出。