十六、深入理解Proxy
在现代JavaScript中，Proxy是一种非常有用的特性，它允许我们在许多常规操作中插入自定义行为。然而，由于其深度和复杂性，很多开发者可能会对如何使用它或它的工作原理感到困惑。在本篇文章中，我们将详细讨论JavaScript Proxy，并通过代码示例演示其使用。
1.Proxy是什么？
在JavaScript中，Proxy是一个特殊的“包装器”对象，它可以用于修改或扩展某些基本操作的行为，比如属性读取、函数调用等。这种修改或扩展的行为是通过所谓的"traps"实现的，这些"traps"定义了如何拦截和改变基本操作。
以下是一个简单的例子，显示了如何使用Proxy拦截对象的属性读取操作：
let target = { name: "target"}; let proxy = new Proxy(target, { get: function(target, property) { return property in target ? target[property] : "Default"; }}); console.log(proxy.name); // 输出 "target" console.log(proxy.unknown); // 输出 "Default"
在上面的例子中，当我们尝试从proxy读取不存在的属性时，我们得到了"default"，而不是通常的"undefined"。这是因为我们的"get" trap拦截了读取操作，并返回了默认值。
2.Proxy的用途
Proxy有许多用途，下面是一些常见的例子：
1）数据校验
Proxy可以用于校验设置对象属性的值：
let validator = { set: function(target, property, value) { if (property === "age") { if (!Number.isInteger(value)) { throw new TypeError("The age is not an integer"); } if (value < 0 || value > 200) { throw new RangeError("The age is invalid"); } } target[property] = value; return true; }}; let person = new Proxy({}, validator); person.age = 100; // 正常 console.log(person.age); // 输出 100 person.age = "young"; // 抛出 TypeError: The age is not an integer person.age = 300; // 抛出 RangeError: The age is invalid
2）数据绑定和观察
Proxy可以用于实现数据绑定和观察（数据变化的监听）：
let handler = { set: function(target, property, value) { console.log(`propertyissetto{property} is set to {value}`); target[property] = value; return true; }}; let proxy = new Proxy({}, handler); proxy.name = "proxy"; // 输出 "name is set to proxy"
带你读《现代Javascript高级教程》十六、深入理解Proxy（2）https://developer.aliyun.com/article/1349582?groupCode=tech_library
