JavaScript 对象属性访问的性能税：Hidden Class、内联缓存与 Megamorphic 陷阱

每次写下 obj.x 时，V8 引擎在背后所做的工作远超你的直觉。本文从引擎的 Hidden Class、内联缓存（IC）和 Megamorphic 状态三个层次，拆解属性访问的真实成本。

1. Hidden Class：引擎的秘密地图

JavaScript 对象没有类型——但 V8 给它们造了一套。这玩意儿叫 Hidden Class（也叫 Map/Shape），是 V8 在运行时为结构相同的对象创建的内部描述符。

每个 Hidden Class 记录了属性的偏移量、属性数量和到父 Hidden Class 的链。当一个对象被字面量创建时：

// ✅ 好：属性初始化全在同一形态
const point = { x: 1, y: 2 };

引擎为 point 生成一个 Hidden Class 描述 {x, y}。接着再创建一个同样结构的对象时，它们共享同一个 Hidden Class，属性偏移量也完全相同。所以 point.x 本质上是一次固定偏移量读取——接近 C 结构体的速度。

// ❌ 坏：顺序不同，Hidden Class 也完全不同
const a = { x: 1, y: 2 };
const b = { y: 2, x: 1 };
// a 和 b 的 Hidden Class 是不同的！

并非因为属性的"名字"不同——完全相同的属性名，只是初始化顺序差异，就导致 V8 为它们生成了不同的 Hidden Class 分支。这会让点操作符的内联缓存持续失效。

真正致命的是运行时动态添加属性：

// ❌ 坏：污染 Hidden Class 链
function createUser(name) {
  const user = { name };
  if (name === 'admin') {
    user.role = 'admin'; // 破坏共享
  }
  return user;
}

// ✅ 好：单态初始化
function createUser(name) {
  return {
    name,
    role: name === 'admin' ? 'admin' : 'user'
  };
}

delete 操作是最可怕的——它直接把 Hidden Class 推进 Dictionary Mode（字典模式），此后该对象的所有属性访问都走哈希表查找，告别优化编译（TurboFan 直接放弃）：

// ❌ 死刑级操作
const config = { host: 'localhost', port: 5432, db: 'mydb' };
delete config.db; // Hidden Class → 字典模式

// ✅ 活路：赋值 null/undefined 而非 delete
config.db = undefined;
// 或使用解构排除，但产生新对象
const { db, ...rest } = config;

2. 内联缓存：一次查表，终身受益

obj.x 不是每次都去原型链游一圈。V8 在字节码生成时插入 IC 桩代码，运行时由 IC 将实际结果缓存下来。IC 有三种状态：

Monomorphic（单态）：只见过一种 Hidden Class，最快
Polymorphic（多态）：见过 2-4 种，但仍可接受
Megamorphic（巨态）：超过 4 种，IC 彻底放弃，退化为全局哈希查找

function getX(obj) {
  return obj.x;
}

// —— Scenario A：单态 ——
getX({ x: 1 });
getX({ x: 2 });
getX({ x: 3 });
// 全都是同一个 Hidden Class，IC 直接命中 → 最快路径

// —— Scenario B：巨态 ——
getX({ x: 1, a: 1 });
getX({ x: 2, b: 2 });
getX({ x: 3, c: 3 });
getX({ x: 4, d: 4 });
getX({ x: 5, e: 5 }); // 第 5 种 Hidden Class → 巨态
// 之后每次调用都退化查表

重点实例：在函数形参顺序上避免巨态

// ❌ 坏：每次调用传入不同形状的对象
function process(item) {
  return item.id + '-' + item.name;
}

process({ id: 1, name: 'a', extra: 1 });
process({ id: 2, name: 'b', tag: 'x' });
process({ id: 3, name: 'c', flag: true });
// 三个不同 Hidden Class → 三次 IC 失配

// ✅ 好：统一对象工厂或规范形状
function process(item) {
  const { id, name } = item; // 提前解构，后续只读标量
  return id + '-' + name;
}

function makeItem(id, name, opts = {}) {
  return { id, name, ...opts };
  // 基础形状 {id, name} 始终相同
}

3. 数组要素的性能坑

数组的 forEach 和 for...of 在引擎看来差别巨大。forEach 的回调会为每次迭代创建闭包上下文，并且如果回调改变数组形态（添加/删除元素），引擎会掉入异常路径。

const arr = new Array(1_000_000).fill(0).map((_, i) => i);

// ❌ 额外闭包开销 + 回调栈帧
arr.forEach(v => {
  doWork(v);
});

// ✅ 普通 for 循环——零闭包，最快
for (let i = 0, len = arr.length; i < len; i++) {
  doWork(arr[i]);
}

// ⚠️ for...of 有迭代器开销，但比 forEach 略好
for (const v of arr) {
  doWork(v);
}

如果你在用 Array.reduce 做聚合，记住：reduce 会在每次迭代拼合累加器，若累加器是对象且不断变大（如 {...acc, [k]: v}），O(n²) 的 Hidden Class 生成量会让引擎直接跪。

// ❌ 每次创建新对象，Hidden Class 雪崩
const map = items.reduce((acc, item) => ({
  ...acc,
  [item.id]: item
}), {});

// ✅ Map 真正的 O(n)，且无 Hidden Class 抖动
const map = new Map();
for (const item of items) {
  map.set(item.id, item);
}

核心总结

统一对象初始化形态，避免构造函数里动态添加属性
不要 delete 属性，用 null/undefined 替代
相同结构的对象保证属性顺序一致
函数尽量只看到一种 Hidden Class，远离巨态
关键热路径用 for 代替 forEach，用 Map 代替展开对象做 Key-Value 聚合
所有性能优化说到最后都是数学题——而 Hidden Class 的数学题里，变量只有一个：形状一致性