手搓JSVM第 10 篇：对象、数组与属性访问


1. 本文目标

---

本篇继续扩展 VM 的运行时能力，让它支持对象和数组：

let obj = { x: 1 };
obj.x;
​
let arr = [1, 2];
arr[0];

为此需要新增以下 opcode：

1. OBJECT_NEW

2. OBJECT_SET

3. ARRAY_NEW

4. ARRAY_PUSH

5. GET_PROP

6. SET_PROP

7. NEW

8. 为什么对象需要运行时能力

---

数字和字符串可以直接作为值处理，而对象更像一个需要在运行时维护属性的容器。

因此，遇到对象属性访问：

obj.x

它并不是简单读取变量 x，而是要在运行时完成三个步骤：

先得到 obj
再得到属性名 'x'
再执行 obj['x']

形象化比喻：文件柜和抽屉标签

对象像文件柜，属性名像抽屉标签：

obj 文件柜
  x 抽屉 -> 1
  y 抽屉 -> 2

obj.x 就是去 obj 文件柜里按 x 这个标签找到对应抽屉，再取出里面的值。

3. 前置知识

---

4. 源码中的对应位置

---

5. 核心数据结构

---

Object Value

它解决什么问题

它负责保存对象的属性键值对，后续的属性读写都落到这个容器上。

教学版简化实现

const obj = {};
obj['x'] = 1;

Property Access

它解决什么问题

它把 obj.x 这种语法表示为运行时的属性读取操作。

教学版简化实现

regs[dst] = regs[objectReg][regs[propertyReg]];

Array Value

它解决什么问题

数组同样是运行时容器，只是元素按顺序保存。

教学版简化实现

const arr = [];
arr.push(1);

6. Mermaid 图解

---

flowchart TD
    A[Object Literal] --> B[OBJECT_NEW r0]
    B --> C[LOAD_CONST key x]
    C --> D[LOAD_CONST value 1]
    D --> E[OBJECT_SET r0 r1 r2]

flowchart TD
    A[MemberExpression obj.x] --> B[compile obj]
    A --> C[compile property key]
    B --> D[GET_PROP]
    C --> D

7. 伪代码

---

compileObjectExpression(obj):
    dst = allocReg()
    emit object_new dst
    for each property:
        key = compile key
        value = compile value
        emit object_set dst, key, value
    return dst

compileMemberExpression(expr):
    object = compile expr.object
    property = compile property key
    dst = allocReg()
    emit get_prop dst, object, property
    return dst

8. 教学版实现代码

---

const OPCODES = {
  OBJECT_NEW: 1,
  OBJECT_SET: 2,
  ARRAY_NEW: 3,
  ARRAY_PUSH: 4,
  GET_PROP: 5,
  SET_PROP: 6,
};

function executeObjectOpcode(opcode, code, state) {
  const { regs } = state;

  switch (opcode) {
    case OPCODES.OBJECT_NEW: {
      const dst = code[state.pc++];
      regs[dst] = {};
      break;
    }

    case OPCODES.OBJECT_SET: {
      const object = regs[code[state.pc++]];
      const key = regs[code[state.pc++]];
      const value = regs[code[state.pc++]];
      object[key] = value;
      break;
    }

    case OPCODES.GET_PROP: {
      const dst = code[state.pc++];
      const object = regs[code[state.pc++]];
      const key = regs[code[state.pc++]];
      regs[dst] = object[key];
      break;
    }
  }
}

9. 示例输入与输出

---

let obj = { x: 1 };
obj.x;

简化 IR：

object_new r0
load_const r1, 'x'
load_const r2, 1
object_set r0, r1, r2
init_slot slot0(obj), r0
load_slot r3, slot0(obj)
load_const r4, 'x'
get_prop r5, r3, r4
return r5

输出：

1

10. 执行过程拆解

---

11. 与原始源码的差异

---

12. 常见问题

---

Q1：obj.x 和变量 x 一样吗？

不一样。变量 x 从 environment 读取；obj.x 则先得到对象，再从这个对象上读取属性 x。

Q2：为什么属性名也要放寄存器？

因为属性名不一定是固定字符串，它也可能是表达式，例如 obj[key]。只有先把 key 求值出来，运行时才能完成属性访问。

13. 本文小结

---

到这里，VM 已经能在运行时创建对象和数组，并通过属性 key 完成对象属性访问。

下一篇将继续讲：

第 11 篇：打包、模块与 CLI