javascript 执行上下文

执行上下文

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

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

• 执行上下文栈

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

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

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

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

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

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

（2）进入bar函数上下文环境

执行到11行，调用bar函数跳转到bar函数内部，执行函数体语句之前，会创建一个新的执行上下文环境。

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

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

（3）进入fn函数上下文环境

执行到第4行，调用fn函数,执行函数体语句之前，会创建一个新的执行上下文环境

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

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

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

执行上下文环境切换过程

转自：https://segmentfault.com/a/1190000011843356