JS中let、var、const的區別-有解無憂

先看let和var：

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 () {};

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

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的不可以，是因為在詞法決議階段都過不去，所以也就不存在引擎去執行代碼的階段了，

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則沒有，

還有一個特殊的，暫時性死區：

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); // 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這種才是真正的常量，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/149821.html

標籤：JavaScript

上一篇：vue-socket.io跨域問題的解決方法

下一篇：01.JS語法規范、變數與常量