JavaScript Proxy 元编程：实现响应式、验证器和 ORM 的底层利器

前言#

Proxy 是 ES6 引入的元编程（Metaprogramming）原语，它允许你拦截和自定义对象的基本操作——属性读取、赋值、函数调用、in 运算符、delete 操作等等。如果说普通编程是”写操作数据的代码”，那么元编程就是”写操作代码的代码”。

Vue 3 的响应式系统、各种数据验证库、ORM 框架的查询构建器，底层都大量使用了 Proxy。本文将全面解析 Proxy 的 handler traps、Reflect API，并通过三个实战项目（响应式系统、数据验证框架、迷你 ORM）展示 Proxy 的强大威力。

Proxy 基础#

创建 Proxy#

1
const target = { name: 'Alice', age: 30 };
2

3
const handler = {
4
  get(target, property, receiver) {
5
    console.log(`Reading ${String(property)}`);
6
    return Reflect.get(target, property, receiver);
7
  },
8
  set(target, property, value, receiver) {
9
    console.log(`Writing ${String(property)} = ${value}`);
10
    return Reflect.set(target, property, value, receiver);
11
  }
12
};
13

14
const proxy = new Proxy(target, handler);
15

16
proxy.name;         // Reading name → "Alice"
17
proxy.age = 31;     // Writing age = 31

Proxy 接收两个参数：

target：被代理的原始对象
handler：一个对象，定义了各种拦截操作的”陷阱”（traps）

所有 Handler Traps 一览#

Proxy 支持 13 个陷阱，覆盖了对象的所有基本操作：

1
const fullHandler = {
2
  // 属性读取: proxy.foo, proxy['foo']
3
  get(target, property, receiver) {},
4

5
  // 属性赋值: proxy.foo = bar
6
  set(target, property, value, receiver) {},
7

8
  // 属性存在检查: 'foo' in proxy
9
  has(target, property) {},
10

11
  // 属性删除: delete proxy.foo
12
  deleteProperty(target, property) {},
13

14
  // Object.keys(), for...in 等
15
  ownKeys(target) {},
16

17
  // Object.getOwnPropertyDescriptor(proxy, prop)
18
  getOwnPropertyDescriptor(target, property) {},
19

20
  // Object.defineProperty(proxy, prop, descriptor)
21
  defineProperty(target, property, descriptor) {},
22

23
  // Object.getPrototypeOf(proxy)
24
  getPrototypeOf(target) {},
25

26
  // Object.setPrototypeOf(proxy, proto)
27
  setPrototypeOf(target, prototype) {},
28

29
  // Object.isExtensible(proxy)
30
  isExtensible(target) {},
31

32
  // Object.preventExtensions(proxy)
33
  preventExtensions(target) {},
34

35
  // proxy(...args) — 仅当 target 是函数时
36
  apply(target, thisArg, argumentsList) {},
37

38
  // new proxy(...args) — 仅当 target 是构造函数时
39
  construct(target, argumentsList, newTarget) {},
40
};

Reflect API：Proxy 的最佳拍档#

Reflect 对象为每个 Proxy trap 提供了对应的默认操作方法。使用 Reflect 而不是直接操作 target 的原因：

保持正确的 receiver：确保原型链上的 getter/setter 正确工作
返回值语义一致：Reflect.set() 返回 boolean，与 set trap 的期望返回值一致
避免异常：某些操作如 Object.defineProperty 失败会抛异常，Reflect.defineProperty 返回 false

1
// 错误示范：直接操作 target
2
const badHandler = {
3
  get(target, prop) {
4
    return target[prop]; // 不传 receiver，原型链上的 getter 可能出错
5
  },
6
  set(target, prop, value) {
7
    target[prop] = value; // 不返回 boolean
8
    return true;
9
  }
10
};
11

12
// 正确示范：使用 Reflect
13
const goodHandler = {
14
  get(target, prop, receiver) {
15
    return Reflect.get(target, prop, receiver);
16
  },
17
  set(target, prop, value, receiver) {
18
    return Reflect.set(target, prop, value, receiver);
19
  }
20
};

