letvarconst的区别

Posted 2021-03-11 ronaldo9ph

先看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); // 3

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); // 2

 

3.

var y = 21;
var y = 24;
console.log(y); // 24

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); // 100
    console.log(a);
} catch (e) {
    let y = 200;
    console.log(y); // 200
}
console.log(x);// Uncaught ReferenceError: x is not defined

try {
    let x = 100;
    console.log(x); // 100
    console.log(a);
} catch (e) {
    let y = 200;
    console.log(y); // 200
}
console.log(y); // Uncaught ReferenceError: y is not defined

 

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

 

 

再看let(var)和const

let x = 10;
x = 20;
console.log(x); // 20

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这种才是真正的常量。