說到 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