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

偏执的太偏执、 2022-05-19 07:29 181阅读 0赞

# JavaScript执行上下文与执行上下文栈 #

## 变量提升与函数提升 ##

#### 1、变量声明提升 ####

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

#### 2、函数声明提升 ####

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

var a = 4
      function fn () { 
        console.log(a)   
        var a = 5
      }
      fn() //undefined
      /*变量提升*/
      console.log(a1) //可以访问, 但值是undefined
      /*函数提升*/
      a2() // 可以直接调用
      var a1 = 3
      function a2() { 
        console.log('a2()') //'a2()'
      }

## 执行上下文 ##

#### 1、代码分类（位置） ####

1）全局代码  
2）函数代码

#### 2、全局执行上下文 ####

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

#### 3、函数执行上下文 ####

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

## 执行上下文栈 ##

1、在全局代码执行前，JS引擎就会创建一个栈来存储管理所有的执行上下文对象  
2、在全局执行上下文（window）确定后，将其添加到栈中（压栈）  
3、在函数执行上下文创建后，降温i添加到栈中（压栈）  
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函数执行上下文