JS高级（6）—— 执行上下文与执行上下文栈

Myth丶恋晨 2022-12-22 14:29 182阅读 0赞

#### 一、变量提升和函数提升 ####

1.  变量声明提升

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

1.  函数声明提升

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

//面试题 : 输出 undefined
      var a = 3
      function fn () { 
        console.log(a)
        var a = 4
      }
      fn()

![在这里插入图片描述][20201120173334286.png_pic_center]

console.log(b) //undefined 变量提升
    fn2() //可调用 函数提升
    fn3() //不能 变量提升
    
    var b = 3
    function fn2() { 
    	console.log('fn2()')
    }
    
    var fn3 = function () { 
    	console.log('fn3()')
    }

![在这里插入图片描述][20201120173630601.png_pic_center]

#### 二、执行上下文 ####

1.  代码分类(根据位置分)

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

1.  全局执行上下文

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

console.log(a1, window.a1);
    window.a2();
    console.log(this);
    
    var a1 = 3;
    function a2() { 
    	console.log('a2()')
    }
    console.log(a1)

![在这里插入图片描述][20201120200311167.png_pic_center]

1.  函数执行上下文

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

function fn(a1) { 
      console.log(a1);  //2
      console.log(a2);  //undefined
      a3();  //a3()
      console.log(arguments);  //伪数组(2,3)
      console.log(this);  //window
    
      var a2 = 3;
      function a3 () { 
        console.log('a3()');
      }
    }
    fn(2,3)

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center]

#### 三、执行上下文栈 ####

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 (y) { 
      var c = 5;
      console.log(a + c + y)
    };
    bar(10)                       //2. 进入bar函数执行上下文

![在这里插入图片描述][20201120203350224.png_pic_center]  
6. 例题：

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)

问：

*  依次输出什么?

> **gb: undefined  
> fb: 1  
> fb: 2  
> fb: 3  
> fe: 3  
> fe: 2  
> fe: 1  
> ge: 1**

*  整个过程中产生了几个执行上下文?

> **5次**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center 1]

#### 四、面试题 ####

先执行变量提升, 再执行函数提升。

##### 1. 测试题1: #####

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

##### 2. 测试题2： #####

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

##### 3. 测试题3： #####

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

[20201120173334286.png_pic_center]: /images/20221120/68b0ac4fc83d43d7a661c910bae68b5d.png
[20201120173630601.png_pic_center]: https://img-blog.csdnimg.cn/20201120173630601.png#pic_center
[20201120200311167.png_pic_center]: https://img-blog.csdnimg.cn/20201120200311167.png#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20201120201422525.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky,size_16,color_FFFFFF,t_70#pic_center
[20201120203350224.png_pic_center]: https://img-blog.csdnimg.cn/20201120203350224.png#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/202011202049528.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky,size_16,color_FFFFFF,t_70#pic_center