Proxy 对象的强大拦截代理功能：利用 Proxy 对象进行数据验证和安全保护

「作者简介」：不知名十八线技术博主
「推荐主页」：阿珊和她的猫
「简历必备」前后端实战项目（推荐：⭐️⭐️⭐️⭐️⭐️）

• Vue.js 和 Egg.js 开发企业级健康管理项目
• 带你从入门到实战全面掌握 uni-app

1. 什么是Proxy对象

• Proxy是JavaScript中的内置对象，可以用来定义自定义的操作（拦截器）以拦截对目标对象的访问。它提供了一种机制，可以拦截并自定义各种操作，如属性访问、函数调用、构造函数调用等。

2. Proxy的基本语法

• Proxy的构造函数接受两个参数：目标对象（被代理的对象）和一个处理器对象（用于定义拦截器）。
• 例如：const proxy = new Proxy(target, handler);

3. Proxy的拦截器（Handler）

• 拦截器是一个包含各种拦截方法的对象，用于定义在代理对象上执行的操作。
• 常用的拦截方法包括：get、set、apply、construct等。
• 拦截方法会在对代理对象进行对应操作时自动触发。

4. 常用的拦截方法和功能

• get(target, property, receiver): 拦截对目标对象属性的读取操作。
• set(target, property, value, receiver): 拦截对目标对象属性的赋值操作。
• apply(target, thisArg, argumentsList): 拦截对目标对象的函数调用。
• construct(target, argumentsList, newTarget): 拦截对目标对象的构造函数调用。
• 其他拦截方法包括deleteProperty、has、getOwnPropertyDescriptor等。

// 请补全JavaScript代码，请给[参数对象]添加[拦截代理功能]并返回这个代理
// 要求每当通过代理调用该对象拥有的属性时，"count"值加1，否则减1。
let count = 0
const _proxy = object => {
    // 补全代码
    let proxy = new Proxy(object,{
        get:function(target,propKey) {
            if(propKey in target) {
                count++
            } else {
                count--
            }
        }
    })
    return proxy
    
}

5. 使用Proxy的实例

• 通过定义拦截器对象的各种拦截方法来实现自定义的代理行为。
• 可以使用Reflect对象中对应的方法来执行默认行为或对目标对象进行操作。

6. Proxy的应用场景

数据验证和保护

在属性访问和赋值操作中验证数据的合法性。

下面是一个简单的示例代码，演示如何使用Proxy对象进行数据验证和保护，在属性访问和赋值操作中验证数据的合法性：

// 定义待验证的对象
const user = {
  name: '',
  age: 0
};

// 创建代理对象
const userProxy = new Proxy(user, {
  set(target, property, value) {
    // 进行数据合法性验证
    if (property === 'name') {
      if (typeof value !== 'string' || value === '') {
        throw new Error('姓名必须是非空字符串');
      }
    } else if (property === 'age') {
      if (typeof value !== 'number' || value < 0 || !Number.isInteger(value)) {
        throw new Error('年龄必须是非负整数');
      }
    }

    // 合法性验证通过，设置属性值
    target[property] = value;
    return true;
  }
});

// 使用代理对象进行属性访问和赋值
userProxy.name = 'John';
console.log(userProxy.name); // 输出: "John"

userProxy.age = 25;
console.log(userProxy.age); // 输出: 25

// 非法赋值会触发异常
try {
  userProxy.name = '';
} catch (error) {
  console.log(error.message); // 输出: "姓名必须是非空字符串"
}

try {
  userProxy.age = '30';
} catch (error) {
  console.log(error.message); // 输出: "年龄必须是非负整数"
}

在上面的示例中，我们创建了一个user对象作为待验证的数据对象。然后，我们使用Proxy对象创建了一个代理userProxy，并定义了set拦截器方法。在set方法中，我们根据属性名称对值进行验证，并抛出错误以拒绝非法赋值。然后，我们根据验证的结果设置属性的值。

