ES6中如何用Proxy拦截对象操作-js教程-PHP中文网

ES6中如何用Proxy拦截对象操作

煙雲

发布： 2025-07-09 16:32:01

原创

231人浏览过

proxy 在 es6 中是一个“门卫”，用于拦截并自定义对象的基本操作。1. get 拦截属性读取，可记录日志或修改返回值；2. set 拦截属性设置，可用于数据验证；3. has 拦截 in 操作符，控制属性存在检查；4. deleteproperty 拦截 delete 操作符，限制属性删除；5. ownkeys 拦截获取属性键，控制返回的属性名；6. apply 拦截函数调用，可记录调用信息或修改返回结果；7. construct 拦截 new 操作符，控制实例创建。proxy 可应用于数据验证、日志记录、权限控制、数据绑定、缓存等场景。reflect 提供与 proxy trap 对应的方法，用于执行默认行为。使用时需注意性能、兼容性、循环引用和调试问题。

ES6中如何用Proxy拦截对象操作

Proxy 在 ES6 中就像一个“门卫”，你可以用它来拦截并自定义对象的基本操作，比如读取属性、设置属性、删除属性等等。它提供了一种强大的元编程能力，让你可以在对象操作前后做一些事情，而无需修改对象本身。

Proxy 对象通过 new Proxy(target, handler) 创建，其中 target 是你要代理的对象，handler 是一个对象，包含了各种拦截方法（trap）。

拦截对象操作，核心在于定义 handler 对象中的各种 trap。

解决方案（直接输出解决方案即可）

以下是一些常用的 trap 以及如何使用 Proxy 来拦截对象操作的例子：

1. get(target, property, receiver)：拦截属性读取

const target = {
  name: '张三',
  age: 30
};

const handler = {
  get: function(target, property, receiver) {
    console.log(`正在读取属性：${property}`);
    if (property === 'age') {
      return target[property] + 5; // 拦截并修改 age 属性的返回值
    }
    return Reflect.get(target, property, receiver); // 默认行为
  }
};

const proxy = new Proxy(target, handler);

console.log(proxy.name); // 输出：正在读取属性：name  张三
console.log(proxy.age);  // 输出：正在读取属性：age  35

登录后复制

2. set(target, property, value, receiver)：拦截属性设置

const target = {};

const handler = {
  set: function(target, property, value, receiver) {
    console.log(`正在设置属性：${property}，值为：${value}`);
    if (typeof value !== 'number') {
      throw new TypeError('属性值必须是数字');
    }
    return Reflect.set(target, property, value, receiver); // 默认行为
  }
};

const proxy = new Proxy(target, handler);

proxy.age = 30; // 输出：正在设置属性：age，值为：30
proxy.name = '李四'; // 报错：TypeError: 属性值必须是数字

登录后复制

3. has(target, property)：拦截 in 操作符

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

const handler = {
  has: function(target, property) {
    console.log(`正在检查属性：${property} 是否存在`);
    if (property === 'age') {
      return false; // 拦截 age 属性的 in 操作
    }
    return Reflect.has(target, property); // 默认行为
  }
};

const proxy = new Proxy(target, handler);

console.log('name' in proxy); // 输出：正在检查属性：name 是否存在  true
console.log('age' in proxy);  // 输出：正在检查属性：age 是否存在  false

登录后复制

4. deleteProperty(target, property)：拦截 delete 操作符

ChatX翻译

最实用、可靠的社交类实时翻译工具。支持全球主流的20+款社交软件的聊天应用，全球200+语言随意切换。让您彻底告别复制粘贴的翻译模式，与世界各地高效连接！

查看详情

const target = {
  name: '张三',
  age: 30
};

const handler = {
  deleteProperty: function(target, property) {
    console.log(`正在删除属性：${property}`);
    if (property === 'name') {
      return false; // 阻止删除 name 属性
    }
    return Reflect.deleteProperty(target, property); // 默认行为
  }
};

const proxy = new Proxy(target, handler);

delete proxy.name; // 输出：正在删除属性：name  返回 false
delete proxy.age;  // 输出：正在删除属性：age  返回 true

console.log(target); // 输出：{ age: 30 } (name 属性仍然存在)

登录后复制

5. ownKeys(target)：拦截 Object.getOwnPropertyNames() 和 Object.getOwnPropertySymbols()

const target = {
  name: '张三',
  age: 30,
  [Symbol('secret')]: '隐藏信息'
};

const handler = {
  ownKeys: function(target) {
    console.log('正在获取所有属性键');
    return ['name', 'age']; // 只返回 name 和 age 属性
  }
};

const proxy = new Proxy(target, handler);

console.log(Object.getOwnPropertyNames(proxy)); // 输出：['name', 'age']
console.log(Object.getOwnPropertySymbols(proxy)); // 输出：[]

登录后复制

6. apply(target, thisArg, argumentsList)：拦截函数调用

const target = function() {
  console.log('函数被调用了');
  return 'Hello';
};

const handler = {
  apply: function(target, thisArg, argumentsList) {
    console.log('正在拦截函数调用');
    console.log('thisArg:', thisArg);
    console.log('argumentsList:', argumentsList);
    return `拦截器修改后的结果：${target.apply(thisArg, argumentsList)}`;
  }
};

const proxy = new Proxy(target, handler);

console.log(proxy()); // 输出：正在拦截函数调用  thisArg: undefined  argumentsList: []  函数被调用了  拦截器修改后的结果：Hello

登录后复制

7. construct(target, argumentsList, newTarget)：拦截 new 操作符

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

const handler = {
  construct: function(target, argumentsList, newTarget) {
    console.log('正在拦截 new 操作');
    console.log('argumentsList:', argumentsList);
    return new target(...argumentsList); // 默认行为
  }
};

const proxy = new Proxy(Person, handler);

const person = new proxy('张三', 30); // 输出：正在拦截 new 操作  argumentsList: ['张三', 30]

console.log(person); // 输出：Person { name: '张三', age: 30 }

登录后复制