程序世界的建筑艺术：剖析JS中的堆栈、拷贝、任务和原型链

2024-01-21 02:11:20

在计算机的世界里，Javascript（JS）是一种独特的编程语言，它不仅是网页开发的利器，在手机应用程序、桌面程序和游戏开发中也发挥着重要的作用。要真正掌握JS，就必须了解它的底层机制，其中包括堆栈、深浅拷贝、宏任务和微任务，以及原型链。

堆栈与数据流动：
- 堆栈是JS中最重要的数据结构之一，它负责管理程序中数据的流动。当JS函数被调用时，会在堆栈中创建一个新的栈帧，用于存储局部变量和函数参数。当函数执行完毕，栈帧就会被销毁，释放内存。堆栈是一种先进后出（LIFO）的数据结构，这意味着最后进来的数据首先被处理。
- 堆栈分为两部分：数据区 和控制区 。数据区存储的是变量、参数等数据，而控制区存储的是函数的返回地址等控制信息。
- 当函数被调用时，它的参数和局部变量会被压入堆栈的数据区，而返回地址会被压入堆栈的控制区。当函数执行完毕时，这些信息会被弹出堆栈，函数的返回值也会被压入堆栈的数据区。
拷贝的艺术：深浅之辨
- 理解JS中的深浅拷贝对于避免潜在的错误非常重要。JS中对象的复制可以分为深拷贝和浅拷贝。
- 浅拷贝：
  - 浅拷贝只复制对象本身的数据，而不会复制对象引用的其他对象。这意味着如果对浅拷贝的对象进行修改，原始对象也会受到影响。
- 深拷贝：
  - 深拷贝会复制对象本身的数据以及对象引用的所有其他对象。这意味着对深拷贝的对象进行修改，不会影响原始对象。
- 深拷贝的复杂度更高，需要的内存也更多。因此，在决定使用哪种拷贝方式时，必须权衡利弊。
任务调度：宏任务与微任务的博弈
- JS引擎使用事件队列来管理任务。事件队列中的任务分为宏任务和微任务。宏任务包括：
  - 脚本执行
  - setTimeout 和 setInterval 等定时器
  - DOM 事件处理程序
- 微任务包括：
  - promise 的 then/catch/finally 回调函数
  - MutationObserver 的回调函数
  - DOMContentLoaded 和 load 事件处理程序
- 宏任务和微任务的执行顺序是先执行完所有微任务，再执行宏任务。如果在宏任务执行过程中又产生了新的微任务，这些微任务会在当前宏任务执行完毕后立即执行，然后继续执行下一个宏任务。
原型链：对象关系的映射
- 原型链是JS中一个重要的概念，它了对象之间的继承关系。每个对象都有一个原型对象，原型对象又可能有自己的原型对象，如此递归下去，直到遇到null为止。
- 当对象访问一个不存在的属性时，JS引擎会沿着原型链向上查找，直到找到该属性或者到达null。如果找到了该属性，则直接返回该属性的值。如果未找到，则返回undefined。
- 原型链使JS中的对象可以共享属性和方法，从而避免了代码的重复。