Receiver 的重要性#

1
const parent = {
2
  get greeting() {
3
    return `Hello, I'm ${this.name}`;
4
  }
5
};
6

7
const child = Object.create(
8
  new Proxy(parent, {
9
    get(target, prop, receiver) {
10
      console.log('receiver is child?', receiver === child);
11
      return Reflect.get(target, prop, receiver); // receiver 确保 this 指向 child
12
    }
13
  })
14
);
15

16
child.name = 'Bob';
17
console.log(child.greeting);
18
// receiver is child? true
19
// "Hello, I'm Bob"

如果不传 receiver，this.name 将在 parent 上查找，得到 undefined。

实战一：Vue 3 风格响应式系统#

Vue 3 的响应式核心就是基于 Proxy 实现的。下面我们从零实现一个简化版：

依赖收集与触发#

1
// 当前正在执行的副作用函数
2
let activeEffect = null;
3
const effectStack = [];
4

5
// 存储依赖关系: target -> property -> Set<effect>
6
const targetMap = new WeakMap();
7

8
function track(target, property) {
9
  if (!activeEffect) return;
10

11
  let depsMap = targetMap.get(target);
12
  if (!depsMap) {
13
    depsMap = new Map();
14
    targetMap.set(target, depsMap);
15
  }
16

17
  let deps = depsMap.get(property);
18
  if (!deps) {
19
    deps = new Set();
20
    depsMap.set(property, deps);
21
  }
22

23
  deps.add(activeEffect);
24
}
25

26
function trigger(target, property) {
27
  const depsMap = targetMap.get(target);
28
  if (!depsMap) return;
29

30
  const deps = depsMap.get(property);
31
  if (!deps) return;
32

33
  // 创建副本避免无限循环
34
  const effectsToRun = new Set(deps);
35
  effectsToRun.forEach(effect => {
36
    // 避免递归触发自身
37
    if (effect !== activeEffect) {
38
      effect();
39
    }
40
  });
41
}

reactive() 实现#

1
const reactiveMap = new WeakMap();
2

3
function reactive(target) {
4
  // 避免重复代理
5
  if (reactiveMap.has(target)) {
6
    return reactiveMap.get(target);
7
  }
8

9
  const proxy = new Proxy(target, {
10
    get(target, property, receiver) {
11
      // 特殊标记，用于判断是否是 reactive 对象
12
      if (property === '__isReactive') return true;
13
      if (property === '__raw') return target;
14

15
      track(target, property);
16

17
      const result = Reflect.get(target, property, receiver);
18

19
      // 深层代理：如果值是对象，递归创建 reactive
20
      if (result !== null && typeof result === 'object') {
21
        return reactive(result);
22
      }
23

24
      return result;
25
    },
26

27
    set(target, property, value, receiver) {
28
      const oldValue = target[property];
29
      const result = Reflect.set(target, property, value, receiver);
30

31
      // 只在值真正变化时触发
32
      if (oldValue !== value && (oldValue === oldValue || value === value)) {
33
        trigger(target, property);
34
      }
35

36
      return result;
37
    },
38

39
    has(target, property) {
40
      track(target, property);
41
      return Reflect.has(target, property);
42
    },
43

44
    deleteProperty(target, property) {
45
      const hadKey = Object.prototype.hasOwnProperty.call(target, property);
46
      const result = Reflect.deleteProperty(target, property);
47

48
      if (hadKey && result) {
49
        trigger(target, property);
50
      }
51

52
      return result;
53
    },
54

55
    ownKeys(target) {
56
      // 当 for...in 或 Object.keys() 时追踪
57
      track(target, Symbol('iterate'));
58
      return Reflect.ownKeys(target);
59
    }
60
  });
61

62
  reactiveMap.set(target, proxy);
63
  return proxy;
64
}

effect() 实现#

