js函数作用域链

作用域链

1.什么是自由变量

首先认识一下什么叫做 自由变量 。如下代码中，console.log(a)要得到 a 变量，但是在当前的作用域中没有定义 a（可对比一下 b）。当前作用域没有定义的变量，这成为 自由变量 。自由变量的值如何得到 —— 向父级作用域寻找（注意：这种说法并不严谨，下文会重点解释）。

var a = 100;
function fn() {
 var b = 200;
 console.log(a); // 这里的a在这里就是一个自由变量
 console.log(b);
}
fn();

2. 什么是作用域链

如果父级也没呢？再一层一层向上寻找，直到找到全局作用域还是没找到，就宣布放弃。这种一层一层的关系，就是 作用域链 。

var a = 100;
function F1() {
 var b = 200;
 function F2() {
 var c = 300;
 console.log(a); // 自由变量，顺作用域链向父作用域找
 console.log(b); // 自由变量，顺作用域链向父作用域找
 console.log(c); // 本作用域的变量
   }
 F2();
}
F1();

3. 关于自由变量的取值

关于自由变量的值，上文提到要到父作用域中取，其实有时候这种解释会产生歧义。

var x = 10;
function fn() {
 console.log(x);
}
function show(f) {
 var x = 20(function() {
 f(); //10，而不是20
 })();
}
show(fn);

在 fn 函数中，取自由变量 x 的值时，要到哪个作用域中取？——要到创建 fn 函数的那个作用域中取，无论 fn 函数将在哪里调用。

所以，不要在用以上说法了。相比而言，用这句话描述会更加贴切:要到创建这个函数的那个域”。
作用域中取值,这里强调的是“创建”，而不是“调用”，切记切记——其实这就是所谓的”静态作用域”。

var a = 10;
function fn() {
 var b = 20;
 function bar() {
 console.log(a + b); //30
 }
 return bar;
}
var x = fn(),
 b = 200;
x(); //bar()

fn()返回的是 bar 函数，赋值给 x。执行 x()，即执行 bar 函数代码。取 b 的值时，直接在 fn 作用域取出。取 a 的值时，试图在 fn 作用域取，但是取不到，只能转向创建 fn 的那个作用域中去查找，结果找到了,所以最后的结果是30。