Javascript中var與let間差異

Javascript申明變數的方式有let、var、const三種不同方式。 let和const行為在詞法環境中相同,但是var差異很大，var在早起被引入，現代Javascript一般不使用，但舊代碼到處都是，本文詳細說明，希望不讓你迷惑。

範例1 兩者相同

function sayHi() {
  var phrase = "Hello"; // local variable, "var" instead of "let"

  alert(phrase); // Hello
}

sayHi();

alert(phrase); // Error, phrase is not defined

登入後複製

範例2 兩者不同

下面是不同的，var沒有區塊區域，只有全域或函數區域，可以越過區塊區域。

if (true) {
  var test = true; // use "var" instead of "let"
}

alert(test); // true, the variable lives after if

登入後複製

如果我們使用 let 在第二行，在alter語句不能存取test百年來。但是var忽略程式碼區塊，所以我們其實申明test變數為全域變數了。

對loop也是同樣的，var不能是區塊區域或局部循環區域：

for(var i = 0; i < 10; i++) {
  // ...
}

alert(i); // 10, "i" is visible after loop, it&#39;s a global variable

登入後複製

如果程式碼區塊在函數裡，那麼var變成了函數級變數：

function sayHi() {
  if (true) {
    var phrase = "Hello";
  }

  alert(phrase); // works
}

sayHi();
alert(phrase); // Error: phrase is not defined

登入後複製

如你所見，var穿過if，for或其他程式碼區塊，這時早期Javascript區塊沒有詞法環境，var是早起遺留產物。

var在函數開始時處理

var申明在函數（或腳本開始處，為全域變數）開始點處理。換言之，var變數在函數開始處被申明，無論其定義在哪裡（假設不是定義在巢狀函數裡）。程式碼範例：
function sayHi() {
phrase = “Hello”;

  alert(phrase);

  var phrase;
}

登入後複製

與下面程式碼效果一樣：

function sayHi() {
  var phrase;

  phrase = "Hello";

  alert(phrase);
}

登入後複製

甚至在被忽略的程式碼區塊中：

function sayHi() {
  phrase = "Hello"; // (*)

  if (false) {
    var phrase;
  }

  alert(phrase);
}

登入後複製

一般稱這種行為叫“提升”，因為所有var被提升至函數頂端。所以，範例中if(false)段程式碼永遠不會被執行，但沒關係，var被提升至函數頂部，所有範例中（*）行變數已經存在。

申明被提升，但賦值沒有提升
示範範例如下：
function sayHi() {
alert(phrase);

  var phrase = "Hello";
}

sayHi();

登入後複製

var = phrase = “Hello” 有兩個動作
1、申明變數var
2、變數賦值=

申明被提升到函數頂部，但賦值總是在原來的地方，所以程式碼實際效果如下：

function sayHi() {
  var phrase; // declaration works at the start...

  alert(phrase); // undefined

  phrase = "Hello"; // ...assignment - when the execution reaches it.
}

sayHi();

登入後複製

因為所有all申明被提升至函數頂部，所以我們能在函數內其他地方引用，但變數在賦值前是undefined。上面兩個範例alert運行都沒有錯誤。因為變數phrase已經存在，但有沒有被賦值，所以顯示undefined。