作用域決定了變量的生命週期和可見性，變量在作用域範圍之外是不可見的。
JavaScript 的作用域包括：模塊作用域，函數作用域，塊作用域，詞法作用域和全局作用域。
全局作用域
在任何函數、塊或模塊範圍之外定義的變量具有全局作用域。可以在程序的任意位置訪問全局變量。
當啟用模塊系統時，創建全局變量會變得困難，但仍然可以做到這一點。可以在 HTML 中定義一個變量，這個變量需要在函數之外聲明，這樣就可以創建一個全局變量：
1
4console.log(GLOBAL_DATA);
當沒有模塊系統時，創建全局變量會容易很多。在任何文件中的函數外聲明的變量都是全局變量。
全局變量貫穿於程序的整個生命週期。
另一種創建全局變量的方法是在程序的任意位置使用 window 全局對象：
1window.GLOBAL_DATA = { value: 1 };
這樣 GLOBAL_DATA 變量會隨處可見。
1console.log(GLOBAL_DATA)
不過你也知道這種做法是不好的。
模塊作用域
如果不啟用模塊，在所有函數之外聲明的變量是全局變量。在模塊中，在函數外部聲明的變量都是隱藏的，除非顯式導出，否則不可用於其他模塊。
導出使函數或對象可用於其他模塊。在這個例子中，我從模塊文件 sequence.js 中導出了一個函數：
1// in sequence.js
2export { sequence, toList, take };
當前模塊可以通過導入來使用其他模塊的函數或對象成。
1import { sequence, toList, toList } from "./sequence";
在某種程度上，我們可以認為模塊是一個自動執行的函數，它將 import 的數據作為輸入，然後返回 export 的數據。
函數作用域
函數作用域意味著在函數中定義的參數和變量在函數內的任何位置都可見，但是在函數外部不可見。
下面是一個自動執行的函數，被稱為IIFE。
1(function autoexecute() {
2 let x = 1;
3})();
4console.log(x);
5//Uncaught ReferenceError: x is not defined
IIFE 的意思是立即調用函數表達式，是一個在定義後立即運行的函數。
用 var 聲明的變量只有函數作用域。更重要的是，用 var 聲明的變量被提升到其作用域的頂部。通過這種方式，可以在聲明之前訪問它們。看看下面的代碼：
1function doSomething(){
2 console.log(x);
3 var x = 1;
4}
5doSomething(); //undefined
這種事不會發生在 let 中。用 let 聲明的變量只能在定義後訪問。
1function doSomething(){
2 console.log(x);
3 let x = 1;
4}
5doSomething();
6//Uncaught ReferenceError: x is not defined
用 var聲明的變量可以在同一作用域下多次重新聲明：
1function doSomething(){
2 var x = 1
3 var x = 2;
4 console.log(x);
5}
6doSomething();
用 let 或 const 聲明的變量不能在同一作用域內重新聲明：
1function doSomething(){
2 let x = 1
3 let x = 2;
4}
5//Uncaught SyntaxError: Identifier 'x' has already been declared
也許我們可以不必關心這一點，因為 var 已經開始變得過時了。
塊作用域
塊作用域用花括號定義。它由 { 和 } 分隔。
用 let 和 const 聲明的變量可以受到塊作用域的約束，只能在定義它們的塊中訪問。
思考下面這段關於 let 塊範圍的代碼：
1let x = 1;
2{
3 let x = 2;
4}
5console.log(x); //1
相反，var 聲明不受塊作用域的約束：
1var x = 1;
2{
3 var x = 2;
4}
5console.log(x); //2
另一個常見問題是在循環中使用類似 setTimeout() 的異步操作。下面的循環代碼將顯示五次數字 5。
1(function run(){
2 for(var i=0; i<5; i++){
3 setTimeout(function logValue(){
4 console.log(i); //5
5 }, 100);
6 }
7})();
帶有 let 聲明的 for 循環語句在每次循環都會創建一個新的變量並設置到塊作用域。下一段循環代碼將會顯示 0 1 2 3 4 5。
1(function run(){
2 for(let i=0; i<5; i++){
3 setTimeout(function log(){
4 console.log(i); //0 1 2 3 4
5 }, 100);
6 }
7})();
詞法作用域
詞法作用域是內部函數訪問定義它的外部作用域的能力。
看一下這段代碼：
1(function autorun(){
2 let x = 1;
3 function log(){
4 console.log(x);
5 };
6
7 function run(fn){
8 let x = 100;
9 fn();
10 }
11
12 run(log);//1
13})();
log 函數是一個閉包。它從父函數 autorun() 引用 x 變量，而不是 run() 函數中的 x 變量。
閉包函數可以訪問創建它的作用域，而不是它自己的作用域。
autorun() 的局部函數作用域是 log() 函數的詞法作用域。
作用域鏈
每個作用域都有一個指向父作用域的鏈接。當使用變量時，JavaScript 會向下查看作用域鏈，直到它找到所請求的變量或者到達全局作用域（即作用域鏈的末尾）。
看下面這個例子：
1let x0 = 0;
2(function autorun1(){
3 let x1 = 1;
4
5 (function autorun2(){
6 let x2 = 2;
7
8 (function autorun3(){
9 let x3 = 3;
10
11 console.log(x0 + " " + x1 + " " + x2 + " " + x3);//0 1 2 3
12 })();
13 })();
14})();
內部函數 autorun3() 可以訪問本地 x3 變量。還可以從外部函數訪問變量 x1 和 x2 和全局變量 x0 。
如果找不到變量，它將在嚴格模式下返回錯誤。
1"use strict";
2x = 1;
3console.log(x)
4//Uncaught ReferenceError: x is not defined
非嚴格模式也被稱為“草率模式”，它會草率的創建一個全局變量。
1x = 1;
2console.log(x); //1
總結
在全局作用域中定義的變量可在程序的任何位置使用。
在模塊中，在函數外部聲明的變量都是隱藏的，除非被顯式導出，否則不可用於其他模塊。
函數作用域意味著函數中定義的參數和變量在函數的任意位置都可見
用 let 和 const 聲明的變量具有塊作用域。 var 沒有塊作用域。
十五年編程經驗，今年1月整理了一批2019年最新WEB前端教學視頻，不論是零基礎想要學習前端還是學完在工作想要提升自己，這些資料都會給你帶來幫助，從HTML到各種框架，幫助所有想要學好前端的同學，學習規劃、學習路線、學習資料、問題解答。只要加入WEB前端學習交流Q群：296212562，即可免費獲取。
閱讀更多 前端技術教學分享 的文章
關鍵字: 作用域 JavaScript 詞法
