快捷導(dǎo)航

實例詳解JavaScript靜態(tài)作用域和動態(tài)作用域

更新時間：2021年10月25日 09:54:08 作者：戰(zhàn)場小包

作用域是指程序源代碼中定義變量的區(qū)域,作用域規(guī)定了如何查找變量，也就是確定當(dāng)前執(zhí)行代碼對變量的訪問權(quán)限,這篇文章主要給大家介紹了關(guān)于JavaScript靜態(tài)作用域和動態(tài)作用域的相關(guān)資料,需要的朋友可以參考下

前言

在文章最開始，先學(xué)習(xí)幾個概念：

作用域：《你不知道的js》中指出，作用域是一套規(guī)則，這套規(guī)則用來管理引擎如何在當(dāng)前作用域以及嵌套的子作用域中根據(jù)標(biāo)識符名稱進行變量查找。簡單來說，作用域規(guī)定了如何查找變量。
靜態(tài)作用域：又稱詞法作用域，函數(shù)的作用域在函數(shù)定義的時候就決定了，通俗點說就是你在寫代碼時將變量和塊作用域?qū)懺谀睦餂Q定的。
動態(tài)作用域：函數(shù)的作用域在函數(shù)調(diào)用時才決定的。

靜態(tài)作用域與動態(tài)作用域

JavaScript采用的是靜態(tài)作用域，函數(shù)定義的位置就決定了函數(shù)的作用域。

具體看一個例子，理解一下什么是靜態(tài)作用域與動態(tài)作用域的區(qū)別

var val = 1;
function test() {
    console.log(val);
}
function bar() {
    var val = 2;
    test();
}

bar();
// 結(jié)果是？？？

上面代碼中:

我們首先定義全局變量 val，賦值為 1
聲明一個函數(shù) text，函數(shù)的功能是打印 val 這個變量的值
聲明一個函數(shù) bar，函數(shù)內(nèi)部定義局部變量 val，賦值為 2；并且函數(shù)內(nèi)部執(zhí)行 test() 函數(shù)
執(zhí)行 bar() 函數(shù)

靜態(tài)作用域執(zhí)行過程

當(dāng)執(zhí)行 test 函數(shù)時，先從 test 函數(shù)內(nèi)部查找是否有變量 val，如果沒有，就沿定義函數(shù)的位置，查找上一層的代碼，查找到全局變量 val ，其值為 1。

作用域查找始終從運行時所處的最內(nèi)層作用域開始查找，逐級向外查找，直到遇見第一個匹配的標(biāo)識符為止。

無論函數(shù)在哪里被調(diào)用，無論如何被調(diào)用，它的作用域只由函數(shù)定義所處的位置決定。

動態(tài)作用域執(zhí)行過程

執(zhí)行 test 函數(shù)，首先從函數(shù)內(nèi)部查詢 val 變量，如果沒有，就從調(diào)用函數(shù)的作用域，即 bar 函數(shù)的作用域內(nèi)部查找變量 val，所以打印結(jié)果 2

習(xí)題

我們來看三個習(xí)題，好好消化理解一下靜態(tài)作用域: 函數(shù)定義位置就決定了作用域。

習(xí)題一

var a = 1
function fn1(){
    function fn3(){
        var a = 4
        fn2()
    }
    var a = 2
    return fn3
}
function fn2(){
    console.log(a)
}
var fn = fn1()
fn()

上面代碼中:

我們首先定義全局變量 a，賦值為 1
聲明一個函數(shù) fn1，函數(shù)的內(nèi)部分別聲明了函數(shù) fn3，定義局部變量 a，賦值為 2，返回值為 fn3 函數(shù)
fn3 函數(shù)內(nèi)部定義局部變量 a，賦值為 4，執(zhí)行 fn2()
聲明函數(shù) fn2，函數(shù)的功能是，打印 a 的值
fn 賦值為 fn1() 的返回值
執(zhí)行 fn() (相當(dāng)于執(zhí)行 fn3 函數(shù))

做題之前，一定要理解靜態(tài)作用域的概念。該題 fn2 定義在全局上，當(dāng) fn2 中找不到變量 a 時，它會去全局中尋找，與 fn1 和 fn3 毫無關(guān)系，打印 1.

習(xí)題二

var a = 1
function fn1(){
    function fn2(){
        console.log(a)
    }
    function fn3(){
        var a = 4
        fn2()
    }
    var a = 2
    return fn3
}
var fn = fn1()
fn()

fn2 是定義在函數(shù) fn1 內(nèi)部，因此當(dāng) fn2 內(nèi)部沒有變量 a 時，它會去 fn1 中尋找，跟函數(shù) fn3 毫無關(guān)系，如果 fn1 中尋找不到，會到 fn1 定義的位置的上一層(全局)尋找，直至尋找到第一個匹配的標(biāo)識符。本題可以在 fn1 中找到變量 a，打印 2

習(xí)題三

var a = 1;
function fn1(){
    function fn3(){
        function fn2(){
            console.log(a)
        }
        var a;
        fn2()
        a = 4
    }
    var a = 2
    return fn3
}
var fn = fn1()
fn()

該題 fn2 定義在函數(shù) fn3 中，當(dāng) fn2 中找不到變量 a 時，會首先去 fn3 中查找，如果還查找不到，會到 fn1 中查找。本題可以在 fn3 中找到變量 a，但由于 fn2() 執(zhí)行時，a 未賦值，打印 undefined。