寂的博客
| 文章 标签 分类 关于
寂的博客

目录

从栈到堆，什么是 JavaScript?

寂  收录于 Coding
   约 2454 字   预计阅读 5 分钟    次阅读  

JavaScript 是一种功能强大且灵活的编程语言，广泛应用于网页开发、服务器端开发等领域。要深入理解 JavaScript，我们可以从变量在计算机中的数据存储开始，逐步探讨其运行机制、最新语法以及设计理念。以下是对这些方面的逐层剖析。

从栈到堆 — JavaScript 在计算机中的数据存储

JavaScript 是一种高级编程语言，其代码最终由 JavaScript 引擎（如V8、SpiderMonkey）执行。在计算机内存中，JavaScript 的数据存储主要涉及栈（Stack）和堆（Heap）两种结构：

1.栈（Stack）

  • 用途：栈是一个后进先出（LIFO）的内存结构，用于存储基本数据类型（Primitive Types）和函数调用上下文。

  • 存储内容：包括 undefined、null、boolean、number、string、symbol（ES6新增）和bigint（ES2020新增）。这些数据大小固定且较小，直接存储在栈中。

  • 特点：栈内存分配是静态的，访问速度快。例如：

1
2

let a = 10; // 数字 10 直接存储在栈中
let b = "hello"; // 字符串 "hello" 的引用在栈中，实际内容在堆中（见下文）
  • 函数调用：每次函数调用时，会在栈中创建一个新的调用帧（Call Frame），包含局部变量和返回地址。函数执行完毕后，该帧被弹出，释放内存。

2.堆（Heap）

  • 用途：堆是一个动态分配的内存区域，用于存储引用数据类型（Reference Types），如对象（Object）、数组（Array）、函数等。

  • 存储内容：这些数据大小不固定，存储在堆中，而栈中仅保存指向堆内存的引用。例如：

1
2

let obj = { name: "Alice" }; // obj 是栈中的引用，{ name: "Alice" } 存储在堆中
let arr = [1, 2, 3]; // arr 是栈中的引用，[1, 2, 3] 存储在堆中
  • 特点：堆内存由垃圾回收机制（如标记-清除算法）管理，当对象不再被引用时，内存会被自动回收。

3.栈与堆的交互

当你将一个对象赋值给另一个变量时，复制的是栈中的引用，而不是堆中的数据：

1
2
3
4

let obj1 = { value: 1 };
let obj2 = obj1; // obj2 复制的是引用，指向同一个堆内存地址
obj2.value = 2;
console.log(obj1.value); // 输出 2

JavaScript 的运行机制 — 从内存到执行

JavaScript 是单线程语言，依赖 事件循环（Event Loop） 处理异步操作。其运行机制可以分解为以下几个核心部分：

1.执行上下文（Execution Context）

  • 每段代码运行时，会创建一个执行上下文，分为全局上下文和函数上下文。

  • 执行上下文包含三部分：

    • 变量对象（Variable Object）：存储变量和函数声明。

    • 作用域链（Scope Chain）：决定变量访问权限。

    • this 指向：当前执行环境的对象。

2.调用栈（Call Stack）

JavaScript 使用调用栈追踪函数执行。例如：

1
2
3
4
5
6
7

function foo() {
  console.log("foo");
}
function bar() {
  foo();
}
bar(); // 调用栈：bar -> foo -> 弹出 foo -> 弹出 bar

3.事件循环与异步

  • JavaScript 通过**任务队列（Task Queue）和微任务队列（Microtask Queue）**处理异步操作（如 setTimeout、Promise）。

  • 例子：

1
2
3
4
5

console.log("Start");
setTimeout(() => console.log("Timeout"), 0);
Promise.resolve().then(() => console.log("Promise"));
console.log("End");
// 输出顺序：Start -> End -> Promise -> Timeout

  • setTimeout 被放入任务队列，Promise.then 被放入微任务队列。

  • 事件循环优先执行微任务，再处理任务队列。

4.引擎优化

  • 现代 JavaScript 引擎（如 V8）使用即时编译（JIT），将代码编译为机器码，并通过内联缓存（inline caching）和隐藏类（hidden class）优化对象访问性能。

最新语法 — JavaScript 的语法演进

JavaScript 的语法通过 ECMAScript（ES） 标准不断更新，目前最新广泛支持的是 ES2023（截至 2025 年 3 月，可能有 ES2024）。以下是一些关键特性：

1.ES6（2015）奠基

  • let 和 const：块级作用域取代 var。

  • 箭头函数：简洁语法，绑定 this。

  • 模板字面量：Hello, ${name}。

  • 解构赋值：let [a, b] = [1, 2];。

2.后续版本亮点

  • ES2020：BigInt（123n）、可选链（obj?.prop）、空值合并（??）。

  • ES2021：Promise.any、String.replaceAll。

  • ES2022：深拷贝方法 structuredClone。

  • ES2023：数组方法如 findLast 和 findLastIndex。

3.模块化

  • 从 CommonJS（require）到 ES Modules（import/export），支持树摇（Tree Shaking）优化。

4.异步编程

从回调函数到 Promise，再到 async/await，极大简化异步代码：

1
2
3
4

async function fetchData() {
  let data = await fetch("url");
  return data.json();
}

JavaScript 为什么这么设计？

JavaScript 的设计源于其历史背景和目标，以下是几个关键原因：

1.最初目标：简单嵌入网页

1995 年，Brendan Eich 在 10 天内为 Netscape 浏览器开发 JavaScript，目标是让网页动态化。它受限于浏览器环境，必须轻量、易用，因此选择了动态类型和解释执行。

2.单线程与事件循环

为避免复杂的线程同步问题（如 DOM 操作的竞争），JavaScript 采用单线程模型。通过事件循环处理异步任务，既简化开发，又适应浏览器交互需求。

3.原型继承

与基于类的语言（如 Java）不同，JavaScript 使用原型链实现继承（如 Object.create）。这设计更灵活，但也带来复杂性（如 this 的动态绑定）。

4.动态类型

JavaScript 是弱类型语言（1 + "2" = "12"），方便快速开发，但也易出错。设计初衷是降低学习门槛，吸引非专业开发者。

5.向后兼容性

为保证旧代码可用，JavaScript 保留了许多“历史包袱”，如 var 的变量提升、== 的宽松比较。这种设计限制了彻底重构，但确保了生态稳定性。

6.生态驱动演进

JavaScript 的发展由 TC39（ECMAScript 委员会）管理，社区需求推动语法更新。例如，async/await 源于异步编程的痛点，class 则是对开发者熟悉语法的妥协。

总结

从栈到堆，JavaScript 的数据存储体现了内存管理的效率与灵活性；其运行机制通过单线程和事件循环平衡了简单性与异步能力；语法演进（如 ES6 及之后）不断提升开发体验；设计理念则根植于历史、实用性和生态需求。JavaScript 的成功在于它既简单易上手，又能通过引擎优化和社区扩展满足复杂场景。

参阅资料

更新于 2025-03-21
阅读原始文档
 JavaScript
返回 | 主页