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

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

創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價比鹽城網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式鹽城網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋鹽城地區(qū)。費(fèi)用合理售后完善，十年實體公司更值得信賴。

一、作用域

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

1.1 塊級作用域

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

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

1.2 JS的詞法作用域

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

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

1. 函數(shù)允許訪問函數(shù)外部的數(shù)據(jù)
2. 整個代碼結(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)，那么只要是代碼，至少有一個作用域，即全局作用域。

凡是代碼中有函數(shù)，那么這個函數(shù)就構(gòu)成另一個作用域。如果函數(shù)中還有函數(shù)，那么在這個作用域中就又可以誕生一個作用域，那么將這樣的所有作用域列出來，可以有一個結(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樹結(jié)構(gòu)很相似.

2.1 繪制作用域鏈

步驟：

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

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

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

繪制如下程序的作用域鏈

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

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

2.3 如何分析代碼

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

分析如下代碼：

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

作用域鏈圖：

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

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

看完上述內(nèi)容，是不是對JavaScript中詞法作用域與作用域鏈的用法有進(jìn)一步的了解，如果還想學(xué)習(xí)更多內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

本文名稱：JavaScript中詞法作用域與作用域鏈的用法
本文地址：http://muchs.cn/article22/isjecc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁設(shè)計公司、靜態(tài)網(wǎng)站、網(wǎng)站收錄、標(biāo)簽優(yōu)化、網(wǎng)站內(nèi)鏈、移動網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)