【web前端基礎 | JS基礎】作用域
1 - 作用域
1.1 作用域概述
通常來說，一段程式程式碼中所用到的名字並不總是有效和可用的，而限定這個名字的可用性的程式碼範圍就是這個名字的作用域。作用域的使用提高了程式邏輯的區域性性，增強了程式的可靠性，減少了名字衝突。
JavaScript（es6前）中的作用域有兩種：
- 全域性作用域
- 區域性作用域（函式作用域）
1.2 全域性作用域
作用於所有程式碼執行的環境(整個 script 標籤內部)或者一個獨立的 js 檔案。
1.3 區域性作用域
作用於函式內的程式碼環境，就是區域性作用域。
因為跟函式有關係，所以也稱為函式作用域。
1.4 JS沒有塊級作用域
-
塊作用域由 { } 包括。
-
在其他程式語言中（如 java、c#等），在 if 語句、迴圈語句中建立的變數，僅僅只能在本 if 語句、本迴圈語句中使用，如下面的Java程式碼：
java有塊級作用域：
if(true){ int num = 123; system.out.print(num); // 123 } system.out.print(num); // 報錯以上java程式碼會報錯，是因為程式碼中 { } 即一塊作用域，其中宣告的變數 num，在 “{ }” 之外不能使用；
而與之類似的JavaScript程式碼，則不會報錯：
Js中沒有塊級作用域（在ES6之前）
if(true){ var num = 123; console.log(123); //123 } console.log(123); //123
2 - 變數的作用域
在JavaScript中，根據作用域的不同，變數可以分為兩種：
- 全域性變數
- 區域性變數
2.1 全域性變數
在全域性作用域下宣告的變數叫做全域性變數（在函式外部定義的變數）。
var num = 10;
console.log(num); //10
function fn() {
console.log(num); //10
}
fn();
- 全域性變數在程式碼的任何位置都可以使用
- 在全域性作用域下 var 宣告的變數 是全域性變數
- 特殊情況下，在函式內不使用 var 宣告的變數也是全域性變數（不建議使用）
2.2 區域性變數
在區域性作用域下宣告的變數叫做區域性變數（在函式內部定義的變數）
function fn() {
var num1 = 10;
num2 = 20;
}
fn();
- 區域性變數只能在該函式內部使用
- 在函式內部 var 宣告的變數是區域性變數
- 函式的形參實際上就是區域性變數
2.3 全域性變數和區域性變數的區別
- 全域性變數：在任何一個地方都可以使用，只有在瀏覽器關閉時才會被銷燬，因此比較佔記憶體
- 區域性變數：只在函式內部使用，當其所在的程式碼塊被執行時，會被初始化；當代碼塊執行結束後，就會被銷燬，因此更節省記憶體空間
3 - 作用域鏈
- 只要是程式碼，就至少有一個作用域
- 寫在函式內部的區域性作用域
- 如果函式中還有函式，那麼在這個作用域中就又可以誕生一個作用域
- 根據在內部函式可以訪問外部函式變數的這種機制，用鏈式查詢決定哪些資料能被內部函式訪問，就稱作作用域鏈
案例分析1：
function f1() {
var num = 123;
function f2() {
console.log( num );
}
f2();
}
var num = 456;
f1();
作用域鏈：採取就近原則的方式來查詢變數最終的值。（那目標往外找）
var a = 1;
function fn1() {
var a = 2;
var b = '22';
fn2();
function fn2() {
var a = 3;
fn3();
function fn3() {
var a = 4;
console.log(a); //a的值 ?
console.log(b); //b的值 ?
}
}
}
fn1();
4 - 預解析
4.1 預解析的相關概念
JavaScript 程式碼是由瀏覽器中的 JavaScript 解析器來執行的。JavaScript 解析器在執行 JavaScript
程式碼的時候分為兩步：預解析和程式碼執行。
-
預解析：在當前作用域下, JS 程式碼執行之前，瀏覽器會預設把帶有 var 和 function 宣告的變數在記憶體中進行提前宣告或者定義。
-
程式碼執行： 從上到下執行JS語句。
預解析會把變數和函式的宣告在程式碼執行之前執行完成。
4.2 變數預解析
預解析也叫做變數、函式提升。
變數提升（變數預解析）： 變數的宣告會被提升到當前作用域的最上面，變數的賦值不會提升。
console.log(num); // 結果是多少？
var num = 10; // ？
結果：undefined
注意：變數提升只提升宣告，不提升賦值
4.3 函式預解析
函式提升： 函式的宣告會被提升到當前作用域的最上面，但是不會呼叫函式。
fn();
function fn() {
console.log('列印');
}
結果：控制檯列印字串 ”列印“
注意：函式宣告代表函式整體，所以函式提升後，函式名代表整個函式，但是函式並沒有被呼叫！
4.4 函式表示式宣告函式問題
函式表示式建立函式，會執行變數提升，此時接收函式的變數名無法正確的呼叫：
fn();
var fn = function() {
console.log('好好學習，天天向上');
}
結果：報錯提示 ”fn is not a function"
解釋：該段程式碼執行之前，會做變數宣告提升，fn在提升之後的值是undefined；而fn呼叫是在fn被賦值為函式體之前，此時fn的值是undefined，所以無法正確呼叫
- 如果是獲取值，報錯
- 如果是賦值，變成全域性變數