JavaScript - 代理：初学者的指南

你好，有抱负的程序员们！今天，我们将踏上一段激动人心的旅程，探索JavaScript代理（Proxies）的世界。如果你之前从未听说过它们，不用担心——我们将从最基础的知识开始，逐步深入。在本教程结束时，你将熟练掌握使用代理的艺术！

JavaScript中的代理是什么？

让我们从一个简单的类比开始。想象你是一位名人（为什么不梦想大一点呢？）。你非常著名，以至于你需要有人来处理你的约会、粉丝邮件和其他日常活动。在现实生活中，这个代表你行事的人被称为代理人（proxy）。

在JavaScript中，代理的工作方式与此类似。它是一个包装了另一个对象（我们称之为目标对象）的对象，可以拦截和重新定义该对象的基本操作。酷吧？

下面是一个基本的例子来开始我们的学习：

let target = {
name: "John Doe",
age: 30
};

let handler = {
get: function(target, property) {
console.log(`获取 ${property} 属性`);
return target[property];
}
};

let proxy = new Proxy(target, handler);

console.log(proxy.name);

如果你运行这段代码，你将看到：

获取 name 属性
John Doe

让我们分解一下：

1. 我们有一个带有name和age属性的目标对象。
2. 我们创建了一个带有get陷阱（我们稍后会详细讨论陷阱）的处理器对象。
3. 我们使用Proxy构造函数创建了一个代理，传递我们的目标对象和处理器。
4. 当我们尝试访问proxy.name时，我们的get陷阱被触发，在返回实际值之前记录一条消息。

JavaScript代理处理器

现在我们已经浅尝辄止，让我们更深入地了解代理处理器。处理器是一个定义了我们代理的陷阱的对象。陷阱是为我们的代理提供属性查找、赋值、枚举、函数调用等的方法。

下面是一些常见处理器陷阱的表格：

陷阱	描述
get	拦截属性访问
set	拦截属性赋值
has	拦截in操作符
deleteProperty	拦截delete操作符
apply	拦截函数调用
construct	拦截new操作符

让我们看一个使用多个陷阱的更全面的例子：

let target = {
name: "Alice",
age: 25
};

let handler = {
get: function(target, property) {
console.log(`访问 ${property} 属性`);
return target[property];
},
set: function(target, property, value) {
console.log(`将 ${property} 属性设置为 ${value}`);
target[property] = value;
return true;
},
has: function(target, property) {
console.log(`检查 ${property} 是否存在`);
return property in target;
}
};

let proxy = new Proxy(target, handler);

console.log(proxy.name);  // 触发 get 陷阱
proxy.job = "Developer";  // 触发 set 陷阱
console.log("age" in proxy);  // 触发 has 陷阱

运行这段代码将输出：

访问 name 属性
Alice
将 job 属性设置为 Developer
检查 age 是否存在
true

这太棒了！我们的代理现在正在拦截属性访问、赋值和in操作符！

JavaScript代理对象的使用

你可能在想，“这听起来很酷，但我到底什么时候会用到这个？”这是个好问题！代理有几个实际的应用场景：

1. 验证：你可以使用代理在数据设置到对象上前进行验证。

let user = {
name: "Bob",
age: 30
};

let validator = {
set: function(obj, prop, value) {
if (prop === "age") {
if (typeof value !== "number") {
throw new TypeError("年龄必须是数字");
}
if (value < 0 || value > 120) {
throw new RangeError("年龄必须在0到120之间");
}
}
obj[prop] = value;
return true;
}
};

let proxiedUser = new Proxy(user, validator);

proxiedUser.age = 25;  // 这可以工作
try {
proxiedUser.age = "thirty";  // 这会抛出TypeError
} catch (e) {
console.log(e.message);
}
try {
proxiedUser.age = 150;  // 这会抛出RangeError
} catch (e) {
console.log(e.message);
}

2. 日志记录：你可以使用代理来记录对对象属性的访问。

let target = {
name: "Charlie",
age: 35
};

let logger = {
get: function(target, property) {
console.log(`在 ${new Date()} 访问了 ${property} 属性`);
return target[property];
}
};

let proxiedTarget = new Proxy(target, logger);

console.log(proxiedTarget.name);
console.log(proxiedTarget.age);

3. 默认值：你可以使用代理为不存在的属性提供默认值。

let handler = {
get: function(target, property) {
return property in target ? target[property] : "属性未找到";
}
};

let proxy = new Proxy({}, handler);

proxy.name = "David";
console.log(proxy.name);  // 输出：David
console.log(proxy.age);   // 输出：属性未找到

JavaScript代理处理器列表

为了结束我们探索JavaScript代理的旅程，让我们看一下所有可用的处理器陷阱的全面列表：

处理器陷阱	描述
get	拦截获取属性值
set	拦截设置属性值
has	拦截in操作符
deleteProperty	拦截delete操作符
apply	拦截函数调用
construct	拦截new操作符
getPrototypeOf	拦截Object.getPrototypeOf
setPrototypeOf	拦截Object.setPrototypeOf
isExtensible	拦截Object.isExtensible
preventExtensions	拦截Object.preventExtensions
getOwnPropertyDescriptor	拦截Object.getOwnPropertyDescriptor
defineProperty	拦截Object.defineProperty
ownKeys	拦截Object.getOwnPropertyNames和Object.getOwnPropertySymbols

就是这样！我们已经涵盖了JavaScript代理的基础知识，探索了一些实际用途，甚至还看了所有可用的处理器陷阱。记住，像任何强大的工具一样，代理应该谨慎使用。它们在某些用例中非常好，但它们确实会带来性能开销。

我希望这个教程能帮助你对JavaScript代理有更深的了解。继续练习，继续编码，不久的将来，你将成为代理的高手！快乐编码！

Credits: Image by storyset