iT邦幫忙

2021 iThome 鐵人賽

DAY 12
0
Modern Web

從零開始的JS學習之路系列 第 12

[Day12] 從 function 談變數的 Scope

說到 function ,又要回頭來談變數在 function 的 scope(作用域)
先宣告一個例子:

var a = 100;
var func1 = function (x) {
  var a = 13;
  return a + x; 
};
console.log(func1(7)); // 20
console.log(a); // 100

宣告在外面的 a 屬於全域變數,而在 func1 {} 大括號內的 a 屬於區域變數,雖然變數名稱一樣,但因作用域不同,內部宣告的值只存在這個函式,所以可以視為兩個不同的變數。
而 function 裡宣告的 a 只會作用在 {} 大括號內,所以這就是 console.log(a) 是 100 的原因。

在 ES6 以前切分變數有效範圍的最小單位是 "function" -- 008

如果 function 內沒有 var a 的話,function 會一層一層往外找,這裡就會找到全域的 var a,如下例:

var a = 100;
var func1 = function (x) {
  return a + x; 
};
console.log(func1(7)); // 107
console.log(a); // 100

由此可知,內層可以讀到外層宣告的變數,而外層拿不到內層宣告的變數,為什麼會強調宣告呢?因為有一個很需要注意的情況,還記得前面[Day02] 變數提到的

「未宣告的變數也能直接賦值,但是會有後遺症」

Javascript 會往外層尋找有沒有變數叫 a,直到找到為止,也就是全域物件。未經宣告直接再次賦值改變了外層變數的值,同時也影響了外層讀取 a 的結果。

var a = 100;
var func1 = function (x) {
  a = 13; // 直接賦值改變了外層同名變數 a
  return a + x; 
};
console.log(func1(7)); // 20
console.log(a); // 13

參考資料
008 天重新認識 JavaScript


上一篇
[Day11] 函式 function
下一篇
[Day13] Hoisting
系列文
從零開始的JS學習之路30

尚未有邦友留言

立即登入留言