内联缓存（IC）：属性访问的加速器 ​

// 属性访问的复杂性
class PropertyAccessChallenge {
  static demonstrate() {
    console.log('=== JavaScript 属性访问的挑战 ===\n');
    
    // 场景1：静态语言（如C++）
    console.log('静态语言（编译时确定偏移）:');
    console.log('  struct Point { int x; int y; };');
    console.log('  point.x  →  *(point + 0)  // 编译时已知偏移');
    console.log('  性能: O(1)，直接内存访问\n');
    
    // 场景2：动态语言（运行时查找）
    console.log('动态语言（运行时查找）:');
    console.log('  const point = { x: 1, y: 2 };');
    console.log('  point.x  →  查找"x"在对象中的位置');
    console.log('  朴素实现: O(n)，遍历属性列表\n');
    
    // 为什么动态查找慢
    console.log('朴素属性查找过程:');
    console.log('  1. 获取属性名"x"');
    console.log('  2. 获取对象的属性列表');
    console.log('  3. 遍历列表，查找匹配的属性名');
    console.log('  4. 找到后，读取属性值');
    console.log('  5. 每次访问都要重复以上步骤\n');
  }
  
  static demonstrateDynamicNature() {
    console.log('=== 对象结构的动态性 ===\n');
    
    // 同一个函数，不同的对象结构
    function getX(obj) {
      return obj.x;
    }
    
    // 不同形状的对象
    const point2D = { x: 1, y: 2 };
    const point3D = { x: 1, y: 2, z: 3 };
    const colorPoint = { color: 'red', x: 1, y: 2 };
    
    console.log('同一函数处理不同形状的对象:');
    console.log(`  getX({ x: 1, y: 2 }) = ${getX(point2D)}`);
    console.log(`  getX({ x: 1, y: 2, z: 3 }) = ${getX(point3D)}`);
    console.log(`  getX({ color: "red", x: 1, y: 2 }) = ${getX(colorPoint)}\n`);
    
    console.log('挑战: x属性在不同对象中的位置不同');
    console.log('  point2D: x在偏移0');
    console.log('  point3D: x在偏移0');
    console.log('  colorPoint: x在偏移1（color之后）\n');
  }
  
  static runAll() {
    this.demonstrate();
    this.demonstrateDynamicNature();
  }
}

PropertyAccessChallenge.runAll();

// 内联缓存模拟
class InlineCacheSimulator {
  constructor() {
    // IC状态
    this.cache = {
      hiddenClass: null,  // 上次见到的隐藏类
      offset: -1,         // 属性的偏移量
      state: 'uninitialized'
    };
    
    this.stats = {
      hits: 0,
      misses: 0,
      lookups: 0
    };
  }
  
  // 模拟属性访问
  getProperty(obj, propName) {
    this.stats.lookups++;
    
    // 获取对象的隐藏类（模拟）
    const hiddenClass = this.getHiddenClass(obj);
    
    // 检查缓存是否命中
    if (this.cache.hiddenClass === hiddenClass && 
        this.cache.state !== 'uninitialized') {
      // 缓存命中：直接使用缓存的偏移量
      this.stats.hits++;
      console.log(`  ✅ IC命中：直接访问偏移 ${this.cache.offset}`);
      return this.readAtOffset(obj, this.cache.offset);
    }
    
    // 缓存未命中：执行完整查找
    this.stats.misses++;
    console.log(`  ❌ IC未命中：执行完整查找`);
    
    const { value, offset } = this.fullPropertyLookup(obj, propName);
    
    // 更新缓存
    this.cache.hiddenClass = hiddenClass;
    this.cache.offset = offset;
    this.cache.state = 'monomorphic';
    
    console.log(`  📝 更新IC：隐藏类=${hiddenClass}, 偏移=${offset}`);
    
    return value;
  }
  
  // 模拟获取隐藏类
  getHiddenClass(obj) {
    // 使用属性名列表作为隐藏类的简化表示
    return Object.keys(obj).join(',');
  }
  
