学习笔记：JS高级——执行上下文、执行上下文栈

执行上下文

1. 代码分类

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

2. 全局执行上下文

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

3. 函数执行上下文

   • 在调用函数，准备执行函数体之前，创建对应的函数执行上下文对象
   • 对局部数据进行预处理
     • 形参变量，用调用函数时传入的实参赋值，添加为执行上下文的属性
     • var定义的局部变量，用undefined赋值，并把变量添加为执行上下文的属性
     • function声明的全局函数，执行函数的定义，并把函数添加为执行上下文的方法
     • this，将调用函数的对象赋值给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
    console.log('------------分隔符-----------')
    
    // 函数（局部）执行上下文代码示例
    function fn(a1) {
        console.log(a1) // 2
        console.log(a2) // undefined
        a3()
        console.log(this) // 调用fn函数的对象，此时为window
        console.log(arguments) // 调用函数时传入的实参伪数组，此时为伪数组(2,3)
        
        var a2 = 3
        function a3() {
            console.log('a3()')
        }
        fn(2,3)
    }
    

执行上下文栈

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

                   // 1. 进入全局执行上下文
    var a = 10
    var bar = function (x) {
        var b = 5
        foo(x + b) // 3. 进入foo函数执行上下文
    }
    var foo = function () {
        var c = 5
        console.log(a + c + y) // 本次分析暂不考虑该函数
    }
    bar(10) // 2. 进入bar函数执行上下文