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

22 阅读2分钟

执行上下文

  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

image.png

                   // 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函数执行上下文