  // 模拟完整属性查找
  fullPropertyLookup(obj, propName) {
    const keys = Object.keys(obj);
    const offset = keys.indexOf(propName);
    
    console.log(`    查找属性"${propName}"...`);
    console.log(`    遍历属性: [${keys.join(', ')}]`);
    console.log(`    找到位置: ${offset}`);
    
    return {
      value: obj[propName],
      offset
    };
  }
  
  // 模拟按偏移读取
  readAtOffset(obj, offset) {
    const keys = Object.keys(obj);
    const key = keys[offset];
    return obj[key];
  }
  
  // 打印统计
  printStats() {
    const hitRate = this.stats.lookups > 0 
      ? (this.stats.hits / this.stats.lookups * 100).toFixed(1)
      : 0;
    
    console.log('\n=== IC 统计 ===');
    console.log(`总查找: ${this.stats.lookups}`);
    console.log(`命中: ${this.stats.hits}`);
    console.log(`未命中: ${this.stats.misses}`);
    console.log(`命中率: ${hitRate}%\n`);
  }
  
  // 演示
  static demonstrate() {
    console.log('=== 内联缓存工作原理 ===\n');
    
    const ic = new InlineCacheSimulator();
    
    // 创建相同形状的对象
    const point1 = { x: 10, y: 20 };
    const point2 = { x: 30, y: 40 };
    const point3 = { x: 50, y: 60 };
    
    console.log('访问相同形状的对象:\n');
    
    console.log('第1次访问 point1.x:');
    console.log(`  结果: ${ic.getProperty(point1, 'x')}\n`);
    
    console.log('第2次访问 point2.x:');
    console.log(`  结果: ${ic.getProperty(point2, 'x')}\n`);
    
    console.log('第3次访问 point3.x:');
    console.log(`  结果: ${ic.getProperty(point3, 'x')}\n`);
    
    ic.printStats();
  }
}

InlineCacheSimulator.demonstrate();

// IC状态机
class ICStateMachine {
  constructor() {
    this.state = 'uninitialized';
    this.cache = [];
    this.maxPolymorphic = 4;
  }
  
  // 处理属性访问
  handleAccess(hiddenClass) {
    const previousState = this.state;
    let cacheHit = false;
    
    switch (this.state) {
      case 'uninitialized':
        // 首次访问：转为单态
        this.cache = [hiddenClass];
        this.state = 'monomorphic';
        break;
        
      case 'monomorphic':
        if (this.cache[0] === hiddenClass) {
          // 缓存命中
          cacheHit = true;
        } else {
          // 遇到新形状：转为多态
          this.cache.push(hiddenClass);
          this.state = 'polymorphic';
        }
        break;
        
      case 'polymorphic':
        if (this.cache.includes(hiddenClass)) {
          // 缓存命中
          cacheHit = true;
        } else if (this.cache.length < this.maxPolymorphic) {
          // 添加新形状
          this.cache.push(hiddenClass);
        } else {
          // 超过阈值：转为超态
          this.state = 'megamorphic';
          this.cache = [];
        }
        break;
        
      case 'megamorphic':
        // 超态：放弃缓存，使用通用查找
        break;
    }
    
    return {
      previousState,
      newState: this.state,
      cacheHit,
      cacheSize: this.cache.length
    };
  }
  
  // 演示状态转换
  static demonstrate() {
    console.log('=== IC 状态转换 ===\n');
    
    const ic = new ICStateMachine();
    
    // 模拟不同形状的对象
    const shapes = [
      'Point{x,y}',           // 形状1
      'Point{x,y}',           // 形状1（重复）
      'Point3D{x,y,z}',       // 形状2
      'ColorPoint{color,x,y}',// 形状3
      'Point{x,y}',           // 形状1（重复）
      'Size{width,height}',   // 形状4
      'Rect{x,y,w,h}',        // 形状5
    ];
    
    console.log('状态转换过程:\n');
    console.log('访问序号  形状                    前状态         后状态         缓存命中');
    console.log(''.padEnd(80, '-'));
    
    shapes.forEach((shape, index) => {
      const result = ic.handleAccess(shape);
      
      const hitStr = result.cacheHit ? '✅' : '❌';
      console.log(
        `${(index + 1).toString().padStart(4)}      ` +
        `${shape.padEnd(22)} ` +
        `${result.previousState.padEnd(14)} ` +
        `${result.newState.padEnd(14)} ` +
        `${hitStr}`
      );
    });
    
    console.log('\n状态说明:');
    console.log('  uninitialized: 初始状态，未见过任何对象');
    console.log('  monomorphic: 单态，只见过一种形状');
    console.log('  polymorphic: 多态，见过2-4种形状');
    console.log('  megamorphic: 超态，见过太多形状，放弃缓存\n');
  }
}

