执行上下文和做用域的理解

本文参考引自：深刻理解javascript原型和闭包（完结）
不得不说，这个系列文章是真的给人恍然顿悟的感受，写的很是好，强烈推荐。感谢大佬！

执行上下文

函数每调用一次，都会产生一个新的执行上下文环境。由于不一样的调用可能就有不一样的参数。

function fn(x) {
  console.log(arguments)
  console.log(x)
}
fn(20)
fn(10) // 不一样的调用可能有不一样的参数

执行上下文栈

执行全局代码时，会产生一个执行上下文环境，每次调用函数都又会执行上下文环境。当函数调用完成时，这个上下文环境以及其中的数据都会被消除（固然了闭包并不会乖乖就范），处于活动状态的执行上下文环境只有一个。

// 这是一个压栈出栈的过程--执行上下文栈
1 let a = 10, fn, // 一、进入全局上下文环境
2    bar = function(x) {
3      let b = 5
4      fn(x + b) // 三、进入fn函数上下文环境
5    }
6 fn = function(y) {
7  let c = 5
8  console.log(y + c)
9 }
10
11 bar(10) // 二、进入bar函数上下文环境

（1）执行代码以前，首先建立全局上下文环境。（活动状态）

// 全局上下文环境
a: undefined
fn: undefined
bar: undefined
this: window

而后执行代码，代码到10行以前，上下文环境中的变量都在执行过程当中被赋值。

// 全局上下文环境
a: 10
fn: function
bar: function
this: window

（2）而后执行到11行，调用bar函数。
跳转到bar函数内部，执行函数体语句以前，会建立一个新的执行上下文环境。

// bar执行上下文环境
b: undefined
x: 10
arguments: [10]
this: window

而后将bar执行上下文环境压栈，设置为活动状态（当前惟一）

（3）而后执行到第4行，调用fn函数。
调到fn函数内部，执行函数体语句以前，会建立一个新的执行上下文环境

// fn执行上下文环境
c: undefined
y: 15
arguments: [15]
this: window

而后将fn执行上下文环境压栈，设置为活动状态（当前惟一）

（4）fn执行完毕后，调用fn函数生成的fn上下文环境出栈，被销毁。
而后bar执行完毕后，调用bar函数生成的上下文环境出栈，被销毁。而后剩下全局上下文环境，出栈销毁。

做用域

JS没有块级做用域，除了全局做用域，函数会建立本身的做用域。做用域在函数定义时就已经肯定了，不是在函数调用肯定（区别于执行上下文环境，固然this也是上下文环境里的成分）

// 全局做用域
let x = 100
    // fn做用域
    function fn(x) {
        // bar做用域
        function bar(x) {
          console.log(x)
        }
    }

let f1 = fn(5)
let f2 = fn(10)

f1() // 5
f2() // 10

做用域只是一个“地盘”，其中没有变量。变量是经过做用域对应的执行上下文环境中的变量对象来实现的。因此做用域是静态观念的，而执行上下文环境是动态上的，二者并不同。有闭包存在时，一个做用域存在两个上下文环境也是有的。

同一个做用域下，对同一个函数的不一样的调用会产生不一样的执行上下文环境，继而产生不一样的变量的值，因此，做用域中变量的值是在执行过程当中肯定的，而做用域是在函数建立时就肯定的。

若是要查找一个做用域下某个变量的值，就须要找到这个做用域对应的执行上下文环境，再在其中找到变量的值。

做用域链

函数在定义的时候（不是调用的时候）就已经肯定了函数体内部自由变量的做用域。

自由变量：好比a，是在fn做用域使用，可是并无在fn做用域定义，这就是自由变量。

let a = 100
function fn() {
  let b = 20
  function bar() {
    console.log(a + b) // a是自由变量
  }
  return bar
}

let x = fn(), b = 200
x()

那么自由变量是如何获得的呢？这就引出了做用域链。

bar要取得a的值，就要到建立bar这个函数的做用域中取值（这里是fn做用域），fn做用域也没有a，就到建立fn这个函数的做用域中取值（这里是全局做用域），找到了就结束了。这就是做用域链。