JS `Proxy` 用于数据验证与日志记录：透明地拦截对象操作

各位靓仔靓女们，大家好！今天咱们来聊聊 JavaScript 里一个神奇的玩意儿——Proxy。这玩意儿就像个透明的门卫，能帮你拦截和控制对象的操作，实现数据验证、日志记录等等骚操作。保证让你的代码既安全又易于追踪，简直是居家旅行、写 Bug 必备良品！

第一部分：Proxy 是个啥？

首先，咱们得搞清楚 Proxy 到底是个什么东西。简单来说，Proxy 对象允许你创建一个对象的“代理”，这个代理对象可以拦截并重新定义对目标对象的基本操作。这些基本操作包括读取属性、写入属性、调用函数等等。

想象一下，你有一个装满金银珠宝的保险箱（目标对象），Proxy 就是站在保险箱门口的保安。有人想打开保险箱（访问属性），保安会先问问：“你干嘛的？有没有授权？要不要登记一下？” 这就是 Proxy 的拦截作用。

语法：

const proxy = new Proxy(target, handler);

• target：你要代理的目标对象。可以是普通对象、数组、函数，甚至是另一个 Proxy 对象。
• handler：一个对象，定义了各种“陷阱”（traps），也就是拦截特定操作的方法。

第二部分：Handler：Proxy 的灵魂

handler 对象是 Proxy 的核心，它定义了各种“陷阱”（traps），用于拦截不同的对象操作。下面是一些常用的陷阱：

• get(target, property, receiver): 拦截读取属性的操作。
  • target: 目标对象。
  • property: 要读取的属性名。
  • receiver: Proxy 对象或继承 Proxy 的对象。
• set(target, property, value, receiver): 拦截设置属性的操作。
  • target: 目标对象。
  • property: 要设置的属性名。
  • value: 要设置的属性值。
  • receiver: Proxy 对象或继承 Proxy 的对象。
• has(target, property): 拦截 in 操作符。
  • target: 目标对象。
  • property: 要检查的属性名。
• deleteProperty(target, property): 拦截 delete 操作符。
  • target: 目标对象。
  • property: 要删除的属性名。
• apply(target, thisArg, argumentsList): 拦截函数调用。
  • target: 目标对象（必须是函数）。
  • thisArg: 调用函数时的 this 值。
  • argumentsList: 调用函数时的参数列表。
• construct(target, argumentsList, newTarget): 拦截 new 操作符。
  • target: 目标对象（必须是函数）。
  • argumentsList: 构造函数的参数列表。
  • newTarget: 最初被调用的构造函数。

表格：Handler 陷阱总结

陷阱名称	拦截的操作	参数
get	读取属性	target, property, receiver
set	设置属性	target, property, value, receiver
has	in 操作符	target, property
deleteProperty	delete 操作符	target, property
apply	函数调用	target, thisArg, argumentsList
construct	new 操作符	target, argumentsList, newTarget
getPrototypeOf	获取原型	target
setPrototypeOf	设置原型	target, prototype
isExtensible	判断对象是否可扩展	target
preventExtensions	阻止对象扩展	target
getOwnPropertyDescriptor	获取属性描述符	target, property
defineProperty	定义属性	target, property, descriptor
ownKeys	获取对象自身的所有属性键名	target

第三部分：实战演练：数据验证

咱们先来个简单点的，用 Proxy 实现数据验证。假设我们有一个用户对象，需要验证用户的年龄必须在 0 到 150 之间。

const user = {
  name: '张三',
  age: 25,
};

const userProxy = new Proxy(user, {
  set: function(target, property, value) {
    if (property === 'age') {
      if (typeof value !== 'number' || value < 0 || value > 150) {
        console.error('年龄必须是 0 到 150 之间的数字');
        return false; // 阻止设置属性
      }
    }
    target[property] = value;
    return true; // 表示设置成功
  }
});

userProxy.age = 30;
console.log(userProxy.age); // 30

userProxy.age = -10; // 年龄必须是 0 到 150 之间的数字
console.log(userProxy.age); // 30 (因为设置失败，值没有改变)

在这个例子中，我们拦截了 set 操作。当设置 age 属性时，会先进行验证。如果年龄不符合要求，就打印错误信息，并返回 false 阻止设置。否则，就正常设置属性，并返回 true 表示设置成功。

第四部分：更上一层楼：日志记录

除了数据验证，Proxy 还可以用于日志记录，方便我们追踪对象的操作。

const product = {
  name: 'iPhone 15',
  price: 7999,
};

const productProxy = new Proxy(product, {
  get: function(target, property, receiver) {
    console.log(`正在读取属性：${property}`);
    return Reflect.get(target, property, receiver);
  },
  set: function(target, property, value, receiver) {
    console.log(`正在设置属性：${property} = ${value}`);
    return Reflect.set(target, property, value, receiver);
  }
});

