JS `Hidden Classes` / `Maps` 在对象属性访问中的作用与优化

各位靓仔靓女们，早上好！今天咱们来聊聊JavaScript引擎背后的那些小秘密，特别是关于对象属性访问的优化，也就是传说中的“Hidden Classes”和“Maps”。放心，咱们不搞那些晦涩难懂的学院派理论，尽量用大白话把它们扒个精光，让大家以后写JS的时候，心里更有数。

开场白：JS对象的“身世之谜”

在开始之前，先问大家一个问题：你知道JS对象在内存里是怎么存的吗？

很多人可能会说，不就是键值对嘛，key是字符串，value可以是任何东西。这话没错，但只是表面现象。实际上，JS引擎为了提高性能，在底层搞了很多花样，其中最重要的就是今天的主角——“Hidden Classes”（有些引擎也叫“Shapes”、“Structures”或者“Maps”，咱们这里就统一叫“Hidden Classes”吧，方便理解）。

第一幕：没有Hidden Classes的世界（原始人的生活）

想象一下，如果没有Hidden Classes，JS引擎会怎么处理对象的属性访问？

最简单的想法是，每次访问对象的属性，都去遍历对象的属性列表，找到对应的key，然后返回value。这就像原始人找东西一样，每次都要翻箱倒柜，效率极其低下。

function Person(name, age) {
  this.name = name;
  this.age = age;
}

const person1 = new Person("Alice", 30);
const person2 = new Person("Bob", 25);

console.log(person1.name); // 引擎可能需要遍历person1的属性列表，找到"name"
console.log(person2.age);  // 引擎可能需要遍历person2的属性列表，找到"age"

如果每次都这么搞，那JS的性能早就凉凉了。所以，JS引擎肯定不会这么傻。

第二幕：Hidden Classes闪亮登场（文明的曙光）

Hidden Classes的出现，就是为了解决上面提到的性能问题。它的核心思想是：如果多个对象具有相同的属性结构（相同的属性名和相同的属性顺序），那么它们就可以共享同一个Hidden Class。

Hidden Class本质上就是一个描述对象属性结构的“蓝图”。它记录了对象的属性名、属性类型、以及属性在内存中的偏移量。

举个例子：

function Point(x, y) {
  this.x = x;
  this.y = y;
}

const point1 = new Point(10, 20);
const point2 = new Point(30, 40);

在这个例子中，point1和point2都具有相同的属性结构：x和y。因此，JS引擎可能会为它们创建一个Hidden Class，如下所示：

Hidden Class for Point:
  - x: offset 0, type: number
  - y: offset 8, type: number

这个Hidden Class告诉引擎，x属性在对象内存的偏移量为0，y属性的偏移量为8（假设number类型占8个字节）。

有了Hidden Class，引擎在访问point1.x时，就不需要遍历属性列表了，只需要根据Hidden Class提供的偏移量，直接从内存中读取x的值即可。这就像有了地图，找东西就方便多了。

第三幕：属性访问的优化之路（飞速发展）

Hidden Classes是如何优化属性访问的呢？主要有以下几个方面：

1. 快速属性查找： 引擎可以通过Hidden Class直接获取属性的偏移量，从而实现快速的属性查找。
2. 内联缓存 (Inline Caches, ICs)： 引擎会将Hidden Class和属性偏移量缓存起来，下次访问相同属性时，就可以直接使用缓存，而不需要重新查找。这就是所谓的内联缓存。
3. 类型推断： Hidden Class还可以帮助引擎进行类型推断，从而进一步优化代码执行。

为了更直观地理解，咱们用一个表格来对比一下有无Hidden Classes的属性访问过程：

操作	没有Hidden Classes	有Hidden Classes
创建对象	为每个对象分配独立的属性列表	创建对象，并关联到一个Hidden Class（如果已存在，则复用；否则创建新的）
访问属性	遍历对象的属性列表，查找属性名，获取属性值	从Hidden Class获取属性的偏移量，直接从内存中读取属性值，并将Hidden Class和偏移量缓存起来
添加/删除属性	修改对象的属性列表	如果修改导致对象结构改变，则创建新的Hidden Class，并将对象关联到新的Hidden Class

第四幕：Hidden Classes的进化（技术的迭代）

Hidden Classes并不是一成不变的。随着JS引擎的不断发展，Hidden Classes的实现方式也在不断进化。

