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

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

1.变量提升与函数提升

• 1.变量声明提升
  • 通过var定义（声明）的变量，在定义语句之前就可以访问到
  • 值：undefined
• 2.函数声明提升
  • 通过function声明的函数，在之前就可以直接调用
  • 值：函数定义（对象）

var a = 3
function fn () { 
    // var a   var声明的变量 a, 函数一执行就有了，但是没有赋值 
    console.log(a) // 此时 a 声明了但是没有赋值  所以为 undefined
    var a = 4
}
fn()  // undefined

console.log(b)  // 同样，b也为undefined
fn2() // fn2 可调用  函数提升  'fn2'
fn3() // 不能调用  此时为变量提升 fn3 为 undefined, fn3()报错

var b = 3
function fn2() {
    console.log('fn2')
}

// 函数通过变量形式定义的，不具有函数声明提升，而是变量声明提升
var fn3 = function () {
    console.log('fn3')
}

2.执行上下文

• 1.代码分类(位置)
  • 全局代码
  • 函数(局部)代码
• 2.全局执行上下文
  • 在执行全局代码前将 window 确定为全局上下文
  • 对全局数据进行预处理:
    • 1).var 定义的全局变量 ==>undefined，添加为window的属性
    • 2).function声明的全局函数 ==> 赋值(fun),添加为 window的方法
    • 3).this ==> 赋值(window)
  • 开始执行全局代码
• 3.函数执行上下文
  • 在调用函数，准备执行函数体之前，创建对应的函数执行上下文对象(虚拟的，存在于栈中)
  • 对局部数据进行预处理：
    • 1).形参变量 ==> 赋值(实参) ==> 添加为执行上下文的属性
    • 2).arguments ==> 赋值(实参列表)，添加为执行上下文的属性
    • 3).var定义的局部变量 ==> undefined,添加为执行上下文的方法
    • 4).function声明的函数 ==> 赋值(fun),添加为执行上下文的方法
    • 5).this ==> 赋值(调用函数的对象)
  • 开始执行函数体代码

// 全局执行上下文
console.log(a1, window.a1) // undefined undefined
a2()  // a2()
console.log(this)  // window对象

var a1 = 3
function a2() {
    console.log('a2()')
}
console.log(a1)  // 3

// 函数执行上下文
function fn (a1) {
    console.log(a1)    // 传进来的实参  2
    console.log(a2)    // undefined
    a3()   // a3()
    console.log(this)  // window对象
    console.log(arguments); //伪数组(2,3)

    var a2 = 3
    function a3() {
        console.log('a3()')
    }
}
fn(2, 3)

3.执行上下文栈

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

// 全局开始
console.log('gb:' + i)
var i = 1
foo(1)
function foo(i) {
    if (i == 4) {
        return
    }
    console.log('fb:' + i)
    foo(i + 1)  // 递归调用：在函数内部调用自己，先依次压栈，再出栈
    console.log('fe:' + i);
}
// 全局结束
console.log('ge:' + i);

// 输出结果顺序为：
// bg:undefined  fb:1  fb:2  fb:3  fe:3  fe:2  fe:1  ge:1

// 整个过程产生5个执行上下文：
// 1个全局执行上下文，4个函数执行上下文:foo(1),foo(2),foo(3),foo(4),

4.常见面试题

// 1：先执行变量提升，再执行函数提升
console.log(window);
function a() {}
var a
console.log(typeof a)  // 'function'


// 测试题 2：
if (!(b in window)) {
    var b = 1
}
console.log(b)  // undefined