如何在 ECMAScript 2016 中使用 Proxy 对象进行数据验证与保护-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常需要对数据进行验证和保护，以保证数据的完整性和安全性。而 Javascript 中的 Proxy 对象可以帮助我们实现这些功能。本文将介绍如何使用 ECMAScript 2016 中的 Proxy 对象进行数据验证与保护，包括 Proxy 对象的基本使用、代理陷阱函数的实现、以及一些在实际开发中的应用。

Proxy 对象的基本使用

Proxy 对象是 ES6 中新增的一个内置对象，它可以用来拦截并改变 Javascript 对象的默认操作。例如，我们可以通过 Proxy 对象拦截一个对象的读取、设置、删除等操作，从而实现对这些操作的控制和限制。

在使用 Proxy 对象之前，我们需要先创建一个目标对象（也就是被代理的对象），然后再将这个目标对象传递给 Proxy 构造函数，生成一个 Proxy 实例。下面是一个简单的示例，演示如何创建一个空对象的代理：

const targetObject = {};
const handler = {};

const proxyObject = new Proxy(targetObject, handler);

上面的代码创建了一个名为 proxyObject 的对象代理，它将目标对象 targetObject 进行了代理。handler 参数是一个空对象，表示我们暂不进行任何拦截或转发操作。现在，我们来看一下如何通过代理对象拦截读取操作。下面是一个示例：

// javascriptcn.com 代码示例
const targetObject = { name: 'Alice', age: 25 };
const handler = {
  get: function(target, property) {
    console.log('Reading property:', property);
    return target[property];
  }
};

const proxyObject = new Proxy(targetObject, handler);
console.log(proxyObject.name);

上面代码中的 handler 对象包含了一个名为 “get” 的代理陷阱函数，用于拦截读取操作。当我们通过代理对象 proxyObject 来读取 name 属性时，代理对象就会调用 get 函数，并将读取的属性名传入这个函数中。注意，这里的 target 参数表示了被代理的目标对象，也就是 targetObject 对象本身。最终，get 函数将返回目标对象中对应属性的值，即 'Alice'。

类似地，我们也可以通过 Proxy 对象拦截对象的设置、删除等操作。只需将代理陷阱函数设置给 handler 对象的相应属性即可。

代理陷阱函数的实现

在上面的示例中，我们演示了如何通过代理对象拦截读取操作。但在实际开发中，我们可能还需要拦截其它操作，比如设置操作、删除操作、枚举操作等。这时，我们就需要使用代理陷阱函数了。代理陷阱函数是一个函数，用于拦截并处理代理对象的各种操作。下面是一个代理陷阱函数的基本结构：

// javascriptcn.com 代码示例
const handler = {
  get: function(target, property, receiver) {
    // 拦截读取操作
  },
  set: function(target, property, value, receiver) {
    // 拦截设置操作
  },
  deleteProperty: function(target, property) {
    // 拦截删除操作
  },
  // 其它代理陷阱函数
};

在上面的代码中，我们定义了一个包含多个代理陷阱函数的 handler 对象。每个代理陷阱函数都有一定的参数和返回值，用于实现不同类型的操作拦截和处理。下面我们分别介绍一下各个代理陷阱函数的用途。

get(target, property, receiver)

该陷阱函数用于拦截读取操作。当我们通过代理对象读取某个属性或方法时，该函数就会被调用。该陷阱函数有三个参数：

target：被代理的目标对象；
property：要读取的属性或方法名；
receiver：代理对象本身（或其继承者）。

示例：

// javascriptcn.com 代码示例
const targetObject = { name: 'Alice', age: 25 };
const handler = {
  get: function(target, property, receiver) {
    console.log('Reading property:', property);
    return target[property];
  }
};
const proxyObject = new Proxy(targetObject, handler);

console.log(proxyObject.name);

执行结果是：

Reading property: name
Alice

set(target, property, value, receiver)

该陷阱函数用于拦截设置操作。当我们通过代理对象设置某个属性时，该函数就会被调用。该陷阱函数有四个参数：

target：被代理的目标对象；
property：要设置的属性名；
value：要设置的属性值；
receiver：代理对象本身（或其继承者）。

示例：

// javascriptcn.com 代码示例
const targetObject = { name: 'Alice', age: 25 };
const handler = {
  set: function(target, property, value, receiver) {
    console.log('Setting property:', property, 'to', value);
    target[property] = value;
    return true;
  }
};
const proxyObject = new Proxy(targetObject, handler);

proxyObject.age = 26;
console.log(targetObject.age);

执行结果是：

Setting property: age to 26
26

deleteProperty(target, property)

该陷阱函数用于拦截删除操作。当我们通过代理对象删除某个属性时，该函数就会被调用。该陷阱函数有两个参数：

target：被代理的目标对象；
property：要删除的属性名。

示例：

// javascriptcn.com 代码示例
const targetObject = { name: 'Alice', age: 25 };
const handler = {
  deleteProperty: function(target, property) {
    console.log('Deleting property:', property);
    delete target[property];
    return true;
  }
};
const proxyObject = new Proxy(targetObject, handler);

delete proxyObject.age;
console.log(targetObject);

执行结果是：

Deleting property: age
{ name: 'Alice' }

其它代理陷阱函数

除了上述的三个代理陷阱函数，ES6 还提供了其它许多可以拦截代理对象操作的陷阱函数，包括：

apply(target, thisArg, args)：拦截函数的调用操作。
construct(target, args, newTarget)：拦截类的构造函数的调用操作。
has(target, property)：拦截 in 操作符的操作。
ownKeys(target)：拦截 Object.getOwnPropertyNames 和 Object.getOwnPropertySymbols 返回对象属性列表的操作。
getOwnPropertyDescriptor(target, property)：拦截 Object.getOwnPropertyDescriptor 返回对象属性描述符的操作。
defineProperty(target, property, descriptor)：拦截 Object.defineProperty、Object.defineProperties 和 Object.create 返回值的操作。

有了这些陷阱函数，我们就可以实现更加灵活的操作拦截和处理。

在实际开发中的应用

在实际开发中，我们可以通过 Proxy 对象来实现对象属性的校验和保护。例如，我们希望确保一个人的年龄必须在 18 和 65 之间，否则就不能进行赋值操作。下面是一个示例代码，演示了如何使用 Proxy 对象实现这个目标：

// javascriptcn.com 代码示例
const person = { age: 25 };
const handler = {
  set: function(target, property, value, receiver) {
    if (property === 'age' && (value < 18 || value > 65)) {
      console.log('Invalid age:', value);
      return false;
    }
    target[property] = value;
    return true;
  }
};
const proxyPerson = new Proxy(person, handler);

proxyPerson.age = 16;
console.log(proxyPerson.age);

proxyPerson.age = 70;
console.log(proxyPerson.age);

proxyPerson.age = 30;
console.log(proxyPerson.age);

执行结果是：

Invalid age: 16
25
Invalid age: 70
25
30

上面的代码演示了通过 Proxy 对象拦截了对象的设置操作，并进行了合法性检查。当设置的年龄小于 18 或者大于 65 时，代理对象将会阻止这个操作，而不是直接将错误值写入目标对象。这样，我们就成功地实现了对象属性的校验和保护。

总结

本文介绍了如何在 ECMAScript 2016 中使用 Proxy 对象进行数据验证与保护。我们首先了解了 Proxy 对象的基本用法，然后介绍了代理陷阱函数的实现方法，最后讲解了在实际开发中的应用。通过 Proxy 对象，我们可以编写更加健壮和安全的 Javascript 应用程序，提高代码的质量和可维护性。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6530eb7d7d4982a6eb27d55e