正文

JS中let、var、const的区别

IP云
IP云V管理员/1 阅读
12/02
小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

先看let和var：

1. 

console.log(a); // undefined

var a = 3;
console.log(a); // Uncaught ReferenceError: Cannot access 'a' before initialization

let a = 3;
在当前代码执行之前，首先会把所有带var关键字的进行声明(带function关键字的也会提前声明并且定义)，即所谓的变量提升，let则不存在这种情况。
ps：项目中创建函数，一般都是基于函数表达式来实现，这样防止其提前变量提升，如： 
let fn = function () {};

2. 

var x = 3;

console.log(window.x); // 

let y = 3;

console.log(window.y); // undefined
用var进行全局变量声明的时候，也会给全局对象（浏览器中即window）增加一个对应的属性；但是用let声明的变量不存在这个特点。
仅限于全局变量创建时有这个特点，属于私有的执行上下文中创建的私有变量没有这个特点。 
function fn() {

    var x = 1;

    y = 2;

    console.log(fn.x); // undefined

    console.log(fn.y); // undefined

}

fn();

console.log(window.x); // undefined

console.log(window.y); //

3. 

var y = 21;

var y = 24;

console.log(y); //
console.log('OK'); // Uncaught SyntaxError: Identifier 'x' has already been declared

let x = 21;

console.log(x);

let x = 24;

console.log(x);
可以看到，用var声明同一个变量多次，前边声明的会被覆盖以最后一次赋值为准，而用let声明同一个变量多次时，并不是在let声明同一变量第二次时报错，浏览器显示在代码第一行就有报错。
因为一段代码在浏览器执行时，大体需要经过编译阶段和代码解析阶段，用var的可以重复声明，是因为在编译阶段中的词法解析阶段可以审核过，执行阶段遇到已经声明过的，不会再重新声明；但是用let的不可以，是因为在词法解析阶段都过不去，所以也就不存在引擎去执行代码的阶段了。

4. 

if (1 === 1) {

    let x = 3;

    console.log(x);

}

console.log(x); // Uncaught ReferenceError: x is not defined
let a = 1;

switch (a) {

    case 1:

        let x = 2;

        break;

}

console.log(x); // Uncaught ReferenceError: x is not defined
try {

    let x = 100;

    console.log(x); //

    console.log(a);

} catch (e) {

    let y = 200;

    console.log(y); //

}

console.log(x);// Uncaught ReferenceError: x is not defined
try {

    let x = 100;

    console.log(x); //

    console.log(a);

} catch (e) {

    let y = 200;

    console.log(y); //

}

console.log(y); // Uncaught ReferenceError: y is not defined

从上可以看出，let存在块级作用域，var则没有。

还有一个特殊的，暂时性死区： 

console.log(typeof a); //=>undefined
console.log(typeof a); //=>Uncaught ReferenceError: Cannot access 'a' before initialization

let a;

再看let(var)和const 

let x = 10;

x = 20;

console.log(x); // 
const y = 10;

y = 20; // Uncaught TypeError: Assignment to constant variable.

console.log(y);
const obj = {a: 10};

obj.b = 20;

console.log(obj);  // {a: 10, b: 20}
let创建的变量是可以更改指针指向的，也就是可以重新赋值的，但是const声明的变量是不允许改变指针指向的。
ps：之前有人说const创建的是常量，常量即不可更改，但从代码示例可以看出，const声明的基本类型值确实不允许改变，但若声明的是存储对象的地址指针，还是可以操作该对象的，像数字100这种才是真正的常量。

相关阅读

目录[+]