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

一、作用域

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

1.1 塊級(jí)作用域

在C、Java、C#等編程語(yǔ)言中，下面的語(yǔ)法報(bào)錯(cuò)（偽代碼）

{
  var num = 123;
  {
    console.log( num );  // num => 123
   }
}
console.log( num );  //報(bào)錯(cuò)

1.2 JS的詞法作用域

所謂的詞法（代碼）作用域，就是代碼在編寫(xiě)過(guò)程中體現(xiàn)出來(lái)的作用范圍，代碼一旦寫(xiě)好，不用執(zhí)行，作用范圍就已經(jīng)確定好了，這個(gè)就是所謂的詞法作用域。

在JS中詞法作用域的規(guī)則：

1. 函數(shù)允許訪問(wèn)函數(shù)外部的數(shù)據(jù)
2. 整個(gè)代碼結(jié)構(gòu)中只有函數(shù)可以限定作用域
3. 作用規(guī)則首先使用提升規(guī)則分析
4. 如果當(dāng)前作用域中有了名字了，就不考慮外面的名字

例子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

二、作用域鏈

只有函數(shù)才能制造作用域結(jié)構(gòu)，那么只要是代碼，至少有一個(gè)作用域，即全局作用域。

凡是代碼中有函數(shù)，那么這個(gè)函數(shù)就構(gòu)成另一個(gè)作用域。如果函數(shù)中還有函數(shù)，那么在這個(gè)作用域中就又可以誕生一個(gè)作用域，那么將這樣的所有作用域列出來(lái)，可以有一個(gè)結(jié)構(gòu)：函數(shù)內(nèi)指向函數(shù)外的鏈?zhǔn)浇Y(jié)構(gòu)

例如：

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

作用域鏈結(jié)構(gòu)與DOM樹(shù)結(jié)構(gòu)很相似.

2.1 繪制作用域鏈

步驟：

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

2.2 變量的訪問(wèn)（搜索）規(guī)則

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

繪制如下程序的作用域鏈

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

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

2.3 如何分析代碼

1. 在分析代碼的時(shí)候切記從代碼的運(yùn)行角度上來(lái)分析，如果代碼給變量賦值了，一定要標(biāo)記到圖中
2. 如果代碼比較復(fù)雜，可以在圖中表示代碼的內(nèi)容，有時(shí)候還要將原型圖與作用域圖結(jié)合起來(lái)分析

分析如下代碼：

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

作用域鏈圖：

首先把num=123，函數(shù)f1，函數(shù)f2畫(huà)在0級(jí)鏈上。f1中只有一句console，畫(huà)出一條1級(jí)鏈，f2也下畫(huà)出1級(jí)鏈，鏈上有num=456和函數(shù)調(diào)用語(yǔ)句f1();

調(diào)用f2()，進(jìn)入f2函數(shù)的作用域鏈，而在f2中又調(diào)用了f1函數(shù)，程序進(jìn)入f1的作用域鏈，所以console.log(num)會(huì)在此鏈上查找是否存在num，沒(méi)有，繼續(xù)向上一級(jí)鏈查找，剛好在0級(jí)鏈上找到了num=123，所以f1函數(shù)中的console.log(num)就是123.

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

更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專(zhuān)題：《JavaScript常用函數(shù)技巧匯總》、《javascript面向?qū)ο笕腴T(mén)教程》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

最新評(píng)論