英文 | https://www.javascripttutorial.net

翻譯 | 楊小愛

在今天的本教程中，我們一起來了解var和let關(guān)鍵字之間的區(qū)別。

1、變量范圍

當(dāng)我們在函數(shù)外部定義變量時，這些var變量屬于全局范圍。例如：


var counter;

在本例中，counter是一個全局變量。這意味著該counter變量可以被任何函數(shù)訪問。

當(dāng)我們使用關(guān)鍵字在函數(shù)內(nèi)聲明變量時var，變量的范圍是局部的。例如：


function increase() {    var counter = 10;}// cannot access the counter variable here

在這個例子中，counter變量是increase()函數(shù)的局部變量。它不能在函數(shù)之外訪問。

以下示例在循環(huán)內(nèi)顯示從 0 到 4 的四個數(shù)字，在循環(huán)外顯示數(shù)字 5。


for (var i = 0; i < 5; i++) {  console.log("Inside the loop:", i);}
console.log("Outside the loop:", i);

輸出：


Inside the loop: 0 Inside the loop: 1 Inside the loop: 2 Inside the loop: 3 Inside the loop: 4 Outside the loop: 5

在此示例中，i變量是全局變量。因此，可以從循環(huán)內(nèi)部和for循環(huán)之后訪問它。

以下示例使用let關(guān)鍵字而不是var關(guān)鍵字：


for (let i = 0; i < 5; i++) {  console.log("Inside the loop:", i);}
console.log("Outside the loop:", i);

在這種情況下，代碼在循環(huán)中顯示了從 0 到 4 的四個數(shù)字和一個引用錯誤：


Inside the loop: 0Inside the loop: 1Inside the loop: 2Inside the loop: 3Inside the loop: 4

錯誤：


Uncaught ReferenceError: i is not defined

由于此示例使用let關(guān)鍵字，因此該變量i是阻塞范圍。這意味著該變量i僅存在并且可以在for循環(huán)塊內(nèi)訪問。

在 JavaScript 中，一個塊由一對花括號分隔，{}就像在if...elseandfor語句中一樣：


if(condition) {   // inside a block}
for(...) {  // inside a block}

2、創(chuàng)建全局屬性

全局var變量作為屬性添加到全局對象中。全局對象位于Web 瀏覽器和Node.js 上：windowglobal


var counter = 0;console.log(window.counter); //  0

但是，let變量不會添加到全局對象中：


let counter = 0;console.log(window.counter); // undefined

var關(guān)鍵字允許我們重新聲明變量而不會出現(xiàn)任何問題：


var counter = 10;var counter;console.log(counter); // 10

但是，如果我們用let關(guān)鍵字重新聲明一個變量，我們會得到一個錯誤：


let counter = 10;let counter; // error

let 變量有時間死區(qū)，而 var 變量沒有。為了理解時間死區(qū)，讓我們檢查一下 var 和 let 變量的生命周期，它們有兩個步驟：創(chuàng)建和執(zhí)行。

var 變量

在創(chuàng)建階段，JavaScript 引擎將存儲空間分配給 var 變量，并立即將它們初始化為 undefined。

在執(zhí)行階段，JavaScript 引擎將分配指定的值分配給 var 變量（如果有的話）。否則， var 變量保持未定義。

有關(guān)詳細(xì)信息，請參閱執(zhí)行上下文。

let變量

在創(chuàng)建階段，JavaScript 引擎為 let 變量分配存儲空間，但不初始化變量。引用未初始化的變量將導(dǎo)致 ReferenceError。

let 變量與 var 變量具有相同的執(zhí)行階段。

時間死區(qū)從塊開始，直到處理了 let 變量聲明。換句話說，它是在定義之前無法訪問 let 變量的位置。

在今天的文章中，我們了解了 var 和 let 關(guān)鍵字之間的區(qū)別。