ICStateMachine.demonstrate();

// IC内部结构模拟
class ICInternals {
  static demonstrateLoadIC() {
    console.log('=== LoadIC：属性读取缓存 ===\n');
    
    // LoadIC用于属性读取：obj.prop
    const loadIC = {
      // 缓存条目
      entries: [
        {
          map: 'Map@0x1234',      // 隐藏类地址
          handler: {
            type: 'field',
            offset: 16,           // 属性在对象中的偏移
            representation: 'Tagged'
          }
        }
      ],
      
      // 状态
      state: 'monomorphic'
    };
    
    console.log('LoadIC 结构:');
    console.log(`  状态: ${loadIC.state}`);
    console.log(`  缓存条目数: ${loadIC.entries.length}`);
    console.log('  条目详情:');
    for (const entry of loadIC.entries) {
      console.log(`    Map: ${entry.map}`);
      console.log(`    Handler类型: ${entry.handler.type}`);
      console.log(`    偏移: ${entry.handler.offset}`);
      console.log(`    表示: ${entry.handler.representation}\n`);
    }
  }
  
  static demonstrateStoreIC() {
    console.log('=== StoreIC：属性写入缓存 ===\n');
    
    // StoreIC用于属性写入：obj.prop = value
    const storeIC = {
      entries: [
        {
          map: 'Map@0x1234',        // 当前隐藏类
          transitionMap: 'Map@0x5678', // 转换后的隐藏类（添加属性时）
          handler: {
            type: 'transition',
            offset: 24,
            representation: 'Smi'
          }
        }
      ],
      
      state: 'monomorphic'
    };
    
    console.log('StoreIC 结构:');
    console.log(`  状态: ${storeIC.state}`);
    console.log('  条目详情:');
    const entry = storeIC.entries[0];
    console.log(`    当前Map: ${entry.map}`);
    console.log(`    转换Map: ${entry.transitionMap}`);
    console.log(`    Handler类型: ${entry.handler.type}`);
    console.log(`    偏移: ${entry.handler.offset}\n`);
  }
  
  static demonstrateKeyedLoadIC() {
    console.log('=== KeyedLoadIC：动态键访问缓存 ===\n');
    
    // KeyedLoadIC用于动态属性访问：obj[key]
    const keyedLoadIC = {
      entries: [
        {
          map: 'Map@0x1234',
          key: 'x',              // 具体的键
          handler: {
            type: 'field',
            offset: 16
          }
        },
        {
          map: 'Map@0x1234',
          key: 'y',
          handler: {
            type: 'field',
            offset: 24
          }
        }
      ],
      
      state: 'polymorphic'
    };
    
    console.log('KeyedLoadIC 结构:');
    console.log(`  状态: ${keyedLoadIC.state}`);
    console.log(`  缓存的键:`, keyedLoadIC.entries.map(e => e.key));
    console.log('');
    
    console.log('使用场景:');
    console.log('  const key = "x";');
    console.log('  obj[key]  // 使用KeyedLoadIC\n');
  }
  
  static runAll() {
    this.demonstrateLoadIC();
    this.demonstrateStoreIC();
    this.demonstrateKeyedLoadIC();
  }
}

ICInternals.runAll();

