ES6 的 Proxy 是什么

ES6中的 Proxy 是一种强大的元编程工具，它允许我们拦截并自定义JavaScript对象的底层操作。代理（Proxy）和反射（Reflect）是全新的结构，能够拦截并修改语言中基础操作的附加行为。在这篇文章中，我们将探讨Proxy的基本概念、用法和一些实际应用场景。

什么是 Proxy

Proxy是一个代理对象，通过使用Proxy可以拦截目标对象的读取、赋值、函数调用等操作，并自定义处理逻辑。可以理解成在目标对象之前架设一层"拦截"，外界对该对象的访问，都必须先通过这层拦截，提供了一种机制，可以对外界的访问进行过滤和改写。

基本用法

Proxy的语法非常简单，它接收两个参数：目标对象和处理器对象。目标对象是要被代理的对象，而处理器对象包含了一组捕获器，用于拦截不同类型的操作。

js 复制代码

const user = new Proxy(
  { name: '小明', gender: 'male' },
  {
    get: function (target, propKey, receiver) {
      if (propKey in target) {
        if (propKey == 'name') {
          return '我叫小明';
        } else {
          return target[propKey];
        }
      } else {
        throw new ReferenceError(`Prop name ${propKey} does not exist.`);
      }
    },
  }
);

console.log(user.name);
console.log(user.gender);
console.log(user.age);

Proxy的捕获器

Proxy的处理器对象可以定义多个捕获器，每个捕获器对应一种操作。一些常用的捕获器：

get: 在读取属性时触发拦截。
set: 在设置属性时触发拦截。
apply: 在函数调用时触发拦截。
construct: 在使用new关键字创建实例时触发拦截。

js 复制代码

const person = { name: '小明' };
const p = new Proxy(person, {
  set(target, propKey, value, receiver) {
    console.log(`设置 ${target} 的${propKey} 属性，值为${value}`);
    target[propKey] = value;
  },
});

p.age = 18;
person.gender = 'male';
console.log(person, p);

除了上述捕获器，还有其他捕获器用于拦截不同类型的操作，如 deleteProperty、has、getOwnPropertyDescriptor 等等，你可以在MDN文档中查看，根据需要使用相应的捕获器。

目标对象和代理对象的关系

代理对象不等于目标对象，他是目标对象的包装品
目标对象既可以直接操作，也可以被代理对象操作，且两者相互关联
如果直接操作目标对象，则会绕过代理定义的各种拦截行为

应用场景

Proxy的用途非常广泛，下面列举了一些常见的应用场景：

数据校验：可以使用Proxy拦截对对象属性的赋值操作，从而实现数据校验的功能。例如，我们可以在设置属性时对属性值进行类型检查或范围限制。
对象代理：可以使用Proxy拦截目标对象的读取操作，从而实现对象代理的功能。例如，我们可以在读取属性时添加额外的逻辑，比如记录日志或实现缓存机制。
实现双向绑定：可以使用Proxy拦截对对象属性的读取和赋值操作，从而实现双向绑定的功能。例如，当对象属性发生变化时，自动更新相关的视图。
权限控制：可以使用Proxy拦截目标对象的读取和调用操作，从而实现权限控制的功能。例如，根据用户的权限级别，可以限制对某些属性或方法的访问。

总结

本文介绍了 Proxy的相关概念和使用。通过使用Proxy，我们可以实现数据校验、对象代理、双向绑定、权限控制等功能。掌握Proxy的基本概念和使用方法，可以让我们在开发中更加灵活和高效地处理对象操作。希望本文对你有所帮助！

往期文章推荐：