在使用代理对象userProxy进行属性访问和赋值时，如果违反了数据合法性验证规则，将会抛出错误。否则，将会设置属性的值并正常输出。通过使用Proxy对象，我们可以轻松地进行数据验证和保护，确保数据的合法性和安全性。

日志记录

拦截对对象的操作以记录日志。

下面是一个简单的示例代码，演示如何使用Proxy对象来拦截对对象的操作以记录日志：

// 定义待记录日志的对象
const person = {
  name: 'John',
  age: 30
};

// 创建代理对象
const personProxy = new Proxy(person, {
  get(target, property) {
    // 记录属性访问日志
    console.log(`访问属性: ${property}`);
    
    // 返回属性值
    return target[property];
  },
  set(target, property, value) {
    // 记录属性赋值日志
    console.log(`设置属性: ${property}，值: ${value}`);

    // 设置属性值
    target[property] = value;
    return true;
  },
  deleteProperty(target, property) {
    // 记录属性删除日志
    console.log(`删除属性: ${property}`);

    // 删除属性
    delete target[property];
    return true;
  }
});

// 使用代理对象进行属性访问、赋值和删除
console.log(personProxy.name); // 输出：访问属性: name -> "John"

personProxy.age = 35; // 输出：设置属性: age，值: 35
console.log(personProxy.age); // 输出：访问属性: age -> 35

delete personProxy.age; // 输出：删除属性: age
console.log(personProxy.age); // 输出：访问属性: age -> undefined

在上面的示例中，我们创建了一个person对象作为待记录日志的对象。然后，我们使用Proxy对象创建了一个代理personProxy，并定义了get、set和deleteProperty拦截器方法。在每个拦截方法中，我们通过记录日志的方式，将属性的访问、赋值和删除操作输出到控制台。然后，我们执行对代理对象的操作，触发相应的拦截器方法。

通过使用Proxy对象，我们可以轻松地拦截对对象的操作，从而记录日志或执行其他定制的行为。这样可以帮助我们了解对象的使用情况，进行调试和监控。

数据绑定和观察

通过拦截器实现数据绑定和观察模式。

下面是一个简单的示例代码，演示如何使用Proxy对象通过拦截器实现数据绑定和观察模式：

// 创建数据对象
const data = {
  name: 'John',
  age: 30
};

// 创建观察者对象，用于监听数据变化
const observer = {
  notify(target, property) {
    console.log(`属性 ${property} 发生变化，新值为: ${target[property]}`);
  }
};

// 创建代理对象
const dataProxy = new Proxy(data, {
  set(target, property, value) {
    // 设置属性值
    target[property] = value;

    // 通知观察者属性变化
    observer.notify(target, property);

    return true;
  }
});

// 修改代理对象的属性值
dataProxy.name = 'Alice'; // 输出：属性 name 发生变化，新值为: Alice
dataProxy.age = 35; // 输出：属性 age 发生变化，新值为: 35

在上面的示例中，我们首先创建了一个data对象作为数据对象，其中包含了name和age属性。然后，我们创建了一个观察者对象observer，其中包含了notify方法，用于在数据变化时进行通知。

接下来，我们通过创建dataProxy代理对象，并在其set拦截器方法中进行了如下操作：

• 设置属性值：将传入的值赋给目标对象的对应属性。
• 通知观察者：通过调用观察者对象的notify方法，传入目标对象和属性名称，来通知观察者数据发生变化。

最后，我们通过修改代理对象的属性值，触发拦截器中的操作并触发观察者的通知。

通过使用Proxy对象，我们可以轻松地通过拦截器实现数据绑定和观察模式。在修改数据时，我们可以自动通知观察者，并做出相应的响应。这样可以实现数据与界面的自动同步、实时更新等功能。

附录：「简历必备」前后端实战项目（推荐：⭐️⭐️⭐️⭐️⭐️）

Vue.js 和 Egg.js 开发企业级健康管理项目
带你从入门到实战全面掌握 uni-app