// IC性能测试
class ICPerformanceTest {
  static testMonomorphic() {
    console.log('=== 单态性能测试 ===\n');
    
    // 创建相同形状的对象
    function Point(x, y) {
      this.x = x;
      this.y = y;
    }
    
    const points = [];
    for (let i = 0; i < 10000; i++) {
      points.push(new Point(i, i * 2));
    }
    
    // 单态访问：所有对象形状相同
    function sumX(arr) {
      let sum = 0;
      for (const obj of arr) {
        sum += obj.x;  // 单态：只见一种形状
      }
      return sum;
    }
    
    // 预热
    sumX(points);
    
    console.time('单态访问');
    let result = 0;
    for (let i = 0; i < 100; i++) {
      result = sumX(points);
    }
    console.timeEnd('单态访问');
    console.log(`结果: ${result}\n`);
  }
  
  static testPolymorphic() {
    console.log('=== 多态性能测试 ===\n');
    
    // 创建不同形状的对象
    const objects = [];
    for (let i = 0; i < 10000; i++) {
      if (i % 3 === 0) {
        objects.push({ x: i, y: i * 2 });
      } else if (i % 3 === 1) {
        objects.push({ x: i, y: i * 2, z: i * 3 });
      } else {
        objects.push({ a: 0, x: i, y: i * 2 });
      }
    }
    
    // 多态访问：见到多种形状
    function sumX(arr) {
      let sum = 0;
      for (const obj of arr) {
        sum += obj.x;  // 多态：见到3种形状
      }
      return sum;
    }
    
    // 预热
    sumX(objects);
    
    console.time('多态访问');
    let result = 0;
    for (let i = 0; i < 100; i++) {
      result = sumX(objects);
    }
    console.timeEnd('多态访问');
    console.log(`结果: ${result}\n`);
  }
  
  static testMegamorphic() {
    console.log('=== 超态性能测试 ===\n');
    
    // 创建大量不同形状的对象
    const objects = [];
    for (let i = 0; i < 10000; i++) {
      const obj = { x: i };
      // 每个对象添加唯一的属性，创造唯一的形状
      obj[`prop${i % 100}`] = i;
      objects.push(obj);
    }
    
    // 超态访问：见到太多形状
    function sumX(arr) {
      let sum = 0;
      for (const obj of arr) {
        sum += obj.x;  // 超态：见到100种形状
      }
      return sum;
    }
    
    // 预热
    sumX(objects);
    
    console.time('超态访问');
    let result = 0;
    for (let i = 0; i < 100; i++) {
      result = sumX(objects);
    }
    console.timeEnd('超态访问');
    console.log(`结果: ${result}\n`);
  }
  
  static compare() {
    console.log('=== IC性能对比 ===\n');
    
    this.testMonomorphic();
    this.testPolymorphic();
    this.testMegamorphic();
    
    console.log('结论:');
    console.log('  单态 > 多态 > 超态');
    console.log('  保持对象形状一致可显著提升性能\n');
  }
}

ICPerformanceTest.compare();

// 原型链IC
class PrototypeChainIC {
  static demonstrate() {
    console.log('=== 原型链属性的IC ===\n');
    
    // 原型链结构
    const proto = {
      shared: 'prototype value',
      method() {
        return this.x * 2;
      }
    };
    
    function Point(x, y) {
      this.x = x;
      this.y = y;
    }
    Point.prototype = proto;
    
    const p1 = new Point(10, 20);
    const p2 = new Point(30, 40);
    
    console.log('对象结构:');
    console.log('  Point实例');
    console.log('    └─ own: x, y');
    console.log('    └─ proto: shared, method\n');
    
    // 访问自有属性
    console.log('访问自有属性 p1.x:');
    console.log(`  结果: ${p1.x}`);
    console.log('  IC缓存: { type: "field", offset: 0 }\n');
    
    // 访问原型属性
    console.log('访问原型属性 p1.shared:');
    console.log(`  结果: ${p1.shared}`);
    console.log('  IC缓存: { type: "prototypeField", protoOffset: 0 }\n');
    
    // 调用原型方法
    console.log('调用原型方法 p1.method():');
    console.log(`  结果: ${p1.method()}`);
    console.log('  IC缓存: { type: "prototypeMethod", method: Function }\n');
  }
  
