進擊JavaScript之（二）詞法作用域與作用域鏈

denson 發布于2019-08-20 10:21 / 1044人閱讀

摘要：一作用域域表示的就是范圍，即作用域，就是一個名字在什么地方可以使用，什么時候不能使用。概括的說作用域就是一套設計良好的規則來存儲變量，并且之后可以方便地找到這些變量。

一、作用域

域表示的就是范圍，即作用域，就是一個名字在什么地方可以使用，什么時候不能使用。想了解更多關于作用域的問題推薦閱讀《你不知道的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.

推薦閱讀

進擊JavaScript之（一）詞法作用域與作用域鏈

進擊JavaScript之（三）玩轉閉包

進擊JavaScript之（四）原型與原型鏈

GPU云服務器云服務器 javascript作用域鏈作用域鏈 javascript作用 javascript的作用

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/80100.html

進擊JavaScript之（三）玩轉閉包

摘要：為了更好的理解，在閱讀此文之前建議先閱讀上一篇進擊之詞法作用域與作用域鏈什么是閉包閉包的含義就是閉合，包起來，簡單的來說，就是一個具有封閉功能與包裹功能的結構。在中函數構成閉包。為了更好的理解，在閱讀此文之前建議先閱讀上一篇《進擊JavaScript之詞法作用域與作用域鏈》 1.什么是閉包閉包的含義就是閉合，包起來，簡單的來說，就是一個具有封閉功能與包裹功能的結構。所謂的閉包就是...

cyixlq 2019-08-20 10:30 評論0 收藏0
進擊JavaScript之（四）原型與原型鏈

摘要：每一個由構造函數創建的對象都會默認的連接到該神秘對象上。在構造方法中也具有類似的功能，因此也稱其為類實例與對象實例一般是指某一個構造函數創建出來的對象，我們稱為構造函數的實例實例就是對象。表示該原型是與什么構造函數聯系起來的。本文您將看到以下內容：傳統構造函數的問題一些相關概念認識原型構造、原型、實例三角結構圖對象的原型鏈函數的構造函數Function 一句話說明什么...

XBaron 2019-08-20 10:45 評論0 收藏0
進擊JavaScript之（一）變量聲明提升

摘要：如下代碼輸出的結果是代碼執行分為兩個大步預解析的過程代碼的執行過程預解析與變量聲明提升程序在執行過程中，會先將代碼讀取到內存中檢查，會將所有的聲明在此進行標記，所謂的標記就是讓解析器知道有這個名字，后面在使用名字的時候不會出現未定義的錯誤。 showImg(https://segmentfault.com/img/remote/1460000012922850); 如下代碼輸出的結果是...

LeexMuller 2019-08-20 10:13 評論0 收藏0
你不知道的JavaScript上卷之作用域與閉包·讀書筆記

摘要：的分句會創建一個塊作用域，其聲明的變量僅在中有效。而閉包的神奇作用是阻止此事發生。依然持有對該作用域的引用，而這個引用就叫做閉包。當然，無論使用何種方式對函數類型的值進行傳遞，當函數在別處被調用時都可以觀察到閉包。 date: 16.12.8 Thursday 第一章作用域是什么 LHS：賦值操作的目標是誰？比如： a = 2; RHS：誰是賦值操作的源頭？比如： conso...

Raaabbit 2019-08-21 15:12 評論0 收藏0
Javascript重溫OOP之作用域與閉包

摘要：的變量作用域是基于其特有的作用域鏈的。需要注意的是，用創建的函數，其作用域指向全局作用域。所以，有另一種說法認為閉包是由函數和與其相關的引用環境組合而成的實體。作用域定義在編程語言中，作用域控制著變量與參數的可見性及生命周期，它能減少名稱沖突，而且提供了自動內存管理 --javascript 語言精粹我理解的是，一個變量、函數或者成員可以在代碼中訪問到的范圍。 js的變量作...

JessYanCoding 2019-08-21 10:56 評論0 收藏0