JavaScript 中 let 和 var 的區別

Tahseen Tauseef 2023年10月12日
JavaScript 中 let 和 var 的區別

這篇教程文章解釋了 JavaScript 中 varlet 關鍵字的實際工作方式以及它們的主要區別。

與其他程式語言一樣,JavaScript 具有用於儲存值和資料的變數。在 JavaScript 中,我們同時使用 letvar 關鍵字來宣告變數。

有些人認為這兩個關鍵字可以互換使用,但事實並非如此。兩者之間的主要區別可能會導致我們的程式設計出現重大錯誤。

在 ES6 更新到 JavaScript 之前,只有一種方法可以在 JavaScript 中宣告變數和常量。但是自從 ES6 更新以來,我們現在有了 letconst 關鍵字用於宣告變數和常量。

letconst 關鍵字新增到 JavaScript 的主要原因之一是使用 var 關鍵字宣告的變數不是宣告它的塊。相反,它的範圍僅限於函式,導致一些程式設計問題,我們將在文章的後半部分討論。

讓我們看一下這段程式碼以便更好地理解。

function example() {
  for (let i = 0; i < 10; i++) console.log(i);

  console.log(i);
}
example();

在這個程式碼段中,我們在 for 迴圈中宣告瞭變數 i 並使用 console.log 來獲取變數的值。我們沒有在 for 迴圈之後使用 {} 括號,所以 for 迴圈的塊只是下一行。

但是,我們使用了額外的 console.log 來顯示 i 的值。但是第二個 console.log 將無法獲取變數 i 的值,並會顯示以下錯誤:

ReferenceError: i is not defined

發生此錯誤是因為變數 i 的範圍僅適用於 for 迴圈塊,並且無法在塊外訪問。因此,通過這種方式,我們不能使用塊外的變數,因為使用 let 關鍵字宣告的變數的範圍僅限於塊。

要檢視 letvar 之間的區別,請檢視以下程式碼段:

function example() {
  for (var i = 0; i < 10; i++) console.log(i);

  console.log(i);
}
example();

在上面的程式碼中,我們可以觀察到我們使用了 var 關鍵字代替了 let 關鍵字。

雖然在前面的示例中保留了相同的兩個 console.log,但在這種情況下,第二個 console.log 也將有一個輸出。那麼,讓我們看看輸出:

0
1
2
3
4
5
6
7
8
9
10

第一個 console.log 列印從 09 的值,條件 i<10 也是如此。

但是我們可以將 10 視為肯定不是來自第一個 console.log 的輸出。因此,這個 10 是第二個 console.log 輸出。

這裡的問題是,變數 i 應該在其塊內使用,但由於塊外的 console.log 訪問了它,這意味著它已經超出了它的範圍。

它證明了 letvar 關鍵字用於宣告變數,但 var 關鍵字宣告的變數在其範圍方面僅限於塊。但是,var 關鍵字的作用域僅限於函式。

如果我們在函式外部宣告一個變數,letvar 之間還有另一個主要區別。如果我們在函式外部使用 let 關鍵字,則會建立一個無法從外部訪問的區域性變數。

但是如果我們使用 var 關鍵字,它就會變成一個全域性變數。讓我們看一下下面的程式碼段:

var color = 'blue';
let model = '2021';

在此程式碼段中宣告瞭兩個變數,一個使用 let 關鍵字,另一個使用 var 關鍵字。因此,使用 var 關鍵字宣告的變數已成為全域性變數,並將附加到瀏覽器中的 window 物件。

在瀏覽器中,我們有一個視窗物件,它有很多屬性和方法,而且非常複雜。前端應用程式開發人員廣泛瞭解視窗物件,因為他們經常使用它。

每次我們在函式外使用 var 關鍵字時,該變數都會成為全域性變數,並與 window object 關聯,並且可以從 window object 訪問。在這種情況下,它將被訪問為 window.color 將顯示 color 變數內的值,即 blue

我們使用第三方庫並使用 var 關鍵字在函式外部宣告變數。如果第三方庫有一個與我們的變數同名的變數,該變數將覆蓋我們的變數。

這是我們避免向視窗物件新增任何內容的另一個原因;我們的意思是在這種情況下避免使用 var 關鍵字。