ES6 中的 Proxy 全面讲解

ES6中Proxy全面解析

最新推荐文章于 2025-09-28 11:14:05 发布

原创最新推荐文章于 2025-09-28 11:14:05 发布 · 929 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#es6 #前端 #ecmascript #proxy

ES6 专栏收录该内容

6 篇文章

订阅专栏

一、什么是 Proxy

二、常用的拦截操作（handler traps）

1. get —— 拦截对象属性的读取

2. set —— 拦截对象属性的赋值

3. has —— 拦截 in 操作符

4. deleteProperty —— 拦截 delete 操作

5. apply —— 拦截函数调用

6. construct —— 拦截 new 操作

三、Proxy 的应用场景

四、Proxy 与 Object.defineProperty 的区别

一、什么是 Proxy

Proxy 是 ES6 引入的一个强大功能，意思是“代理”。它可以用来拦截对象的操作，并在操作时进行自定义的逻辑处理。

你可以把 Proxy 理解成：
👉 在对象和 外部访问者 之间加了一层“代理层”，所有对对象的操作都会先经过 Proxy，从而让我们有机会“改写”这些操作。

语法如下：

let proxy = new Proxy(target, handler);

target：要代理的对象（可以是对象、数组、函数等）
handler：包含拦截方法的对象，不同的方法对应不同的拦截操作

二、常用的拦截操作（handler traps）

1. `get` —— 拦截对象属性的读取

const user = {
  name: "Tom",
  age: 18
};

const proxy = new Proxy(user, {
  get(target, prop) {
    if (prop === "age") {
      return target[prop] + " 岁"; 
    }
    return target[prop];
  }
});

console.log(proxy.name); // Tom
console.log(proxy.age);  // 18 岁

👉 在读取 age 时被拦截，返回了一个自定义的字符串。

2. `set` —— 拦截对象属性的赋值

const user = {};

const proxy = new Proxy(user, {
  set(target, prop, value) {
    if (prop === "age") {
      if (typeof value !== "number") {
        throw new TypeError("年龄必须是数字！");
      }
    }
    target[prop] = value;
    return true; // 必须返回 true 表示赋值成功
  }
});

proxy.age = 20; 
console.log(proxy.age); // 20

proxy.age = "abc"; // 报错：年龄必须是数字！

👉 可以在设置属性时做数据校验，非常适合做表单验证。

3. `has` —— 拦截 `in` 操作符

const user = { name: "Tom", password: "123456" };

const proxy = new Proxy(user, {
  has(target, prop) {
    if (prop === "password") {
      return false; // 隐藏 password 属性
    }
    return prop in target;
  }
});

console.log("name" in proxy);     // true
console.log("password" in proxy); // false

👉 可以用来隐藏敏感信息。

4. `deleteProperty` —— 拦截 `delete` 操作

const user = { name: "Tom" };

const proxy = new Proxy(user, {
  deleteProperty(target, prop) {
    if (prop === "name") {
      console.log("name 属性不能被删除！");
      return false;
    }
    return true;
  }
});

delete proxy.name; // name 属性不能被删除！
console.log(proxy.name); // Tom

5. `apply` —— 拦截函数调用

function sum(a, b) {
  return a + b;
}

const proxy = new Proxy(sum, {
  apply(target, thisArg, args) {
    console.log("拦截函数调用，参数是：", args);
    return target(...args) * 2; // 返回值改为原函数结果的两倍
  }
});

console.log(proxy(1, 2)); // 6

6. `construct` —— 拦截 `new` 操作

class Person {
  constructor(name) {
    this.name = name;
  }
}

const ProxyPerson = new Proxy(Person, {
  construct(target, args) {
    console.log("正在创建实例，参数：", args);
    return new target(...args);
  }
});

const p = new ProxyPerson("Tom");
// 正在创建实例，参数： [ 'Tom' ]