JavaScript Weird Part (9) - 函數、環境與變數環境

2019-04-22 PV:

變數環境(variable environments) 是另一個理解 Javascript 底層運作原理的基礎概念。變數環境就是指你創造變數的位置，以及他在記憶體中和其他變數的關係。因此在思考變數環境的時候，只要思考變數在哪裡。

變數環境

有函式 a 及函式 b，函式 b 內宣告一變數 myVar，並且不設定值，函式 a 內設定變數 myVar=2，在函式外再次宣告 myVar＝1，接著呼叫函式 a，裡面逐行執行呼叫 b。所以 myVar 的值是多少？此時我們必須回到執行環境，思考函數執行時會發生什麼事，產生什麼底層運作？

function b() {
  var myVar;
}

function a() {
  var myVar = 2;

  b();
}

var myVar = 1;
a();

創造全域執行環境、變數被放入記憶體中。對全域執行物件來說，它的變數環境是全域物件，也就是瀏覽器的 window。所以程式執行時，執行到 var myVar=1這一行時，在記憶體中的變數會得到 1 的值。
執行函式 a，一個新的執行環境被建立給 a，此時myVar會放進執行環境變數環境，因為每個執行環境都有自己的變數環境。所以此時myVar的值會變 2。
呼叫函式 b，創造一個執行環境和變數環境，這個變數也有自己的記憶體空間。因為它沒有設定任何值，所以在記憶體中會變成 undefined。

這和一個叫 scope 的概念有關。這表示我們可以在哪裡看到變數。這裡的每個變數都被定義在自己的執行環境中。因為它們在函式裡面，每當我們呼叫函式，就會得到他們自己的執行環境。所以雖然變數myVar被宣告 3 次，但彼此是不同的，彼此之間沒有關聯。

所有的變數都處在自己的執行環境裡，因此呼叫函式不會影響到在函式之外被宣告的變數，所以如果我們在最後一行的函數呼叫之後，再宣告一次同樣的myVar=1 依然會得出同樣的值。

function b() {
	var myVar;
	console.log(myVar);
}

function a() {
	var myVar = 2;
	console.log(myVar);
	b();
}

var myVar = 1;
console.log(myVar);
a();
console.log(myVar);

因為myVar=1和全域執行環境的變數環境有關。而函數 a 和 b 都有自己的執行環境，它們各自的變數都在各自的變數環境中，執行完後就離開執行堆，正在執行的環境又回歸到全域執行環境。