JavaScript高级-执行上下文 | 青训营笔记

78 阅读2分钟

这是我参与「第四届青训营 」笔记创作活动的第1天

执行上下文

全局执行上下文

在执行全局代码前将window确定为全局执行上下文 对全局数据进行预处理

  • var定义的全局变量 ==> undefined,添加为window属性
  • function声明的全局函数 ==> 赋值(fun),添加为window方法
  • this ==> 赋值(window)

开始执行全局代码

函数执行上下文

在调用函数,准备执行函数体之前,创建对应的函数执行上下文

对局部数据进行预处理

  • 形参变量 ==> 赋值(实参) ==> 添加为执行上下文属性
  • arguments ==> 赋值(实参列表) ==> 添加为执行上下文属性
  • var定义的局部变量 ==> undefined,添加为执行上下文属性
  • function声明的函数 ==> 赋值(fun) ==> 添加为执行上下文方法
  • this ==> 赋值(调用函数的对象)

开始执行函数体代码

执行上下文数

  • 调用的函数个数 + 1
  • 多次调用就会有多个执行上下文,不同上下文中的变量互不影响,是独立的

执行上下文栈

解释

  • 在全局代码执行前。JS引擎会创建一个栈来存储管理所有的执行上下文对象

  • 在全局执行上下文(window)确定后,将其添加到栈中(压栈)

  • 在函数执行上下文创建后,将其添加到栈中(压栈)

  • 在当前函数执行完后,将栈顶的对象移除(出栈)

  • 当所有的代码执行完后,栈中只剩下window

image.png

image.png

递归中的执行上下文栈

image.png

image.png

image.png

  • 产生了5个执行上下文

题目

函数提升要比变量提升的优先级要高一些,且不会被变量声明覆盖,但是会被变量赋值之后覆盖。其实就是我的理解是: 变量先作为window对象的属性放入上下文栈中 ,这叫变量优先预处理,而函数的上下文后放入栈中,变量后放入栈中,就是老师说的后提升,但是执行的时候是先执行栈顶的函数。

image.png

image.png

image.png

  • if中的b变量提升,b在window中,b值为undefined,不执行赋值语句

image.png