JavaScript 进阶知识点概述｜ 青训营笔记

第一部分: 垃圾回收

在编程中，垃圾回收是一种自动内存管理机制，它负责检测和清除不再使用的对象，以释放内存资源并提高程序的性能。JavaScript作为一种高级编程语言，也具有自己的垃圾回收机制。

1. 什么是垃圾回收？

垃圾回收是一种内存管理技术，它通过识别不再使用的对象，并自动释放它们所占用的内存空间。这样可以避免内存泄漏和资源浪费的问题。垃圾回收器负责追踪程序中的对象引用，并确定哪些对象是可以安全地释放的。

2. JavaScript 的垃圾回收机制

JavaScript 垃圾回收机制主要依赖于自动垃圾回收器。该回收器周期性地执行垃圾收集过程，即检查不再使用的对象并释放相应的内存。JavaScript 引擎使用以下策略来进行垃圾回收：

• 引用计数：该算法维护对象的引用计数，当引用计数为零时，说明该对象不再被引用，可以被回收。然而，这种算法无法解决循环引用的问题，会导致内存泄漏。
• 标记-清除：该算法通过从根对象开始进行遍历和标记活动对象，然后清除未标记的对象。这个算法能够解决循环引用的问题，但可能会产生内存碎片。
• 标记-整理：该算法是对标记-清除算法的改进，它在清除未标记对象之后，将活动对象紧凑排列，以便更好地利用内存空间。

3. 新生代和老生代的概念

JavaScript 引擎通常将内存分为两个主要区域：新生代(Young Generation)和老生代(Old Generation)。新生代存储了临时对象，而老生代存储了长期存在的对象。

• 新生代：新生代是用于分配新对象的内存空间。它通常较小，并且采用了更频繁的垃圾回收过程。新生代采用了复制算法来进行垃圾回收，即将存活的对象复制到另一个空间，然后清除未被复制的对象。
• 老生代：老生代是用于存储长期存在的对象的内存空间。它通常比新生代大，并且垃圾回收的频率相对较低。老生代采用了标记-清除或标记-整理算法进行垃圾回收。

4. 垃圾回收算法和策略

垃圾回收算法和策略是决定垃圾回收器如何工作的重要因素。不同的 JavaScript 引擎可能采用不同的算法和策略，以适应不同的场景和需求。

• 选择合适的算法：引擎可以选择引用计数、标记-清除或标记-整理算法，或者结合多种算法来进行垃圾回收。选择合适的算法取决于内存管理的需求、效率和性能要求等因素。
• 触发垃圾回收的条件：垃圾回收器在何时触发垃圾回收过程也是需要考虑的。通常，垃圾回收会在内存达到一定阈值时触发，或者在特定的时间间隔内执行。这样可以在不影响程序运行性能的情况下，及时释放不再使用的内存。
• 垃圾回收的性能优化：为了提高垃圾回收的性能，引擎可以采用增量标记、并发标记等技术来减少垃圾回收的停顿时间。这样可以使程序在垃圾回收过程中继续执行，并减少用户的感知延迟。

第二部分: 事件循环

JavaScript 是一门单线程的编程语言，这意味着它一次只能执行一个任务。然而，JavaScript 又经常面临处理异步操作和保持界面响应性的需求。这就引入了事件循环机制，它是 JavaScript 异步编程的核心。

5. 什么是事件循环？

事件循环是 JavaScript 引擎中用于处理异步任务的机制。它负责维护一个任务队列(也称为消息队列)，并按照特定的顺序将任务推入执行栈，以确保任务按序执行。

1. JavaScript 的单线程模型

JavaScript 之所以被称为单线程语言，是因为它只有一个执行线程来处理任务。这意味着 JavaScript 代码是按顺序执行的，一次只能处理一个任务。如果某个任务阻塞了线程，那么后续的任务将被延迟执行，这可能会导致界面不响应或其他不良影响。

6. 宏任务和微任务

事件循环中的任务可以分为两类：宏任务(macrotask)和微任务(microtask)。

• 宏任务：宏任务代表一组独立的、顺序执行的任务。例如，整体的 JavaScript 代码、定时器任务(setTimeout、setInterval)、事件监听器回调函数等都属于宏任务。每次只能执行一个宏任务，执行完一个宏任务后，事件循环才会检查是否有微任务需要执行。
• 微任务：微任务是在宏任务执行完成后立即执行的任务。常见的微任务包括 Promise 的回调函数(then、catch、finally)、MutationObserver 和 process.nextTick 等。微任务的执行顺序优先于下一个宏任务，也就是说，每次只要有微任务存在，就会优先执行微任务。

