JS 执行上下文与执行上下文栈

JS 执行上下文与执行上下文栈

一、变量提升与函数提升

1. 变量声明提升

• 通过var定义（声明）的变量，在定义语句之前就可以访问到
• 值：undefined；

2. 函数声明提升

• 通过function声明的函数，在之前就可以直接调用
• 值：函数定义（对象）；

var a = 3;
function fn() {
	console.log(a);
	var a = 4;
}
fn();// undefined

console.log(b);// undefined 变量提升
fn2();// fn2() 函数提升
var b = 3;
function fn2(){
	console.log("fn2()");
}

fn3();//不能调用,此时为变量提升
var fn3 = function() {
	console.log("fn3()");
}

二、执行上下文

1.代码分类（位置）

• 全局代码
• 函数（局部）代码

2.全局执行上下文

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

3.函数执行上下文

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

三、执行上下文栈

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

console.log("gb:"+i);
var i = 1;
foo(1);
function foo() {
	if(i == 4) {
		return;
	}
	console.log("fb:"+i);
	foo(i+1);
	console.log("fe:"+i);
}
console.log("ge:"+i);
//gb:undefined; fb:1; fb:2; fb:3; fe:3; fe:2; fe1; ge:1

• 先执行变量提升，再执行函数提升

function a(){};
var a;
console.log(typeof a); // function

if(!(b in window)) {
	var b = 1;
}
console.log(b); // undefined

var c = 1;
function c(c) {
	console.log(c);
};
c(2); // 报错;

//等同于：
var c;
function c(c) {
	console.log(c);
};
c = 1;
c(2); // 报错;