1
function effect(fn) {
2
  const effectFn = () => {
3
    // 清除旧的依赖关系
4
    cleanup(effectFn);
5

6
    activeEffect = effectFn;
7
    effectStack.push(effectFn);
8

9
    const result = fn();
10

11
    effectStack.pop();
12
    activeEffect = effectStack[effectStack.length - 1];
13

14
    return result;
15
  };
16

17
  effectFn.deps = [];
18
  effectFn();
19

20
  return effectFn;
21
}
22

23
function cleanup(effectFn) {
24
  for (const deps of effectFn.deps) {
25
    deps.delete(effectFn);
26
  }
27
  effectFn.deps.length = 0;
28
}

computed() 实现#

1
function computed(getter) {
2
  let value;
3
  let dirty = true;
4

5
  const effectFn = effect(() => {
6
    value = getter();
7
    dirty = false;
8
  });
9

10
  // 重写 effect 的自动执行行为
11
  // 这里简化实现，实际 Vue 使用 scheduler
12
  return {
13
    get value() {
14
      if (dirty) {
15
        value = getter();
16
        dirty = false;
17
      }
18
      return value;
19
    }
20
  };
21
}

完整使用示例#

1
const state = reactive({
2
  firstName: 'John',
3
  lastName: 'Doe',
4
  todos: [
5
    { text: 'Learn Proxy', done: false },
6
    { text: 'Build reactive system', done: false }
7
  ]
8
});
9

10
// 自动追踪依赖
11
effect(() => {
12
  console.log(`Full name: ${state.firstName} ${state.lastName}`);
13
});
14
// 立即输出: "Full name: John Doe"
15

16
state.firstName = 'Jane';
17
// 自动输出: "Full name: Jane Doe"
18

19
state.lastName = 'Smith';
20
// 自动输出: "Full name: Jane Smith"
21

22
// 深层响应式
23
effect(() => {
24
  const pending = state.todos.filter(t => !t.done).length;
25
  console.log(`Pending todos: ${pending}`);
26
});
27
// 立即输出: "Pending todos: 2"
28

29
state.todos[0].done = true;
30
// 自动输出: "Pending todos: 1"

实战二：数据验证框架#

利用 Proxy 的 set trap，可以实现强大的运行时数据验证：

Schema 定义#

1
const Types = {
2
  string: {
3
    validate: v => typeof v === 'string',
4
    message: 'must be a string'
5
  },
6
  number: {
7
    validate: v => typeof v === 'number' && !isNaN(v),
8
    message: 'must be a number'
9
  },
10
  boolean: {
11
    validate: v => typeof v === 'boolean',
12
    message: 'must be a boolean'
13
  },
14
  email: {
15
    validate: v => typeof v === 'string' && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v),
16
    message: 'must be a valid email'
17
  },
18
  url: {
19
    validate: v => {
20
      try { new URL(v); return true; } catch { return false; }
21
    },
22
    message: 'must be a valid URL'
23
  },
24
  array: (itemValidator) => ({
25
    validate: v => Array.isArray(v) && v.every(item => itemValidator.validate(item)),
26
    message: `must be an array of valid items`
27
  }),
28
  oneOf: (...values) => ({
29
    validate: v => values.includes(v),
30
    message: `must be one of: ${values.join(', ')}`
31
  }),
32
  range: (min, max) => ({
33
    validate: v => typeof v === 'number' && v >= min && v <= max,
34
    message: `must be between ${min} and ${max}`
35
  })
36
};

验证 Proxy 工厂#

1
class ValidationError extends Error {
2
  constructor(property, value, message) {
3
    super(`Validation failed for "${property}": ${message} (got ${JSON.stringify(value)})`);
4
    this.property = property;
5
    this.value = value;
6
  }
7
}
8

