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深刻之執行上下文棧》。

原文地址：https://github.com/mqyqingfeng/Blog/issues/3