詳細解析let和const命令

2022-06-24 18:00:42

let命令

基本用法

我們都知道let命令是用來宣告變數的，類似於var，但是通過let命令宣告的變數只在所在程式碼塊內有效。

let a = [];
for (let i = 0;i < 10; i++ ) {
    a[i] = function () {
        console.log(i);
    }
}
a[5](); // 5

如上程式碼所示，使用的是let宣告的i，那麼這個變數僅在塊級作用域內有效，即只在每輪迴圈內有效，所以每次迴圈的i其實都是一個新變數，所以最後輸出了5。

如果使用了var去申明i，那麼這個i是在全域性範圍內都有效的，函數陣列裡的i都會指向同一個i，匯出最後輸出的是最後一輪迴圈的i的值。

那就有了一個疑問，使用let宣告的i如果每一輪都是一個新變數，那怎麼知道上一輪迴圈的值然後計算出本輪的值？

這是因為JavaScript引擎內部會記住上一輪迴圈的值，初始化當次迴圈的i時，會在上一輪迴圈的基礎上計算。

for迴圈還有一個特別的地方，就是設定迴圈變數的括號內是一個父作用域，而回圈體內是一個單獨的子作用域。

特性

不存在變數提升：

不存在變數提升我們應該都知道，在var命令中會發生“變數提升”，就是變數可以在宣告之前使用，而值是undefined。這種是比較奇怪的現象，因為他都還沒宣告怎麼就可以使用呢？

所以。let命令改變了這種語法，通過let宣告的變數一定要在變數宣告後才能用，不然就會報錯。

console.log(b) // undefined
console.log(a) // 報錯ReferenceError
let a = 2;
var b = 1;

暫時性死區

只要塊級作用域記憶體在Let命令，那麼這個let宣告的變數就係結了這個區域，不會受到外部的影響。

var num = 1;
if(true) {
    num = 2; // 報錯，ReferenceError
    let num;
}

如上面程式碼所示，if程式碼塊內想要修改的是if外部的num，但是if內部通過let宣告了一個num但為賦值，所以導致了通過let宣告的num繫結了這個塊級作用域（即if內部這個塊級作用域），所以不會受到外部的num影響，所以對num賦值會報錯。

ES6明確規定了，如果在區塊記憶體在let和const命令，那麼這個區塊對這些命令宣告的變數從一開始就形成封閉的作用域，只要在宣告之前就使用這些變數，就會報做。也稱暫時性死區（temporal dead zone,簡稱TDZ）

當然，這也造成了typeof變得不安全了，因為如果一個變數沒有宣告就使用typeof不會報錯，會返回一個undefined，但是現在不成立了，因為會報錯ReferenceError。

function bar(x = y, y = 2) {
    return[x,y] 
}
bar() // 報錯

如上程式碼所示，呼叫bar函數會報錯，因為引數x的預設值等於另一個引數y，但是x在宣告的時候y還沒有宣告，屬於死區。

總之，只要進入當前作用域，所要使用的變數就已經存在，但是不可獲取，只有等到宣告變數的那一行程式碼出現，才可以獲取和使用該變數。

其實let和const是存在變數提升的，但是由於暫時性死區的關係，變數已經存在了，但是不可獲取，要等到宣告變數的時候才可以獲取和使用。

不允許重複宣告

let不允許在校內共同作用域內重複宣告同一個變數，這個就不用說了大家都知道。

let a = 1;
let a = 2; // 報錯

const

我們都知道const宣告一個唯讀的常數。修改這個值就會報錯。但是實際上保證的不是變數的值不能改動，而是變數指向的那個記憶體地址不能改動。

對於簡單資料型別來說，值就是儲存在變數指向的記憶體地址中，因此等同於常數。

而對於複合型別的資料，變數指向的記憶體地址儲存的是一個指標，const只保證指標是固定，不保證內部的結構是不是可變的。

    // 給物件新增一個屬性
    const foo = {}
    foo.name = 123
    console.log(foo.name) // 123
    // 將foo指向另一個物件，就會報錯
    foo = {} // 報錯。

如果想要將物件凍結，可以使用Object.freeze

const foo = Object.freeze({});

特性

只在宣告所在的塊級作用域內有效。
const宣告的常數不會提升，同樣存在暫時性死區，只能在宣告後使用。
不可重複宣告。

補充——塊級作用域

函數能不能在塊級作用域中宣告呢？

ES5中是規定函數只能在頂級作用域和函數作用域之中宣告，不能在塊級作用域宣告。

ES6中引入了塊級作用域，明確允許在塊級作用域之中宣告函數。而且。函數宣告的語句的行為類似於let，在塊級作用域之外不可參照。

function f() {
    console.log('I am outside!')
}
(function() {
    if(false) {
        function f() {
            console.log('I am inside')
        }
    }
}
f();
}())

上面的程式碼，在es5中執行時會得到I am inside!，因為if內部的f函數會被提升到函數頭部。

但是在ES6環境則會報錯，為什麼呢？

因為遊覽器的實現有自己的方式：

允許在塊級作用域內宣告函數
函數宣告類似於var,會提升到全域性作用域或函數作用域的頭部
函數宣告還會提升到所在的塊級作用域的頭部

所以上述程式碼實際在ES6的遊覽器中會生成這樣的程式碼：

  function f() {
    console.log("I am outside!");
  }
  (function () {
    var f = undefined;
    if (false) {
      function f() {
        console.log("I am inside");
      }
    }
  })();

因此，應該避免在塊級作用域內宣告函數，如果確定需要寫成函數表示式的形式，而不是函數宣告語句。

到此這篇關於詳細解析let和const命令的文章就介紹到這了,更多相關let和const內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！