JS各种声明变量方式的区别

1.let和var的区别

• var存在变量提升,而let不存在变量提升(更严谨)

console.log(x); //undefined
console.log(y); //Uncaught ReferenceError: Cannot access 'y' before initialization
var x = 12;
let y = 13;

• 全局上下文中基于var声明的变量是直接存储到GO(window)中,而let声明的变量是存储到VO(G)中,和GO没有关系

var x = 12;
let y = 13;
console.log(x, y); //12 13
console.log(window.x, window.y); //12 undefined

• var允许重复声明(只不过浏览器只声明一次而已，但是词法上是允许的)；但是let在词法上，都不允许重复声明(错误发生在“词法解析”阶段)，并且不论我们基于何种方式声明过这个变量，再基于let/const声明都会报错!!

var x = 12;
var x = 13;
console.log(x); //13

// Uncaught SyntaxError: Identifier 'x' has already been declared
console.log('OK');
var x = 12;
let x = 13;

• 在JS代码执行的过程中，如果大括号(排除对象和函数的)中出现let/const/function/class 等关键词（切记：没有var），则大括号所在的代码块，会产生一个“私有块级上下文”!! var不会产生块级上下文，而且块级上下文对它也没有任何的作用!!

附上一道面试题

// console.log(a); //undefined
// console.log(b); //Uncaught ReferenceError: Cannot access 'b' before initialization
var a = 12;
let b = 13;
if (1 == 1) {
    /*
     * EC(BLOCK) 块级私有上下文
     *  VO(BLOCK) 私有变量对象
     *    b ---> 200
     * 作用域链:<EC(BLOCK),EC(G)>  上级上下文:是看在哪执行代码产生的块级上下文 
     * 初始THIS: 没有这一步  「块级上下文中没有自己的THIS，用到的THIS都是上级上下文中的」
     * 初始ARG: 没有这一步
     * 形参赋值: 没有这一步
     * 变量提升: - - 因为var声明的变量不受块级上下文的影响,之前全局下变量提升时已经定义过了
     * 代码执行
     */
    // console.log(a); //12
    // console.log(b); //Uncaught ReferenceError: Cannot access 'b' before initialization
    var a = 100;
    let b = 200;
    console.log(a); //100
    console.log(b); //200
}
console.log(a); //100
console.log(b); //13

• 暂时性死区

console.log(x); //Uncaught ReferenceError: x is not defined 使用未被声明的变量，结果应该是报错的
console.log(typeof x); //“undefined” 基于typeof检测一个未被声明的变量，结果是“undefined”，而不会报错!!

console.log(typeof x); //Uncaught ReferenceError: Cannot access 'x' before initialization
let x = 12;

2.let和const的区别

• let声明的变量，后续根据需求，可以改变“变量”和“值”之间的指针指向；而const不允许改变“变量”的指针指向；

let a = 12;
a = 13;
console.log(a);

const b = 12;
b = 13; //Uncaught TypeError: Assignment to constant variable.
console.log(b);

const obj = {
    name: 'xiaolin'
};
obj.name = 'xiaoxie';
console.log(obj); //{name:'xiaoxie'}

• const声明的变量必须要有初始值

let n;
console.log(n); //undefined

const m; //Uncaught SyntaxError: Missing initializer in const declaration

// const的补充
const fn = function () {}; //函数表达式（没有变量提升，只能再创建函数之后使用）；用const声明，后期不允许重构fn；「推荐」