JavaScript的Proxy可以做哪些有意思的事儿

2023年5月27日上午4:06 • JavaScript

下面是详细讲解 JavaScript 的 Proxy 可以做哪些有意思的事儿的完整攻略：

什么是JavaScript Proxy

Proxy 是 ES6 中的一个新特性，用于在对象之前设立一个“拦截器”，对该对象的访问进行过滤和改写，提供了一种机制来对对象的访问进行监视和控制。

Proxy 最常见的用途之一是在对象上设置隐藏属性或包装器，它可以通过重写 getter/setter 和增加钩子函数，来控制对象属性的的访问方式。在这个过程中，代理对于对象的真实访问是透明的。

Proxy 能做什么

1. 数据验证

可以利用 Proxy 对数据进行验证，比如使用 Proxy 拦截对象的 set 和 get 方法，来检测对象属性值的合法性。下面是一个示例代码：

const handler = {
  set(target, property, value) {
    if (property === 'age') {
      if (!Number.isInteger(value)) {
        throw new TypeError('The age is not an integer');
      }
      if (value > 150 || value < 0) {
        throw new RangeError('The age is invalid');
      }
    }
    target[property] = value;
    return true;
  }
};

const person = new Proxy({}, handler);
person.name = 'Jack';
person.age = 30;
console.log(person); // { name: "Jack", age: 30 }
person.age = 170;  // throw new RangeError('The age is invalid');
person.age = 'fourty'; // throw new TypeError('The age is not an integer');

上面的代码中，当设置 person 对象中的 age 属性值时，会首先进入 handler 的 set 方法，在 set 方法中检测 age 属性值是否符合条件，如果不符合条件就抛出错误，如果符合条件就将 age 属性值赋值给对象，在这个过程中代理对于对象的访问是透明的。

2. 属性代理

使用 Proxy 代理对象的时候，可以对属性进行代理，进行操作。下面是一个示例代码：

let obj = {
    name: 'Tom',
    age: 18
};

// 将源对象 obj 代理到代理对象 proxy 上
let proxy = new Proxy(obj, {
    get(target, key) {
        console.log('通过代理获取属性值：' + key);
        return target[key];
    },

    set(target, key, value) {
        console.log(`通过代理设置属性值：${key}=${value}`);
        target[key] = value;
        return true;
    }
});

console.log(proxy.name); // 通过代理获取属性值：name, Tom
proxy.age = 20; // 通过代理设置属性值：age=20
console.log(obj.age); // 20

上面的代码中，通过使用 Proxy 对象代理 obj，就可以在获取属性值的时候，自定义一个操作，这个操作会在获取属性值的时候自动执行。同样的，对于属性值的修改，可以在代理的 set 方法中添加操作，来代理操作。

常用钩子函数

下面是 Proxy 中常用的钩子函数和作用：

get(target, key, receiver)：拦截对象属性的读取，代理获取对象属性值时触发。
set(target, key, value, receiver)：拦截对象属性的修改，代理对象属性值设置时触发。
has(target, key)：拦截 for in 循环和 in 操作符时的行为。
defineProperty(target, key, propertyDescriptor)：代理Object.defineProperty()操作。
deleteProperty(target, key)：拦截对象属性的删除操作。
ownKeys(target)：拦截 Object.getOwnPropertyNames()、Object.getOwnPropertySymbols()、Object.keys()以及 for...in循环中的收集封装对象自己的键。
apply(target, thisArg, argumentsList)：拦截函数的调用、call 和 apply 操作。
construct(target, argumentsList, newTarget)：拦截 new 操作符，用于为一个对象实例化时执行一些操作。