看完标题的时候，可以先在头脑里想一下...
函数的执行上下文(execution context)是什么，函数的调用栈（Stack）是怎样的？
如果你能对上面两个概念有一个大概的认识，那么接下来去思考：
为什么有一些变量或是函数能够在它被声明之前去使用？
当我们去call一个function的时候，到底进行的是一个怎样的步骤？
总结性地讲，context这个东西，无外乎三种：
- global code (浏览器里的window环境，或是node里的global环境； 也就是代码执行的默认环境)
- function code（函数体内的环境）
- eval code（eval语句当中的环境）
而Stack是什么样的呢，为什么要有stack呢？
我们知道，JS是单线程的，同步执行的，这意味着什么——一次只能做一件事。
所以当一段代码既包含global环境又包含function环境的时候，就比如说从global走到了functionA中，从functionA又走到了functionB的时候，context是发生了变化的。所以呢？作用域不同了，一个个变量的访问权限也就不一样。
所以在执行代码的过程中，需要用到栈来记录你所经历过的一个个执行环境。global永远被压在最下面，往上一层是functionA的context，再往上是functionB，一直到当前，所以最上面的永远是当前的执行环境。
Execution Stack.png
那么总结下来关于执行上下文需要知道的几个知识点是：
- JS单线程
- 同步执行
- 一个global环境
- N个function / eval 环境
- 每个function都是一个新的环境，哪怕是自身的递归调用。
仅仅知道有栈这个东西是不够的，每个上下文的调用情况还需要再深究一下。
进入一个上下文的时候都会发生什么？
In detail，发生了两个阶段的事：
这两个阶段分别叫做Creation Stage和Activation / Code Execution Stage，理解为创建阶段和激活/执行阶段。
创建阶段
- 创建scope-chain（作用域链）
- 创建variables，functions 和 arguments
- 决定this
创建之后的结果，概念上就是一个包含以上三个属性的对象：
executionContextObj = {
'scopeChain': { /* variableObject + all parent execution context's variableObject */ },
'variableObject': { /* function arguments / parameters, inner variable and function declarations */ },
'this': {}
}
激活/执行阶段
line by line地，赋值、函数引用、解释并执行代码
以上两个阶段进行起来是有它一定规则的，整体地、规定性地去梳理函数执行的整个过程就是：
- 执行到一个函数的调用时，首先找这个函数的代码在哪儿（find code）
- 创建这个函数的上下文（create the execution context）
- 进入创建阶段（Enter the creation stage）
- 初始化scope-chain
- 创建variable object，严格按照下面的步骤
- create arguments，检查arguments的上下文，并初始化arguments的name 和 value，并且create一份引用拷贝
- scan上下文，处理函数声明
- 对于每一个function，在variable object创建一个以这个function的name为name的属性，并添加它的引用。
- 如果这个函数名已经存在（之前赋值过），则重新赋值它的引用。
- scan上下文，处理变量的声明
- 对于每一个变量，在variable object创建一个属性，初始值为undefined
- 如果一个变量已经存在过，则不做任何事并继续下一条语句
- 进入激活执行阶段
- 在代码逐行执行时给变量赋值
用一段代码来梳理一下上面所说的过程：
(function() {
console.log(typeof foo); // function pointer
console.log(typeof bar); // undefined
var foo = 'hello',
bar = function() {
return 'world';
};
function foo() {
return 'hello';
}
}());
create阶段：
- 处理声明。声明中的foo被赋值为pointer。
- 处理表达式。表达式中的foo发现foo已经被赋值过，不做处理；表达时中的bar被赋值为undefined。
这个create的过程其实也就是变量提升（Hoisting）的过程
active阶段：
也就是执行阶段，前两句console，打印出来的正好是create阶段的状态。
然而在给foo和bar重新赋值之后，打印出来的就是另外两个结果，因为执行阶段被重新赋值，所以这样的结果并不难理解。
网友评论