JavaScript基础：函数执行上下文的原理

前言

函数执行上下文就是当前JavaScript代码被解析和执行时所在环境的抽象概念，JavaScript中运行的任何的代码都是在执行上下文中。

1.代码分类

全局函数、函数代码、eval代码

2.全局执行上下文

1. 在执行全局代码前将window确定为全局执行上下文
2. 对全局数据进行预处理
   • var定义的全局变量值为undefined，添加为window的属性
   • function声明的全局函数添加为window的方法
   • this赋值为window
3. 开始执行全局代码

4. 函数执行上下文

1. 在调用函数，准备执行函数体之前，创建对应的函数执行上下文对象（虚拟的，存在于栈中）
2. 对局部数据进行预处理
   • 形参变量赋值为实参，添加为执行上下文的属性
   • arguments赋值为实参列表，添加为执行上下文的属性
   • var定义的局部变量值为undefined，添加为执行上下文的属性
   • function声明的函数添加为执行上下文的方法
   • this赋值为调用函数的对象
3. 开始执行函数体代码

4. 执行流程

1. 在全局代码执行前，JS引擎创建一个栈来存储管理所有的执行上下文对象
2. 在全局执行上下文(window)确定后，将其添加到栈中(压栈)
3. 在函数上下文创建后，将其添加到栈中
4. 在当前函数执行完后，将栈顶的对象移除(出栈)
5. 在所有的代码执行完后，栈中只剩下window

var a = 10; // 1. 进入全局执行上下文
var bar = function(x) {
    var b = 5;
    foo(x + b);	 // 3. 进入foo执行上下文
}
var foo = function(y) {
    var c= 5;
    console.log(a + c + y);
}
bar(10); // 2. 进入bar函数执行上下文