• Transition Tree (转移树): 当你向对象添加属性时，引擎会创建一个新的Hidden Class，并将其添加到Hidden Class的“转移树”中。转移树记录了对象属性结构的变化路径。

  例如：

  const obj = {}; // 初始状态，关联到空的Hidden Class
  
  obj.x = 10;  // 添加属性x，创建新的Hidden Class，并添加到转移树中
  obj.y = 20;  // 添加属性y，创建新的Hidden Class，并添加到转移树中

  转移树的作用是，如果后续创建的对象也按照相同的属性添加顺序，引擎就可以快速找到对应的Hidden Class，而不需要重新创建。

• Polymorphic Inline Caches (多态内联缓存): 如果一个属性被多次访问，但每次访问的对象都关联到不同的Hidden Class，那么引擎就会使用多态内联缓存。多态内联缓存可以处理多种Hidden Class的情况，但性能会比单态内联缓存稍差。

第五幕：性能优化的实战指南（避坑指南）

了解了Hidden Classes的原理，我们就可以在实际开发中采取一些措施，来提高JS代码的性能。

1. 保持对象结构的稳定： 尽量避免动态添加或删除对象的属性。如果需要动态添加属性，最好在对象创建时就预先定义好所有的属性。

   // 避免：
   const obj = {};
   obj.x = 10;
   obj.y = 20;
   
   // 推荐：
   const obj = { x: undefined, y: undefined };
   obj.x = 10;
   obj.y = 20;

2. 使用相同的属性顺序： 尽量保证具有相同功能的对象的属性顺序一致。这样可以提高Hidden Class的复用率。

   // 避免：
   const person1 = { name: "Alice", age: 30 };
   const person2 = { age: 25, name: "Bob" }; // 属性顺序不同
   
   // 推荐：
   const person1 = { name: "Alice", age: 30 };
   const person2 = { name: "Bob", age: 25 }; // 属性顺序相同

3. 避免类型转换： 尽量避免在对象的属性中存储不同类型的值。这会导致引擎无法进行类型推断，从而影响性能。

   // 避免：
   const obj = { value: 10 };
   obj.value = "hello"; // 类型改变
   
   // 推荐：
   const obj = { numberValue: 10, stringValue: "hello" }; // 使用不同的属性存储不同类型的值

4. 注意数组的使用： 虽然数组也是对象，但引擎对数组的优化方式与普通对象不同。尽量避免将数组作为普通对象来使用。

   // 避免：
   const arr = [];
   arr.name = "Alice"; // 不推荐
   
   // 推荐：
   const arr = ["Alice", "Bob"]; // 使用标准的数组方式

5. 善用构造函数和类： 使用构造函数和类可以更好地控制对象的结构，从而提高性能。

   // 推荐：
   class Point {
     constructor(x, y) {
       this.x = x;
       this.y = y;
     }
   }
   
   const point1 = new Point(10, 20);
   const point2 = new Point(30, 40);

第六幕：Maps的另一面（殊途同归）

有些JS引擎（比如SpiderMonkey，也就是Firefox的引擎）使用“Maps”来管理对象的属性。Maps和Hidden Classes的概念类似，都是为了提高属性访问的性能。

不同之处在于，Maps更加灵活，可以处理更复杂的情况，例如动态添加属性。但是，Maps的性能通常比Hidden Classes稍差。

你可以把Maps想象成一个更高级的Hidden Class，它牺牲了一部分性能，换取了更大的灵活性。

第七幕：总结与展望（未来的方向）

今天我们一起探索了JS引擎中Hidden Classes的奥秘。希望大家能够记住以下几个关键点：

• Hidden Classes是JS引擎为了优化对象属性访问而采用的一种技术。
• Hidden Classes通过共享属性结构信息，减少了属性查找的开销。
• 我们可以通过一些编程技巧，来提高Hidden Class的复用率，从而提高代码的性能。
• Maps是Hidden Classes的另一种实现方式，更加灵活，但性能稍差。

随着JS引擎的不断发展，Hidden Classes和Maps的实现方式也在不断进化。未来，我们可以期待更加高效、更加智能的JS引擎，为我们带来更好的开发体验。

最后的小贴士：

• 不要过度优化。在大多数情况下，Hidden Classes的优化是JS引擎自动完成的。我们只需要关注代码的可读性和可维护性，避免过度优化，反而得不偿失。
• 使用性能分析工具。可以使用Chrome DevTools等工具来分析代码的性能瓶颈，从而有针对性地进行优化。

好了，今天的讲座就到这里。希望大家有所收获！ 以后写代码的时候， 记得心里默念： “我要让我的对象们共享同一个Hidden Class！”

各位，下课！