JavaScript深入之詞法作用域和動態作用域

gclove 發布于2019-08-20 15:37 / 1894人閱讀

摘要：作用域作用域是指程序源代碼中定義變量的區域。采用詞法作用域，也就是靜態作用域。而與詞法作用域相對的是動態作用域，函數的作用域是在函數調用的時候才決定的。前面我們已經說了，采用的是靜態作用域，所以這個例子的結果是。

JavaScript深入系列的第二篇，JavaScript采用詞法作用域，什么語言采用了動態作用域？兩者的區別又是什么？還有一個略難的思考題，快來看看吧。

作用域

作用域是指程序源代碼中定義變量的區域。

作用域規定了如何查找變量，也就是確定當前執行代碼對變量的訪問權限。

JavaScript 采用詞法作用域(lexical scoping)，也就是靜態作用域。

靜態作用域與動態作用域

因為 JavaScript 采用的是詞法作用域，函數的作用域在函數定義的時候就決定了。

而與詞法作用域相對的是動態作用域，函數的作用域是在函數調用的時候才決定的。

讓我們認真看個例子就能明白之間的區別：

var value = 1;

function foo() {
    console.log(value);
}

function bar() {
    var value = 2;
    foo();
}

bar();

// 結果是 ???

假設JavaScript采用靜態作用域，讓我們分析下執行過程：

執行 foo 函數，先從 foo 函數內部查找是否有局部變量 value，如果沒有，就根據書寫的位置，查找上面一層的代碼，也就是 value 等于 1，所以結果會打印 1。

假設JavaScript采用動態作用域，讓我們分析下執行過程：

執行 foo 函數，依然是從 foo 函數內部查找是否有局部變量 value。如果沒有，就從調用函數的作用域，也就是 bar 函數內部查找 value 變量，所以結果會打印 2。

前面我們已經說了，JavaScript采用的是靜態作用域，所以這個例子的結果是 1。

動態作用域

也許你會好奇什么語言是動態作用域？

bash 就是動態作用域，不信的話，把下面的腳本存成例如 scope.bash，然后進入相應的目錄，用命令行執行 bash ./scope.bash，看看打印的值是多少。

value=1
function foo () {
    echo $value;
}
function bar () {
    local value=2;
    foo;
}
bar

這個文件也可以在github博客倉庫中找到。

思考題

最后，讓我們看一個《JavaScript權威指南》中的例子：

var scope = "global scope";
function checkscope(){
    var scope = "local scope";
    function f(){
        return scope;
    }
    return f();
}
checkscope();

var scope = "global scope";
function checkscope(){
    var scope = "local scope";
    function f(){
        return scope;
    }
    return f;
}
checkscope()();

猜猜兩段代碼各自的執行結果是多少？

這里直接告訴大家結果，兩段代碼都會打印：local scope。

原因也很簡單，因為JavaScript采用的是詞法作用域，函數的作用域基于函數創建的位置。

而引用《JavaScript權威指南》的回答就是：

JavaScript 函數的執行用到了作用域鏈，這個作用域鏈是在函數定義的時候創建的。嵌套的函數 f() 定義在這個作用域鏈里，其中的變量 scope 一定是局部變量，不管何時何地執行函數 f()，這種綁定在執行 f() 時依然有效。

但是在這里真正想讓大家思考的是：

雖然兩段代碼執行的結果一樣，但是兩段代碼究竟有哪些不同呢？

如果要回答這個問題，就要牽涉到很多的內容，詞法作用域只是其中的一小部分，讓我們期待下一篇文章————《JavaScript深入之執行上下文棧》。

下一篇文章

JavaScript深入之執行上下文棧

深入系列

JavaScript深入系列目錄地址：https://github.com/mqyqingfeng/Blog。

JavaScript深入系列預計寫十五篇左右，旨在幫大家捋順JavaScript底層知識，重點講解如原型、作用域、執行上下文、變量對象、this、閉包、按值傳遞、call、apply、bind、new、繼承等難點概念。

如果有錯誤或者不嚴謹的地方，請務必給予指正，十分感謝。如果喜歡或者有所啟發，歡迎star，對作者也是一種鼓勵。

GPU云服務器云服務器 js作用域和上下文 javascript作用域鏈作用域中作用域

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

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

深入學習js之——詞法作用域和動態作用域

摘要：在中的應用采用詞法作用域，也就是靜態作用域。那什么又是詞法作用域或者靜態作用域呢請繼續往下看靜態作用域與動態作用域因為采用的是詞法作用域函數的作用域在函數定義的時候就決定了。開篇當我們在開始學習任何一門語言的時候，都會接觸到變量的概念，變量的出現其實是為了解決一個問題，為的是存儲某些值，進而，存儲某些值的目的是為了在之后對這個值進行訪問或者修改，正是這種存儲和訪問變量的能力將狀態給...

shiweifu 2019-08-23 15:06 評論0 收藏0
JavaScript深入之作用域鏈

摘要：下面，讓我們以一個函數的創建和激活兩個時期來講解作用域鏈是如何創建和變化的。這時候執行上下文的作用域鏈，我們命名為至此，作用域鏈創建完畢。 JavaScript深入系列第五篇，講述作用鏈的創建過程，最后結合著變量對象，執行上下文棧，讓我們一起捋一捋函數創建和執行的過程中到底發生了什么？前言在《JavaScript深入之執行上下文棧》中講到，當JavaScript代碼執行一段可執行代...

waltr 2019-08-20 15:42 評論0 收藏0
深入學習js之——作用域鏈

摘要：開篇作用域是每種計算機語言最重要的基礎之一，因此要想深入的學習作用域和作用域鏈就是個繞不開的話題。這樣由多個執行上下文的變量對象構成的鏈表就叫做作用域鏈。這時候執行上下文的作用域鏈，我們命名為至此，作用域鏈創建完畢。開篇作用域是每種計算機語言最重要的基礎之一，因此要想深入的學習JavaScript,作用域和作用域鏈就是個繞不開的話題。在《深入學習js之—-執行上下文棧》中我們提到...

lemanli 2019-08-23 15:26 評論0 收藏0
【前端工程師手冊】JavaScript之作用域

摘要：函數作用域和塊作用域前面講了是詞法作用域，那么什么時候會創建作用域呢主要是基于函數級別的作用域，也就是每一個函數都會創建一個作用域。函數會被當作函數表達式而不是一個標準的函數聲明來處理。什么是作用域來一段《你不知道的JavaScript-上卷》中的原話：幾乎所有編程語言最基本的功能之一，就是能夠儲存變量當中的值，并且能在之后對這個值進行訪問或修改，這些變量住在哪里?換句話說，它...

Paul_King 2019-08-22 17:06 評論0 收藏0
JavaScript深入之執行上下文

摘要：深入系列第七篇，結合之前所講的四篇文章，以權威指南的為例，具體講解當函數執行的時候，執行上下文棧變量對象作用域鏈是如何變化的。前言在深入之執行上下文棧中講到，當代碼執行一段可執行代碼時，會創建對應的執行上下文。 JavaScript深入系列第七篇，結合之前所講的四篇文章，以權威指南的demo為例，具體講解當函數執行的時候，執行上下文棧、變量對象、作用域鏈是如何變化的。前言在《Jav...

gougoujiang 2019-08-20 15:46 評論0 收藏0