console.log(productProxy.name); // 正在读取属性：name  iPhone 15
productProxy.price = 8999; // 正在设置属性：price = 8999
console.log(productProxy.price); // 正在读取属性：price  8999

在这个例子中，我们拦截了 get 和 set 操作，每次读取或设置属性时，都会打印一条日志。这样，我们就可以清楚地知道对象的哪些属性被访问或修改了。

第五部分：使用 Reflect 的姿势

你可能注意到了，在上面的例子中，我们使用了 Reflect.get 和 Reflect.set。Reflect 是 ES6 引入的一个内置对象，它提供了一组与对象操作相关的静态方法，这些方法与 Proxy 的 handler 方法一一对应。

使用 Reflect 的好处是：

• 代码更清晰：Reflect 方法的名字与 handler 方法的名字一致，更容易理解。
• 避免错误：Reflect 方法会返回一个布尔值，表示操作是否成功，方便我们进行错误处理。
• 正确处理 this 值：Reflect 方法会正确处理 this 值，避免一些潜在的问题。

第六部分：更高级的用法：深层 Proxy

有时候，我们需要对对象的深层属性进行拦截。比如，我们有一个嵌套的对象：

const company = {
  name: 'Google',
  address: {
    city: 'Mountain View',
    country: 'USA',
  },
};

如果我们要拦截 company.address.city 的访问，就需要使用递归的方式创建深层 Proxy。

function createDeepProxy(obj, handler) {
  if (typeof obj !== 'object' || obj === null) {
    return obj;
  }

  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      obj[key] = createDeepProxy(obj[key], handler);
    }
  }

  return new Proxy(obj, handler);
}

const companyProxy = createDeepProxy(company, {
  get: function(target, property, receiver) {
    console.log(`正在读取属性：${property}`);
    return Reflect.get(target, property, receiver);
  }
});

console.log(companyProxy.address.city); // 正在读取属性：address  正在读取属性：city  Mountain View

在这个例子中，createDeepProxy 函数会递归地遍历对象的属性，如果属性值是对象，就创建一个新的 Proxy 对象。这样，我们就可以拦截对象的深层属性了。

第七部分：Proxy 的局限性

虽然 Proxy 功能强大，但它也有一些局限性：

• 无法拦截私有属性：Proxy 只能拦截对公开属性的访问，无法拦截对私有属性（使用 # 定义的属性）的访问。
• 无法拦截原型链上的属性：Proxy 只能拦截对自身属性的访问，无法拦截对原型链上的属性的访问。
• 性能影响：Proxy 会增加一些性能开销，因为每次操作都需要经过 Proxy 的拦截。

第八部分：Proxy 的应用场景

除了数据验证和日志记录，Proxy 还有很多其他的应用场景：

• 数据绑定：可以使用 Proxy 实现数据绑定，当数据发生变化时，自动更新 UI。
• 缓存：可以使用 Proxy 实现缓存，当访问某个属性时，如果已经缓存了该属性的值，就直接返回缓存的值，避免重复计算。
• 权限控制：可以使用 Proxy 实现权限控制，根据用户的权限，决定是否允许访问某个属性。
• 撤销 Proxy: 可以使用 Proxy.revocable() 创建一个可以被撤销的 Proxy。一旦被撤销，任何对该 Proxy 的操作都会抛出 TypeError。

第九部分：撤销 Proxy 的例子

const target = {
  name: "可撤销的 Proxy"
};

const { proxy, revoke } = Proxy.revocable(target, {
  get: function(target, property) {
    console.log("正在读取属性:", property);
    return target[property];
  }
});

console.log(proxy.name); // 正在读取属性: name  可撤销的 Proxy

revoke(); // 撤销 Proxy

try {
  console.log(proxy.name); // 尝试访问已撤销的 Proxy
} catch (e) {
  console.error("访问已撤销的 Proxy 抛出错误:", e); // 访问已撤销的 Proxy 抛出错误: TypeError: Cannot perform 'get' on a proxy that has been revoked
}

第十部分：总结

Proxy 是 JavaScript 中一个非常强大的工具，可以用于实现各种高级功能。掌握 Proxy 的用法，可以让你写出更安全、更易于追踪的代码。

总而言之，Proxy 就像一个万能的变形金刚，只要你发挥想象力，就能把它变成你需要的任何东西。希望今天的讲座能帮助大家更好地理解和使用 Proxy。下次再遇到需要拦截对象操作的场景，不妨试试 Proxy，相信它会给你带来惊喜的！

好了，今天的分享就到这里。谢谢大家！如果有任何问题，欢迎随时提问。下次再见！