9
function createValidatedModel(schema, options = {}) {
10
  const { strict = true, onError = 'throw', coerce = false } = options;
11
  const errors = [];
12

13
  const handler = {
14
    set(target, property, value, receiver) {
15
      const rule = schema[property];
16

17
      // 严格模式：不允许设置 schema 中未定义的属性
18
      if (strict && !rule && typeof property === 'string') {
19
        const err = new ValidationError(property, value, 'property not defined in schema');
20
        if (onError === 'throw') throw err;
21
        errors.push(err);
22
        return false;
23
      }
24

25
      if (rule) {
26
        // 类型强制转换
27
        if (coerce && rule.coerce) {
28
          value = rule.coerce(value);
29
        }
30

31
        // 执行所有验证器
32
        const validators = Array.isArray(rule) ? rule : [rule];
33
        for (const validator of validators) {
34
          if (!validator.validate(value)) {
35
            const err = new ValidationError(property, value, validator.message);
36
            if (onError === 'throw') throw err;
37
            errors.push(err);
38
            return false;
39
          }
40
        }
41
      }
42

43
      return Reflect.set(target, property, value, receiver);
44
    },
45

46
    get(target, property, receiver) {
47
      if (property === '__errors') return [...errors];
48
      if (property === '__schema') return schema;
49
      if (property === '__isValid') return errors.length === 0;
50
      return Reflect.get(target, property, receiver);
51
    },
52

53
    deleteProperty(target, property) {
54
      if (strict && schema[property]?.required) {
55
        throw new ValidationError(property, undefined, 'required property cannot be deleted');
56
      }
57
      return Reflect.deleteProperty(target, property);
58
    }
59
  };
60

61
  // 创建初始对象并设置默认值
62
  const initial = {};
63
  for (const [key, rule] of Object.entries(schema)) {
64
    if (rule.default !== undefined) {
65
      initial[key] = rule.default;
66
    }
67
  }
68

69
  return new Proxy(initial, handler);
70
}

使用示例#

1
const user = createValidatedModel({
2
  name: {
3
    validate: v => typeof v === 'string' && v.length >= 2,
4
    message: 'must be a string with at least 2 characters',
5
    required: true
6
  },
7
  age: Types.range(0, 150),
8
  email: Types.email,
9
  role: Types.oneOf('admin', 'user', 'moderator'),
10
  tags: Types.array(Types.string)
11
});
12

13
// 正常赋值
14
user.name = 'Alice';
15
user.age = 30;
16
user.email = 'alice@example.com';
17
user.role = 'admin';
18
user.tags = ['developer', 'blogger'];
19

20
console.log(user.name);  // "Alice"
21
console.log(user.age);   // 30
22

23
// 验证失败
24
try {
25
  user.age = 200; // ValidationError: must be between 0 and 150
26
} catch (e) {
27
  console.error(e.message);
28
}
29

30
try {
31
  user.email = 'not-an-email'; // ValidationError: must be a valid email
32
} catch (e) {
33
  console.error(e.message);
34
}
35

36
try {
37
  user.role = 'superadmin'; // ValidationError: must be one of: admin, user, moderator
38
} catch (e) {
39
  console.error(e.message);
40
}

嵌套验证#

1
function nestedModel(schema) {
2
  return {
3
    validate: v => typeof v === 'object' && v !== null,
4
    message: 'must be an object',
5
    transform: v => createValidatedModel(schema).assign(v)
6
  };
7
}
8

9
// 深度代理版本
10
function deepValidated(schema) {
11
  const handler = {
12
    set(target, property, value, receiver) {
13
      const rule = schema[property];
14

15
      if (rule && typeof value === 'object' && value !== null && rule.schema) {
16
        // 嵌套对象也进行验证代理
17
        value = deepValidated(rule.schema);
18
        Object.assign(value, value);
19
      }
20

21
      if (rule && !rule.validate(value)) {
22
        throw new ValidationError(property, value, rule.message);
23
      }
24

25
      return Reflect.set(target, property, value, receiver);
26
    },
27

28
    get(target, property, receiver) {
29
      return Reflect.get(target, property, receiver);
30
    }
31
  };
32

33
  return new Proxy({}, handler);
34
}

实战三：迷你 ORM 查询构建器#

利用 Proxy 的 get trap 可以实现优雅的链式 API：

