JavaScript中作用域的詳細介紹（程式碼範例）-js教程-PHP中文網

這篇文章帶給大家的內容是關於JavaScript中作用域的詳細介紹（程式碼範例），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

幾乎所有的程式語言都有作用域的概念，那作用域到底指的是什麼呢？作用域就是程式語言在定義變數時，變數如何儲存、變數如何存取的一套規則，不同的程式語言的規則大同小異，接下來就來看看這套規則是怎麼設定的

#編譯原理

在傳統編譯語言中，在程式碼執行之前都會有一個編譯過程：

分詞/詞法分析：將程式碼語句分解成有意義的代碼塊，又叫詞法單元。
解析/語法分析：將詞法單元轉換一個逐級嵌套的具有語法規則的樹狀結構，又叫抽象語法樹(AST)
程式碼生成：解析AST並轉化成機器指令

和傳統編譯語言不太一樣，js的編譯和執行並不是分開執行，大多數情況都是編譯過程結束就會立刻執行，為了在短時間的編譯過程內達到較優效能，js引擎較一般編譯器更複雜，現在就讓來看js的編譯過程，簡單的以編譯var a = 2為例：

遇到var a，編譯器會詢問作用域是否已經有一個該名稱的變數存在於同一個作用域的集合中。如果是，編譯器會忽略該聲明，繼續進行編譯；否則它會要求作用域在目前作用域的集合中聲明一個新的變數a
接下來編譯器會為引擎產生執行時間所需的程式碼，這些程式碼被用來處理a=2這個賦值運算。引擎在運作時會先詢問作用域，在目前的作用域集合中是否存在一個叫做a的變數。如果否，引擎就會使用這個變數；如果引擎最後找到了a，就會將2賦值給它。否則引擎就會拋出一個異常

詞法作用域

作用域一般有兩種工作模型，第一種是被大多數程式語言所採用的詞法作用域，另外一種叫作動態作用域，如Bash腳本採用的就是動態作用域。詞法作用域是定義在詞法階段的作用域，詞法作用域是由你在寫程式碼時將變數和區塊作用域寫在哪裡決定的，由變數定義位置決定，而動態作用域則是由變數使用的位置來決定的。下面來看個例子：

function foo(a) {
  var b = a * 2;
  function bar(c) {
    console.log(a, b, c)
  }
  bar(b * 3)
}
foo(2)

登入後複製

先來分析這裡一共存在幾個作用域？

全域作用域，裡面有foo變數
foo函數所建立的作用域，裡面有a,b,bar變數
bar函數所建立的作用域，裡面有c變數

接下來再來分析變數的查找過程，引擎執行console.log()需要找a、b、c三個變數的引用，先從最裡面的bar ()作用域開始找，引擎無法找到a，因此會再往上到foo()作用域中找，在這裡找到了a，停止查找，對於b、c來說查找過程一樣。作用域查找總是從運行時最內層開始查找，逐級向外查找，直到遇見第一個匹配的變數。

函數作用域

函數作用域指的是屬於這個函數的全部變數都可以在整個函數的範圍內使用及復用，這是大家都知道的定義，但是函數作用域的存在到底有什麼用呢？接下來就一起看看函數作用域的秒用。

隱藏內部實作

隱藏內部實作就是將變數和函數包裹在一個函數的作用域中，達到隱藏的目的，為什麼要這麼做呢？軟體設計中有一個非常有名的原則叫最小暴露原則，指最小限度暴露必要內容，而將其他內容都隱藏起來，例如模組或物件的API設計。用函數作用域來包裹變數和函數來達到最小暴露原則，阻止外部直接訪問，來看下面的例子：

function doSomething(a) {
  b = a + doSomethingElse( a * 2 );
  console.log( b * 3 );
}
  
function doSomethingElse(a) {
  return a - 1;
}
var b;
doSomething( 2 ); // 15”

登入後複製

在這段程式碼中doSomethingElse和b應該是doSomething內部私有的，但是卻被揭露出來，這樣會導致以預期之外的形式被使用，產生意料之外的結果，更合理的設計應該是將這些私有的內容隱藏在doSomething內部，例如:

function doSomething(a) {
  function doSomethingElse(a) {
    return a - 1;
  }
  var b;
  b = a + doSomethingElse( a * 2 );
  console.log( b * 3 );
}
doSomething( 2 );

登入後複製

這樣b和doSomethingElse都無法從doSomething外部訪問，但是這樣也會存在一些問題，首先在全局作用域中聲明了doSomething函數，污染了全局作用，其次，必須通過顯示調用才能執行，那麼有沒有什麼辦法既不會污染作用域也不需要呼叫就可以自執行呢？答案就是函數表達式，看下面的例子：

(function doSomething(a) {
  function doSomethingElse(a) {
    return a - 1;
  }
  var b;
  b = a + doSomethingElse( a * 2 );
  console.log( b * 3 );
})(2)

登入後複製

首先來看(function doSomething(){})這是一個函數表達式，和函數宣告不同的是用括號包起來的，然後再(function doSomething(a){})()呼叫傳值，這樣既能自執行也不會污染作用域，社區給這種用法定義了一個術語：IIFE，代表立即執行函數表達式

块作用域

除JavaScript外很多编程语言都支持块作用域，尽管你可能写过很伪块作用域形式的代码，最常见的就是for循环：

for(var i=0; i<10; i++) {
  console.log(i)
}

登入後複製

写这段代码通常是希望变量i在循环内部使用，但是实际上i会被绑定到外部作用域中，要确保没有在作用域的其他地方意外使用i，就只能依靠自觉，这时候块级作用域就显得尤为有用，ES6改变了现状，引入了新的let、const关键字，let关键字可以将变量绑定到所在的任意作用域中，也就是let为其声明的变量隐式地创建了作用域：

for(let i=0; i<10; i++) {
  console.log(i)        
}
console.log(i) // ReferenceError

登入後複製

这时候i就只会在for循环的内部有效

以上是JavaScript中作用域的詳細介紹（程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！