JS - 作用域和执行上下文的区别_js执行上下文和作用域的区别-CSDN博客

本文链接：https://blog.csdn.net/kelly0721/article/details/127026923

一、作用域

作用域

词法作用域：是在写代码或者定义的时候确定的，关注函数在何处声明
动态作用域：是在运行时确定的（this也是），关注函数从何处调用

JavaScript 采用词法作用域，其作用域由你在写代码是将变量和块作用域写在哪里决定，因此当词法分析器处理代码时会保持作用域不变。可以理解为作用域就是一个独立的地盘，让变量不会外泄、暴露出去。也就是说作用域最大的用处就是隔离变量，不同作用域下同名变量不会有冲突。

作用域链

作用域链定义了当变量在当前上下文访问不到的时候如何沿作用域链继续查询的一套规则。

作用

作用域: 隔离变量, 可以在不同作用域定义同名的变量不冲突
作用域链: 查找变量

二、执行上下文

由js引擎自动创建的对象, 包含对应作用域中的所有变量属性

执行上下文是指函数调用时在执行栈中产生的变量对象，这个变量对象我们无法直接访问，但是可以访问其中的变量、this对象等。

包含三个部分

变量对象(VO)
作用域链(词法作用域)
this指向

类型

全局执行上下文
函数执行上下文
eval执行上下文

生命周期

执行上下文的生命周期包括三个阶段：创建阶段→执行阶段→回收阶段，我们重点介绍创建阶段。

全局 : 准备执行全局代码前产生, 当页面刷新/关闭页面时死亡
函数 : 调用函数时产生, 函数执行完时死亡

执行上下文创建和初始化的过程

全局执行上下文

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

函数执行上下文

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

执行上下文栈

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

代码执行过程

创建全局上下文 (global EC)
全局执行上下文 (caller) 逐行自上而下执行。遇到函数时，函数执行上下文 (callee) 被push到执行栈顶层
函数执行上下文被激活，成为 active EC, 开始执行函数中的代码，caller 被挂起
函数执行完后，callee 被pop移除出执行栈，控制权交还全局上下文 (caller)，继续执行

let fn, bar; // 1、进入全局上下文环境
bar = function(x) {
  let b = 5;
  fn(x + b); // 3、进入fn函数上下文环境
};
fn = function(y) {
  let c = 5;
  console.log(y + c); //4、fn出栈，bar出栈
};
bar(10); // 2、进入bar函数上下文环境

每次函数调用时，执行栈栈顶都会产生一个新的执行上下文环境，JavaScript引擎会以栈的方式来处理它们，这个栈，我们称其为函数调用栈(call stack)。栈底永远都是全局上下文，而栈顶就是当前处于活动状态的正在执行的上下文，也称为活动对象（running execution context，图中蓝色的块），区别与底下被挂起的变量对象（执行上下文）。