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

Proxy 对象的强大拦截代理功能:利用 Proxy 对象进行数据验证和安全保护_第1张图片

文章目录

    • 1. 什么是`Proxy`对象
    • 2. `Proxy`的基本语法
    • 3. `Proxy`的拦截器(Handler)
    • 4. 常用的拦截方法和功能
    • 5. 使用`Proxy`的实例
    • 6. `Proxy`的应用场景
      • 数据验证和保护
      • 日志记录
      • 数据绑定和观察
    • 附录:「简历必备」前后端实战项目(推荐:⭐️⭐️⭐️⭐️⭐️)

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

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

1. 什么是Proxy对象

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

2. Proxy的基本语法

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

3. Proxy的拦截器(Handler)

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

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

  • get(target, property, receiver): 拦截对目标对象属性的读取操作。
  • set(target, property, value, receiver): 拦截对目标对象属性的赋值操作。
  • apply(target, thisArg, argumentsList): 拦截对目标对象的函数调用。
  • construct(target, argumentsList, newTarget): 拦截对目标对象的构造函数调用。
  • 其他拦截方法包括deletePropertyhasgetOwnPropertyDescriptor等。
// 请补全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,并定义了getsetdeleteProperty拦截器方法。在每个拦截方法中,我们通过记录日志的方式,将属性的访问、赋值和删除操作输出到控制台。然后,我们执行对代理对象的操作,触发相应的拦截器方法。

通过使用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对象作为数据对象,其中包含了nameage属性。然后,我们创建了一个观察者对象observer,其中包含了notify方法,用于在数据变化时进行通知。

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

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

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

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

附录:「简历必备」前后端实战项目(推荐:⭐️⭐️⭐️⭐️⭐️)

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

你可能感兴趣的:(安全)