1
class QueryBuilder {
2
  #table;
3
  #conditions = [];
4
  #selections = ['*'];
5
  #ordering = [];
6
  #limitVal = null;
7
  #offsetVal = null;
8
  #joins = [];
9

10
  constructor(table) {
11
    this.#table = table;
12
  }
13

14
  select(...fields) {
15
    this.#selections = fields;
16
    return this;
17
  }
18

19
  where(condition, ...params) {
20
    this.#conditions.push({ clause: condition, params });
21
    return this;
22
  }
23

24
  orderBy(field, direction = 'ASC') {
25
    this.#ordering.push(`${field} ${direction}`);
26
    return this;
27
  }
28

29
  limit(n) {
30
    this.#limitVal = n;
31
    return this;
32
  }
33

34
  offset(n) {
35
    this.#offsetVal = n;
36
    return this;
37
  }
38

39
  join(table, on) {
40
    this.#joins.push(`JOIN ${table} ON ${on}`);
41
    return this;
42
  }
43

44
  leftJoin(table, on) {
45
    this.#joins.push(`LEFT JOIN ${table} ON ${on}`);
46
    return this;
47
  }
48

49
  toSQL() {
50
    let sql = `SELECT ${this.#selections.join(', ')} FROM ${this.#table}`;
51

52
    if (this.#joins.length) {
53
      sql += ' ' + this.#joins.join(' ');
54
    }
55

56
    if (this.#conditions.length) {
57
      const where = this.#conditions.map(c => c.clause).join(' AND ');
58
      sql += ` WHERE ${where}`;
59
    }
60

61
    if (this.#ordering.length) {
62
      sql += ` ORDER BY ${this.#ordering.join(', ')}`;
63
    }
64

65
    if (this.#limitVal !== null) {
66
      sql += ` LIMIT ${this.#limitVal}`;
67
    }
68

69
    if (this.#offsetVal !== null) {
70
      sql += ` OFFSET ${this.#offsetVal}`;
71
    }
72

73
    return sql;
74
  }
75

76
  getParams() {
77
    return this.#conditions.flatMap(c => c.params);
78
  }
79
}

用 Proxy 实现魔术方法#

1
function createModel(tableName, columns) {
2
  const model = {
3
    tableName,
4
    columns,
5

6
    query() {
7
      return new QueryBuilder(tableName);
8
    },
9

10
    find(id) {
11
      return new QueryBuilder(tableName)
12
        .where('id = ?', id)
13
        .limit(1);
14
    },
15

16
    all() {
17
      return new QueryBuilder(tableName);
18
    }
19
  };
20

21
  // 使用 Proxy 实现动态 findByXxx 方法
22
  return new Proxy(model, {
23
    get(target, property, receiver) {
24
      if (property in target) {
25
        return Reflect.get(target, property, receiver);
26
      }
27

28
      const propStr = String(property);
29

30
      // findByXxx 动态方法
31
      if (propStr.startsWith('findBy')) {
32
        const field = propStr.slice(6) // 去掉 'findBy'
33
          .replace(/([A-Z])/g, '_$1')  // camelCase → snake_case
34
          .toLowerCase()
35
          .replace(/^_/, '');
36

37
        if (columns.includes(field)) {
38
          return function (value) {
39
            return new QueryBuilder(tableName)
40
              .where(`${field} = ?`, value);
41
          };
42
        }
43
      }
44

45
      // whereXxx 动态条件
46
      if (propStr.startsWith('where')) {
47
        const field = propStr.slice(5)
48
          .replace(/([A-Z])/g, '_$1')
49
          .toLowerCase()
50
          .replace(/^_/, '');
51

52
        return function (operator, value) {
53
          if (value === undefined) {
54
            value = operator;
55
            operator = '=';
56
          }
57
          return new QueryBuilder(tableName)
58
            .where(`${field} ${operator} ?`, value);
59
        };
60
      }
61

62
      return undefined;
63
    }
64
  });
65
}
66

67
// 使用
68
const User = createModel('users', ['id', 'name', 'email', 'age', 'created_at']);
69

70
console.log(User.find(1).toSQL());
71
// SELECT * FROM users WHERE id = ? LIMIT 1
72

