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