JavaScript作用域和作用域链

作用域(Scope)

1.什么是作用域

作用域就是变量与函数的可访问范围，换句话说，作用域决定了代码区块中变量和其他资源的可见性。
在JavaScript中，变量的作用域有全局作用域和局部作用域两种。

2.全局作用域

一般情况下，window对象的内置属性都拥有全局作用域，例如window.name、window.location、window.top等等。
我们先来看个例子：

var a="hello";
function fun(){  //顶层函数
    console.log(a);
}
fun(); //输出 hello

上面的例子中，对于顶层函数来说，函数外部声明的变量就是全局变量（global variable），它可以在函数内部读取。全局变量所在的作用域就是全局作用域

function fun() { 
  a = "demo"; 
  var b = "demo2"; 
} 
fun()
console.log(a); //输出 demo 
console.log(b); //报错 b is not defined

上面例子中，未定义直接赋值的变量，自动声明为拥有全局作用域。

全局作用域有个弊端：如果我们写了很多行 JS 代码，变量定义都没有用函数包括，那么它们就全部都在全局作用域中。这样就会污染全局命名空间，容易引起命名冲突。

2.局部作用域

function fun(){
    var b="word";
    function fun2(){
        console.log(b);
    }
    fun2();
}
fun()  // 输出 word
fun2() //报错 fun2 is not defined
console.log(b); //报错  b is not defined

上面的例子中，在函数内部定义的变量，外部无法读取，称为局部变量（local variable）。局部变量所在的作用域就是局部作用域

至于为何执行fun()会输出word，是由于自由变量和作用域链的原因，下面会有讲解*

在函数内部定义的变量，会在该作用域内覆盖同名全局变量。例子如下：

var a = 1;
function fun(){
  var a = 2;
  console.log(a);
}

fun() // 输出 2
console.log(a); // 输出 1

作用域是分层的，内层作用域可以访问外层作用域的变量，反之则不行。

3.块级作用域

ES6 中开始加入了块级作用域，可通过新增命令let和const来体现，如下：

if (true) { 
  let name = 'zhangsan' 
} 
console.log(name) // 报错，因为let定义的name是在if这个块级作用域 

值得注意的是：块语句（大括号“｛｝”中间的语句），如 if 和 switch 条件语句或 for 和 while 循环语句，不像函数，它们不会创建一个新的作用域。在块语句中定义的变量将保留在它们已经存在的作用域中。
例如：

if (true) { 
  // 'if' 条件语句块不会创建一个新的作用域 
  var name = 'Hammad'; // name 依然在全局作用域中 
} 
console.log(name); // 输出 Hammad

作用域链(Scope Chain)

1.什么是作用域链

要想了解作用域链，我们得先认识自由变量

什么是自由变量
如下代码中，console.log(a)要得到a变量，但是在当前的作用域中没有定义a（可对比变量b）。当前作用域没有定义的变量，这成为自由变量。
自由变量的值如何得到 —— 向上层作用域去寻找，上层作用域即其声明时所在的作用域

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

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

var a = 1
function f1() { 
  var b = 2
  function f2() { 
      var c = 3
      console.log(a) // a是自由变量，顺作用域链向上层作用域查找 
      console.log(b) // b是自由变量，顺作用域链向上层作用域查找 
      console.log(c) // c是本身作用域的变量 
  } 
  f2() 
} 
f1() 

2.自由变量的取值

关于自由变量的值，前面提到要到上层作用域中查找，描述的更清晰点就是，当前所在作用域声明时所在的作用域。例如：

var x = 10 
function fn() { 
console.log(x)   // x是自由变量，当前所在作用域为fn()函数
}               //fn()声明时所在作用域是和 var x = 10 在同一作用域下，而不是在show()函数中

function show() { 
  var x = 20 
  fn()    
} 
show() // 所以输出 10

所以，要到创建这个函数的那个作用域中取值，这里强调的是“创建”，而不是“调用”。