本文實例講述了JavaScript詞法作用域與作用域鏈。分享給大家供大家參考，具體如下：

一、作用域

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

1.1 塊級作用域

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

{ var num = 123; { console.log( num ); // num => 123 }}console.log( num ); //報錯1.2 JS的詞法作用域

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

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

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

例子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 繪制作用域鏈

步驟：

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

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

繪制如下程序的作用域鏈

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

分析如下代碼：

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.

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。

更多關于JavaScript相關內容可查看本站專題：《JavaScript常用函數技巧匯總》、《javascript面向對象入門教程》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》及《JavaScript數學運算用法總結》

希望本文所述對大家JavaScript程序設計有所幫助。