7. Event Loop 的执行顺序

事件循环的执行顺序可以总结为以下几个步骤：

1. 执行当前的宏任务。
2. 检查并执行所有微任务，直到微任务队列为空。
3. 更新渲染(如果有界面渲染相关)。
4. 从宏任务队列中选择下一个宏任务，回到步骤 1。
5. 重复以上步骤，直到没有任务需要执行。

这个循环过程保证了 JavaScript 的任务按照正确的顺序执行，并且及时响应用户的操作和异步事件。

了解事件循环的工作原理对于编写高效的异步代码至关重要。它帮助开发者理解事件驱动的编程模型，处理异步操作和保持界面的响应性。同时，也需要注意编写高效的代码，避免阻塞事件循环，以提供更好的用户体验。

8. 避免阻塞 GUI 线程的 JavaScript 代码

由于 JavaScript 是单线程的，长时间运行的 JavaScript 代码会阻塞 GUI 线程，导致界面不响应。为了避免这种情况，我们可以采取以下策略：

• 将耗时的任务转移到 Web Workers：Web Workers 是 JavaScript 的多线程解决方案，它可以在后台线程中运行耗时的任务，而不阻塞 GUI 线程。通过将一些计算密集型或大量循环的任务委托给 Web Workers，可以保持界面的流畅性。
• 使用定时器和异步操作：将长时间运行的任务拆分为较小的任务，并使用定时器(setTimeout、setInterval)或异步操作(Promise、async/await)来处理。这样可以让任务在多个事件循环中逐步执行，减少阻塞时间，并让界面能够及时响应用户的操作。
• 使用 requestAnimationFrame：对于需要进行频繁的动画或界面更新的操作，可以使用 requestAnimationFrame 方法。它会在下一次浏览器重绘之前调用回调函数，确保动画的流畅性，并在 GUI 线程空闲时执行。
• 优化代码和算法：审查代码并寻找可以进行优化的地方。使用更高效的算法和数据结构，减少不必要的计算和遍历，可以提升代码的执行速度，减少对事件循环的影响。

通过合理地使用异步编程和避免阻塞 GUI 线程的技巧，我们可以保持 JavaScript 代码的高效性，提供更好的用户体验。在开发过程中，我们应该时刻关注代码的性能和响应性，并注意避免出现长时间的阻塞操作。

第三部分: 变量定义方式: var、const 和 let

在 JavaScript 中，变量定义是我们编写代码时最基本的操作之一。在 ES6(ECMAScript 2015)之前，我们通常使用 var 关键字来声明变量。然而，ES6 引入了两个新的变量声明方式：const 和 let。本文将介绍这三种变量定义方式的特点和用法。

9. var 关键字

在 ES5 及之前的版本中，var 是声明变量最常用的关键字。它有以下特点：

• 变量声明提升：使用 var 声明的变量会被提升到当前作用域的顶部。这意味着我们可以在变量声明之前使用它们，尽管它们的赋值操作在声明之后。
• 函数级作用域：var 声明的变量具有函数级作用域，即在函数内部声明的变量只在该函数内部有效。在函数外部无法访问到 var 声明的变量。
• 可重复声明：使用 var 可以重复声明同一个变量，而不会引发错误。这种特性有时会导致变量的意外覆盖或混淆。
• 没有块级作用域：var 声明的变量在块级作用域(例如 if 语句或 for 循环)内部也可以访问，这可能会导致变量泄漏或意外的值覆盖。

10. const 关键字

const 是 ES6 引入的关键字，用于声明常量。它具有以下特点：

• 块级作用域：与 var 不同，const 具有块级作用域。在块级作用域内部声明的常量只在该块级作用域内有效。
• 不能重新赋值：使用 const 声明的变量必须在声明时进行初始化，并且一旦赋值后就不能再次修改其值。尝试重新赋值会导致错误。
• 对象和数组的特殊行为：使用 const 声明的变量仍然可以修改对象和数组的属性，但不能重新分配新的对象或数组给该变量。也就是说，const 保护的是变量引用的地址，而不是引用的内容。

11. let 关键字

let 是 ES6 引入的关键字，用于声明块级作用域的变量。它具有以下特点：

