JS 底层探究--上下文

开始接触前端的时候 都是从HTML/CSS/JS 三大基础来的。

HTML: 页面布局

CSS: 样式美化

JS: 实现动态交互

可以实现一些简单的页面和需求。

从来都是需要实现啥？然后搜怎么实现？最后拼凑出一段实现的代码。

但是其中的原理，为啥用这个属性就能达到效果，为啥这里要这么写，从来没有仔细的探究过。

这里我们就抛弃掉工作中的效率为王的准则。来对一些小点进行深挖探究。

一、上下文是啥？

执行上下文 = JavaScript 代码运行时的 "运行环境 + 数据仓库 + 规则手册"

每一个上下文，天生自带 3 个核心内容：

1. 变量环境：存变量、函数、参数
2. 作用域链：能访问哪些外部变量
3. this 指向：this 是谁

二、上下文有哪几种

JS 只有 2 种上下文（必须记住）

1. 全局上下文（整个程序的 "大厅"）

代码一运行就创建

只有 1 个

关闭页面才销毁

放全局变量、全局函数

2. 函数上下文（函数的 "小房间"）

调用函数时才创建

函数执行完立刻销毁

每次调用 = 新建一个房间

放局部变量、参数

一段代码看懂上下文切换

// 1. 进入 【全局上下文】
let a = 1;

function test() {
  // 2. 调用函数 → 进入 【函数上下文】
  let b = 2;
  console.log(a + b);
} // 3. 函数执行完 → 销毁函数上下文

test();
// 4. 回到 【全局上下文】

注意点：

1、全局上下文只有一个，而且JS加载中一直存在

2、函数上下文可以有多个，只有函数被调用才会创建，执行完成进行销毁。