73
console.log(User.findByEmail('alice@example.com').toSQL());
74
// SELECT * FROM users WHERE email = ?
75

76
console.log(User.findByName('Alice').orderBy('created_at', 'DESC').toSQL());
77
// SELECT * FROM users WHERE name = ? ORDER BY created_at DESC
78

79
console.log(
80
  User.query()
81
    .select('name', 'email')
82
    .where('age > ?', 18)
83
    .where('name LIKE ?', '%alice%')
84
    .orderBy('name')
85
    .limit(10)
86
    .offset(20)
87
    .toSQL()
88
);
89
// SELECT name, email FROM users WHERE age > ? AND name LIKE ? ORDER BY name LIMIT 10 OFFSET 20

用 Proxy 实现属性变更追踪（Dirty Checking）#

1
function trackable(obj) {
2
  const original = { ...obj };
3
  const changes = new Map();
4

5
  const proxy = new Proxy(obj, {
6
    set(target, property, value, receiver) {
7
      const oldValue = target[property];
8

9
      if (oldValue !== value) {
10
        if (original[property] === value) {
11
          changes.delete(property);
12
        } else {
13
          changes.set(property, { old: oldValue, new: value });
14
        }
15
      }
16

17
      return Reflect.set(target, property, value, receiver);
18
    },
19

20
    get(target, property, receiver) {
21
      if (property === '$isDirty') return changes.size > 0;
22
      if (property === '$changes') return Object.fromEntries(changes);
23
      if (property === '$reset') {
24
        return () => {
25
          for (const [key, val] of Object.entries(original)) {
26
            target[key] = val;
27
          }
28
          changes.clear();
29
        };
30
      }
31
      if (property === '$commit') {
32
        return () => {
33
          Object.assign(original, target);
34
          changes.clear();
35
        };
36
      }
37

38
      return Reflect.get(target, property, receiver);
39
    }
40
  });
41

42
  return proxy;
43
}
44

45
// 使用
46
const record = trackable({ name: 'Alice', age: 30, email: 'alice@test.com' });
47

48
record.name = 'Bob';
49
record.age = 25;
50

51
console.log(record.$isDirty); // true
52
console.log(record.$changes);
53
// { name: { old: 'Alice', new: 'Bob' }, age: { old: 30, new: 25 } }
54

55
record.name = 'Alice'; // 恢复原值
56
console.log(record.$changes);
57
// { age: { old: 30, new: 25 } } — name 的变更自动清除
58

59
record.$reset();
60
console.log(record.name); // "Alice"
61
console.log(record.age);  // 30
62
console.log(record.$isDirty); // false

高级技巧#

可撤销代理（Revocable Proxy）#

1
function createSecureSession(data, ttl = 5000) {
2
  const { proxy, revoke } = Proxy.revocable(data, {
3
    get(target, property, receiver) {
4
      console.log(`[SESSION] Reading ${String(property)}`);
5
      return Reflect.get(target, property, receiver);
6
    }
7
  });
8

9
  // TTL 过期后自动撤销
10
  setTimeout(() => {
11
    revoke();
12
    console.log('[SESSION] Expired and revoked');
13
  }, ttl);
14

15
  return { session: proxy, revoke };
16
}
17

18
const { session } = createSecureSession({ token: 'abc123', user: 'admin' }, 3000);
19

20
console.log(session.token); // [SESSION] Reading token → "abc123"
21

22
// 3 秒后...
23
// [SESSION] Expired and revoked
24
// session.token → TypeError: Cannot perform 'get' on a proxy that has been revoked

负索引数组#

1
function negativeArray(arr) {
2
  return new Proxy(arr, {
3
    get(target, property, receiver) {
4
      const index = Number(property);
5
      if (Number.isInteger(index) && index < 0) {
6
        property = String(target.length + index);
7
      }
8
      return Reflect.get(target, property, receiver);
9
    },
10
    set(target, property, value, receiver) {
11
      const index = Number(property);
12
      if (Number.isInteger(index) && index < 0) {
13
        property = String(target.length + index);
14
      }
15
      return Reflect.set(target, property, value, receiver);
16
    }
17
  });
18
}
19