• 块级作用域：与 const 类似，let 也具有块级作用域。在块级作用域内部声明的变量只在该块级作用域内有效。
• 不存在变量提升：与 var 不同，let 声明的变量不存在变量提升。这意味着使用 let 声明的变量必须在声明之后才能访问，否则会引发 ReferenceError。
• 不能重复声明：与 var 不同，let 不允许在同一作用域内重复声明同一个变量。如果尝试重复声明同一个变量，将会抛出 SyntaxError。
• 更安全的作用域封闭：由于 let 具有块级作用域，使用 let 声明的变量在作用域外部是无法访问的，这提供了更好的封装和安全性。

综上所述，var、const 和 let 是 JavaScript 中常用的变量定义方式，各自具有不同的特点和用途。在实际开发中，我们应根据具体的需求来选择合适的变量定义方式。如果需要声明一个不可修改的常量，可以使用 const。如果需要定义一个块级作用域的变量，可以使用 let。而在某些特定情况下，仍然可以使用 var，但需要注意它的特性和潜在的问题。

第四部分: 异步编程和 Promise

JavaScript 是一门事件驱动的编程语言，经常需要处理异步操作，例如网络请求、文件读写和定时器等。在过去，处理异步任务常常会导致回调地狱，代码难以理解和维护。为了解决这个问题，ES6 引入了 Promise，它是一种优雅的异步编程解决方案。

12. 什么是 Promise？

Promise 是一种用于处理异步操作的对象。它代表了一个尚未完成的操作，可以是异步的或延迟的。Promise 有三种状态：pending(进行中)、fulfilled(已完成)和 rejected(已拒绝)。一旦 Promise 的状态变为 fulfilled 或 rejected，它就变为 settled(已解决)状态，不可再改变。

13. Promise 的基本用法

使用 Promise 可以将异步操作以更加直观和可读的方式表达出来。下面是 Promise 的基本用法：

• 创建 Promise 对象：使用 new 关键字和 Promise 构造函数来创建一个 Promise 对象。构造函数接受一个执行器函数作为参数，该函数包含异步操作的逻辑。
• 异步操作的处理：在执行器函数中，使用 resolve 函数将 Promise 的状态从 pending 变为 fulfilled，并返回操作的结果。使用 reject 函数将 Promise 的状态从 pending 变为 rejected，并返回一个错误对象。
• 处理 Promise 的结果：通过调用 Promise 实例的 then 方法可以处理 Promise 的结果。then 方法接受两个回调函数作为参数，分别对应 Promise 状态变为 fulfilled 和 rejected 的情况。
• 处理 Promise 的错误：通过调用 Promise 实例的 catch 方法可以处理 Promise 的错误。catch 方法接受一个回调函数作为参数，用于捕获并处理 Promise 的 rejected 状态。

14. Promise 的链式调用和解决回调地狱

Promise 的优点之一是它支持链式调用，可以将多个异步操作连接起来，避免了传统回调函数嵌套导致的回调地狱。通过在 then 方法中返回新的 Promise 对象，可以实现连续的异步操作。这种链式调用的方式使代码更加清晰、可读和易于维护。

15. 异步操作的错误处理

在 Promise 中，可以通过在链式调用中使用 catch 方法来捕获和处理异步操作的错误。catch 方法会捕获前面链式调用中任何一个 Promise 对象的 rejected 状态，并执行相应的错误处理逻辑。这使得错误处理变得简洁且集中。

16. Promise 的其他方法和特性

除了 then 和 catch 方法，Promise 还提供了一些其他有用的方法和特性，例如：

• Promise.all: 接受一个 Promise 数组，并在所有 Promise 对象都变为 fulfilled 状态时才返回一个新的 Promise 对象。
• Promise.race: 接受一个 Promise 数组，并返回最先解决(fulfilled 或 rejected)的 Promise 对象的结果。
• Promise.resolve: 将一个值或已解决的 Promise 对象转换为一个新的 Promise 对象。
• Promise.reject: 将一个错误对象或已拒绝的 Promise 对象转换为一个新的 Promise 对象。
• 异步操作的串行和并行处理：通过合理地运用 Promise.all、Promise.race 和异步操作的串行调用，可以实现异步操作的串行和并行处理，满足不同的业务需求。

在 JavaScript 中，使用 Promise 可以以更加优雅和可读的方式处理异步操作。它的链式调用和错误处理机制使代码变得清晰、简洁和易于维护。当需要处理多个异步操作时，Promise.all 和 Promise.race 提供了便捷的方式来处理多个 Promise 对象。