var、let、const区别

本文想和大家聊一聊var、let、const的一些用法及归纳总结。

var

变量提升

首先函数内部的变量使用var关键字声明会自动提升到函数作用域的顶部，即存在变量提升。变量提升即把所有变量声明都拉到函数中作用域的顶部。

    function demo() {
      console.log(coder); // undefined 未报错
      var coder = 'hello';
    }

let、const 与 var 对比

作用域

let、const声明的范围是块级作用域，而var声明的范围是函数作用域。块级作用域是函数作用域的子集。

    function demo() {
      if (true) {
          var test1 = "test1";
          let test2 = "test2";
          console.log("var : ", test1); // var :  test1
          console.log("let : ", test2); // let :  test2
      }
      console.log("var : ", test1); // var :  test1
      console.log("let : ", test2); // Uncaught ReferenceError: test2 is not defined
    }

window对象属性

var a = 'abc';
let b = 'ABC';
const PI = 3.1415;

console.log(window.a);  // 输出abc
console.log(window.b);  // 输出undefined
console.log(window.PI); // 输出undefined

重复性

let、const 不允许同一个块级作用域内重复声明，而var允许。

function demo() {
    var name = 'name'
    var name = 'wang'
    let test = 'name'
    let test = 'wang' // lare block-scoped variable 'test'
    // const同理
}

• 注：const 声明是必须初始化变量！

面试题

function demo() {
    for (var i = 0; i < 5; i++) {
      setTimeout(() => {
         console.log(i); // 5,5,5,5,5
      }, 0);
    }
}

总结

let、const与 var 对比：

1. 块级作用域
2. 不存在变量提升
3. 暂时性死区
4. 不可重复声明
5. let、const声明的全局变量不会成为window对象的属性

const 注意点：

• const 声明后必须初始化，否则报错
• const 基本类型声明后不能更改，而引用类型(数组、对象等)不允许修改引用地址，但允许修改其内部元素。

对比项	var	let	const
作用域	函数作用域	块级作用域	块级作用域
是否存在变量提升	√	×	×
是否可重复声明	√	×	×
是否属于window对象的属性	√	×	×
是否可以改变值	√	√	const 基本类型声明后不能更改，而引用类型不允许修改引用地址，但允许修改其内部元素