JavaScript中詞法作用域與作用域鏈的用法

這篇文章主要講解了JavaScript中詞法作用域與作用域鏈的用法，內容清晰明了，對此有興趣的小伙伴可以學習一下，相信大家閱讀完之后會有幫助。

一、作用域

域表示的就是范圍，即作用域，就是一個名字在什么地方可以使用，什么時候不能使用。想了解更多關于作用域的問題推薦閱讀《你不知道的JavaScript上卷》第一章（或第一部分），從編譯原理的角度說明什么是作用域。概括的說作用域就是一套設計良好的規則來存儲變量，并且之后可以方便地找到這些變量。

1.1 塊級作用域

在C、Java、C#等編程語言中，下面的語法報錯（偽代碼）

{
  var num = 123;
  {
    console.log( num );  // num => 123
   }
}
console.log( num );  //報錯

1.2 JS的詞法作用域

所謂的詞法（代碼）作用域，就是代碼在編寫過程中體現出來的作用范圍，代碼一旦寫好，不用執行，作用范圍就已經確定好了，這個就是所謂的詞法作用域。

在JS中詞法作用域的規則：

1. 函數允許訪問函數外部的數據
2. 整個代碼結構中只有函數可以限定作用域
3. 作用規則首先使用提升規則分析
4. 如果當前作用域中有了名字了，就不考慮外面的名字

例子1：

var num = 123;
function foo(){
  console.log( num );
}
foo();  //123

例子2：

if( false ){
  var num = 123;
}
console.log( num ); //undefined

例子3：

var num = 123;
function foo () {
  var num = 456;
  function func(){
    console.log( num );
   }
   func();
}
foo();  //456

二、作用域鏈

只有函數才能制造作用域結構，那么只要是代碼，至少有一個作用域，即全局作用域。

凡是代碼中有函數，那么這個函數就構成另一個作用域。如果函數中還有函數，那么在這個作用域中就又可以誕生一個作用域，那么將這樣的所有作用域列出來，可以有一個結構：函數內指向函數外的鏈式結構

例如：

function f1() {
  function f2() {
  }
}
var num = 456;
function f3() {
  function f4() {
  }
}

作用域鏈結構與DOM樹結構很相似.

2.1 繪制作用域鏈

步驟：

1. 看整個全局是一條鏈，即頂級鏈，記為0級鏈
2. 看全局作用域中有什么成員聲明，就以方格的形式繪制到0級鏈上
3. 再找函數，只有函數可以限制作用域，因此從函數中引出新鏈，標記為1級鏈
4. 然后在每一個1級鏈中再次往復剛才的行為

2.2 變量的訪問（搜索）規則

1. 首先看變量在第幾條鏈上，在該鏈上看是否有變量的定義與賦值，如果有直接使用
2. 如果沒有到上一級鏈上找（ n - 1 級鏈）,如果有直接使用，停止繼續查找。
3. 如果還沒有在此往上找… 直到全局鏈（0級），還沒有就是is not defined
4. 注意，切記：同級的鏈不可混合查找

繪制如下程序的作用域鏈

function f1() {
  var num = 123;
  function f2() {
    console.log( num ); 
   }
  f2();
}
var num = 456;
f1();  //123

函數f1 和變量 num=456， 在0級鏈，而f1下又可以展開1級鏈，1級鏈上有num=123和函數f2。程序f1()調用進入左邊1級鏈，而f1中又調用了f2函數，f2函數中console.log(num)可以看作在2級鏈，此時，程序會向這一條鏈向上查找，首先2級鏈沒有num，向上到達1級鏈，剛好1級鏈上有num=123，所以就直接使用123，程序最后的結果就是打印123.

2.3 如何分析代碼

1. 在分析代碼的時候切記從代碼的運行角度上來分析，如果代碼給變量賦值了，一定要標記到圖中
2. 如果代碼比較復雜，可以在圖中表示代碼的內容，有時候還要將原型圖與作用域圖結合起來分析

分析如下代碼：

var num = 123;
function f1() {
  console.log( num );
}
function f2(){
  var num = 456;
  f1();
}
f2();  //123

作用域鏈圖：

首先把num=123，函數f1，函數f2畫在0級鏈上。f1中只有一句console，畫出一條1級鏈，f2也下畫出1級鏈，鏈上有num=456和函數調用語句f1();

調用f2()，進入f2函數的作用域鏈，而在f2中又調用了f1函數，程序進入f1的作用域鏈，所以console.log(num)會在此鏈上查找是否存在num，沒有，繼續向上一級鏈查找，剛好在0級鏈上找到了num=123，所以f1函數中的console.log(num)就是123.

看完上述內容，是不是對JavaScript中詞法作用域與作用域鏈的用法有進一步的了解，如果還想學習更多內容，歡迎關注億速云行業資訊頻道。