  static demonstratePrototypeCheck() {
    console.log('=== 原型链稳定性检查 ===\n');
    
    console.log('IC对原型链的假设:');
    console.log('  1. 对象的隐藏类不变');
    console.log('  2. 原型对象不变');
    console.log('  3. 原型的隐藏类不变\n');
    
    console.log('破坏假设的操作:');
    console.log('  • 修改对象的__proto__');
    console.log('  • 在原型上添加/删除属性');
    console.log('  • 使用Object.setPrototypeOf()\n');
    
    console.log('后果:');
    console.log('  • IC失效，需要重新查找');
    console.log('  • 可能导致去优化\n');
    
    // 示例
    function Animal() {}
    Animal.prototype.speak = function() { return 'sound'; };
    
    const dog = new Animal();
    console.log(`dog.speak(): ${dog.speak()}`);
    
    // 修改原型
    Animal.prototype.speak = function() { return 'bark'; };
    console.log(`修改原型后 dog.speak(): ${dog.speak()}`);
    console.log('  ⚠️ IC失效，重新查找\n');
  }
  
  static runAll() {
    this.demonstrate();
    this.demonstratePrototypeCheck();
  }
}

PrototypeChainIC.runAll();

// IC优化最佳实践
class ICBestPractices {
  static tip1_ConsistentShapes() {
    console.log('=== 提示1：保持对象形状一致 ===\n');
    
    console.log('❌ 不推荐：');
    console.log(`
    function process(items) {
      for (const item of items) {
        console.log(item.name);  // 多态IC
      }
    }
    
    process([
      { name: 'a', type: 1 },
      { type: 2, name: 'b' },  // 属性顺序不同
      { name: 'c' }            // 属性数量不同
    ]);
    `);
    
    console.log('✅ 推荐：');
    console.log(`
    class Item {
      constructor(name, type = null) {
        this.name = name;
        this.type = type;
      }
    }
    
    process([
      new Item('a', 1),
      new Item('b', 2),
      new Item('c')
    ]);
    `);
  }
  
  static tip2_AvoidDynamicProperties() {
    console.log('=== 提示2：避免动态属性名 ===\n');
    
    console.log('❌ 不推荐：');
    console.log(`
    function getValue(obj, key) {
      return obj[key];  // KeyedLoadIC，可能超态
    }
    
    getValue(obj, 'a');
    getValue(obj, 'b');
    getValue(obj, 'c');
    // ...很多不同的键
    `);
    
    console.log('✅ 推荐：');
    console.log(`
    // 如果键是固定的，使用静态属性访问
    function getA(obj) { return obj.a; }
    function getB(obj) { return obj.b; }
    
    // 或使用Map存储动态键值
    const map = new Map();
    map.get(key);  // Map有专门的优化
    `);
  }
  
  static tip3_InitializeInConstructor() {
    console.log('=== 提示3：在构造函数中初始化所有属性 ===\n');
    
    console.log('❌ 不推荐：');
    console.log(`
    class User {
      constructor(name) {
        this.name = name;
        // email后续添加
      }
      
      setEmail(email) {
        this.email = email;  // 改变对象形状
      }
    }
    `);
    
    console.log('✅ 推荐：');
    console.log(`
    class User {
      constructor(name, email = null) {
        this.name = name;
        this.email = email;  // 始终初始化
      }
      
      setEmail(email) {
        this.email = email;  // 形状不变
      }
    }
    `);
  }
  
  static tip4_AvoidDelete() {
    console.log('=== 提示4：避免使用delete ===\n');
    
    console.log('❌ 不推荐：');
    console.log(`
    const obj = { a: 1, b: 2, c: 3 };
    delete obj.b;  // 改变对象形状，可能转为字典模式
    `);
    
    console.log('✅ 推荐：');
    console.log(`
    const obj = { a: 1, b: 2, c: 3 };
    obj.b = undefined;  // 保持形状不变
    
    // 或使用Map
    const map = new Map([['a', 1], ['b', 2], ['c', 3]]);
    map.delete('b');  // Map的删除有专门优化
    `);
  }
  
  static runAll() {
    this.tip1_ConsistentShapes();
    this.tip2_AvoidDynamicProperties();
    this.tip3_InitializeInConstructor();
    this.tip4_AvoidDelete();
  }
}

ICBestPractices.runAll();