JavaScript执行上下文与执行上下文栈(JavaScript的预处理机制)

柔情只为你懂 2023-10-08 12:49 12阅读 0赞

一、变量声明提升与函数声明提升

1.  变量声明提升

*  通过var定义(声明)的变量, 在定义语句之前就可以访问到
 *  值: undefined

1.  函数声明提升

*  通过function声明的函数, 在之前就可以直接调用
 *  值: 函数定义(对象)
 *  实例：

二、执行上下文（执行顺序）

1.  代码分类(位置)

*  全局代码
 *  函数代码

1.  全局执行上下文

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

1.  函数执行上下文

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

三、执行上下文栈

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

实例2：  
递归调用体现执行上下文的栈

/*
    1. 依次输出什么?
        global begin: undefined
        foo() begin: 1
        foo() begin: 2
        foo() begin: 3
        foo() end: 3
        foo() end: 2
        foo() end: 1
        global end: 1
    2. 整个过程中产生了几个执行上下文?
        5个
    */
    <script type="text/javascript">
      console.log('global begin: '+ i);
      var i = 1;
      foo(1);
      function foo(i){
        
        if (i == 4) {
        
          return ;
        }
        console.log('foo() begin: '+ i);
        foo(i + 1);
        console.log('foo() end: '+ i);
      }
      console.log('global end: '+ i);
    </script>

四、小测试

希望本文对你有所帮助，加油！

注：本文为作者学习JS高级时，参考B站尚硅谷教程所做，如有疑问可参考视频教程（https://www.bilibili.com/video/BV14s411E7qf?p=22），同时如果你也是初学者欢迎添加我的QQ(Etui:3416252112)，可互相学习讨论！