20
const arr = negativeArray([1, 2, 3, 4, 5]);
21
console.log(arr[-1]); // 5
22
console.log(arr[-2]); // 4
23
arr[-1] = 99;
24
console.log(arr); // [1, 2, 3, 4, 99]

不可变对象（Immutable Object）#

1
function immutable(obj) {
2
  return new Proxy(obj, {
3
    set() {
4
      throw new TypeError('Cannot modify immutable object');
5
    },
6
    deleteProperty() {
7
      throw new TypeError('Cannot delete from immutable object');
8
    },
9
    defineProperty() {
10
      throw new TypeError('Cannot define property on immutable object');
11
    },
12
    setPrototypeOf() {
13
      throw new TypeError('Cannot change prototype of immutable object');
14
    },
15
    get(target, property, receiver) {
16
      const value = Reflect.get(target, property, receiver);
17
      // 深层不可变
18
      if (value !== null && typeof value === 'object') {
19
        return immutable(value);
20
      }
21
      return value;
22
    }
23
  });
24
}
25

26
const config = immutable({
27
  db: { host: 'localhost', port: 5432 },
28
  cache: { ttl: 3600 }
29
});
30

31
console.log(config.db.host); // "localhost"
32

33
try {
34
  config.db.host = 'remote'; // TypeError: Cannot modify immutable object
35
} catch (e) {
36
  console.error(e.message);
37
}

性能考量#

Proxy 虽然强大，但有性能成本：

每次属性访问都经过 trap：在热路径上，Proxy 比直接属性访问慢 5-10 倍
无法被 V8 内联优化：引擎无法对 Proxy 对象进行常规的 hidden class 优化
深层代理的递归开销：每次读取嵌套对象都会创建新的 Proxy（Vue 3 通过缓存优化了这个问题）

优化建议：

1
// ❌ 不要在性能关键路径上使用 Proxy
2
for (let i = 0; i < 1000000; i++) {
3
  sum += proxyObj.value; // 每次都经过 get trap
4
}
5

6
// ✅ 先解引用，再循环
7
const value = proxyObj.value;
8
for (let i = 0; i < 1000000; i++) {
9
  sum += value;
10
}
11

12
// ✅ 缓存深层代理
13
const reactiveCache = new WeakMap();
14
function reactive(obj) {
15
  if (reactiveCache.has(obj)) return reactiveCache.get(obj);
16
  const proxy = new Proxy(obj, handler);
17
  reactiveCache.set(obj, proxy);
18
  return proxy;
19
}

Proxy 的不变量（Invariants）#

JavaScript 引擎会强制执行某些不变量，防止 Proxy 违反语言基本约定：

1
const obj = {};
2
Object.defineProperty(obj, 'x', {
3
  value: 42,
4
  writable: false,
5
  configurable: false
6
});
7

8
const proxy = new Proxy(obj, {
9
  get(target, property) {
10
    return 100; // 试图返回与实际不同的值
11
  }
12
});
13

14
// TypeError: 'get' on proxy: property 'x' is a read-only and non-configurable
15
// data property on the proxy target but the proxy did not return its actual value
16
console.log(proxy.x);

这些不变量确保了即使使用 Proxy，JavaScript 的核心语义也不会被破坏。

总结#

Proxy 是 JavaScript 元编程的终极工具：

响应式系统：拦截读写操作，实现自动依赖收集和更新触发
数据验证：在赋值时自动校验，保证数据完整性
ORM/查询构建：通过 get trap 实现动态方法和魔术属性
变更追踪：自动记录对象修改历史
访问控制：实现只读、可撤销、有时效的对象访问

配合 Reflect API，你可以在保持语言语义正确的前提下，对对象的行为进行任意定制。理解 Proxy 的 13 个 trap 和它们的不变量约束，是成为 JavaScript 高级开发者的必备技能。

音乐

音乐

前言#