[5-3] ES6+ 高频新特性 · 对象的扩展与元编程 (Metaprogramming)

所属板块：5. ES6+ 高频新特性

记录日期：2026-03-xx
更新：遇到对象扩展或 Proxy 相关题（尤其是 Vue3 响应式）时补充

1. 对象字面量增强（写法更简洁）

ES6 为对象字面量提供了三项语法糖：

1. 属性简写（Property Shorthand）

   const name = "张三";
   const age = 18;
   const person = { name, age };   // 等价于 { name: name, age: age }
   

2. 方法简写（Method Shorthand）

   const obj = {
     say() { console.log("hello"); }   // 省略 : function
   };
   

3. 计算属性名（Computed Property Names）

   const key = "name";
   const obj = {
     [key]: "张三",          // 动态 key
     [`${key}2`]: "李四"
   };
   

2. 展开语法（Spread Syntax ...）：浅拷贝与合并神器

// 数组展开
const arr1 = [1, 2];
const arr2 = [...arr1, 3, 4];   // [1, 2, 3, 4]

// 对象展开（浅拷贝 + 合并）
const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3, b: 999 };   // { a: 1, b: 999, c: 3 }

// 注意：是浅拷贝，嵌套对象仍共享引用

实际场景：

• 快速克隆对象/数组
• 函数参数传递（代替 apply）
• React/Vue 中更新状态（immutable 更新）

3. Proxy 与 Reflect：元编程双子星（Vue3 响应式核心）

Proxy：可以拦截并自定义对象的基本操作（共 13 种陷阱）。

const target = { name: "张三" };

const p = new Proxy(target, {
  get(obj, key) {
    console.log(`读取了 ${key}`);
    return obj[key];
  },
  set(obj, key, value) {
    console.log(`设置了 ${key} = ${value}`);
    obj[key] = value;
    return true;
  }
});

p.age = 18;   // 触发 set
console.log(p.name);   // 触发 get

为什么 Vue3 用 Proxy 取代 Object.defineProperty？

• defineProperty 只能监听已有属性，无法监听新增/删除属性
• 无法原生监听数组索引和 length 变化（Vue2 只能重写数组原型方法）
• Proxy 直接代理整个对象，性能更好，支持更多操作

Reflect：把 Object 上的内部方法“反射”出来，返回布尔值（更安全）。

在 Proxy 拦截器中必须使用 Reflect：

const handler = {
  get(target, key, receiver) {
    return Reflect.get(target, key, receiver);   // 保证 this 正确
  }
};

为什么一定要 Reflect？

• 保持正确的 this 指向（尤其在继承或 getter 时）
• 操作失败时返回 false 而不是抛异常，更可控

4. 小结 & 复习时的“元编程视角”

• 对象字面量增强 + 展开语法 → 日常开发效率提升
• Proxy + Reflect → 前端框架响应式系统的底层利器（Vue3、Pinia 等都在用）
• [5-1] 数据结构 + [5-2] 函数进化 + 本文的元编程，共同构成了 ES6+ 的“现代化兵器库”

下一篇文章会进入 [5-4]：模块化标准（ES Module vs CommonJS 的终极对比 + 动态导入）——这是工程化与 Tree-Shaking 的基础。

返回总目录：戳这里