在 ECMAScript 2021 中，代理和反射是两个非常有用的功能，它们可以帮助我们更好地掌控 JavaScript 的行为和流程。在本文中，我们将介绍这些功能，包括它们的定义、用途和示例代码。
代理
代理是一种机制，可以截取对象的某些操作并对其进行拦截和处理。在 JavaScript 中，我们可以使用 Proxy 类来创建代理。
创建代理
要创建一个代理，我们需要使用 Proxy 构造函数，它接受两个参数：被代理的对象和一个处理程序对象。处理程序对象包含了一些方法，用于拦截和处理操作。
下面是一个简单的示例，使用代理拦截对象的读取操作：
// javascriptcn.com 代码示例
const target = { name: 'Tom', age: 20 };
const handler = {
get: function(target, prop) {
console.log(`Getting ${prop}...`);
return target[prop];
}
};
const proxy = new Proxy(target, handler);
console.log(proxy.name); // Getting name... Tom
console.log(proxy.age); // Getting age... 20在上面的示例中，我们创建了一个代理对象 proxy，它拦截了 target 对象的读取操作，并在控制台输出了相应的信息。
拦截操作
除了读取操作，代理还可以拦截其他操作，包括写入操作、删除操作、枚举操作等。下面是一些常用的拦截操作：
- get(target, prop, receiver)：拦截对象的读取操作。
- set(target, prop, value, receiver)：拦截对象的写入操作。
- deleteProperty(target, prop)：拦截对象的删除操作。
- ownKeys(target)：拦截对象的枚举操作。
下面是一个示例代码，演示了如何使用代理拦截对象的写入操作：
// javascriptcn.com 代码示例
const target = { name: 'Tom', age: 20 };
const handler = {
set: function(target, prop, value) {
console.log(`Setting ${prop} to ${value}...`);
target[prop] = value;
}
};
const proxy = new Proxy(target, handler);
proxy.age = 30; // Setting age to 30...
console.log(proxy.age); // 30在上面的示例中，我们使用代理拦截了对象的写入操作，并在控制台输出了相应的信息。
应用场景
代理的应用场景非常广泛，可以用于实现数据绑定、拦截网络请求、实现缓存等。
下面是一个示例代码，演示了如何使用代理实现数据绑定：
// javascriptcn.com 代码示例
const data = { name: 'Tom', age: 20 };
const handler = {
get(target, prop) {
console.log(`Getting ${prop}...`);
return target[prop];
},
set(target, prop, value) {
console.log(`Setting ${prop} to ${value}...`);
target[prop] = value;
updateView(); // 更新视图
return true;
}
};
const proxy = new Proxy(data, handler);
function updateView() {
console.log(`Updating view...`);
}
proxy.age = 30; // Setting age to 30...在上面的示例中，我们使用代理拦截了对象的写入操作，并在写入操作完成后更新了视图。
反射
反射是一种机制，可以在运行时检查和修改对象的属性和方法。在 JavaScript 中，我们可以使用 Reflect 对象来进行反射操作。
检查属性
Reflect 对象提供了一些方法，用于检查对象的属性和方法是否存在。下面是一些常用的方法：
- Reflect.has(target, prop)：检查对象是否包含指定的属性。
- Reflect.ownKeys(target)：返回对象的所有属性和方法名。
- Reflect.getOwnPropertyDescriptor(target, prop)：返回指定属性的描述符。
下面是一个示例代码，演示了如何使用 Reflect 检查对象的属性：
const obj = { name: 'Tom', age: 20 };
console.log(Reflect.has(obj, 'name')); // true
console.log(Reflect.has(obj, 'gender')); // false
console.log(Reflect.ownKeys(obj)); // [ 'name', 'age' ]
console.log(Reflect.getOwnPropertyDescriptor(obj, 'name')); // { value: 'Tom', writable: true, enumerable: true, configurable: true }在上面的示例中，我们使用了 Reflect 对象的一些方法，来检查对象的属性和方法是否存在。
修改属性
Reflect 对象还提供了一些方法，用于修改对象的属性和方法。下面是一些常用的方法：
- Reflect.defineProperty(target, prop, descriptor)：定义对象的属性。
- Reflect.deleteProperty(target, prop)：删除对象的属性。
- Reflect.set(target, prop, value)：设置对象的属性值。
下面是一个示例代码，演示了如何使用 Reflect 修改对象的属性：
// javascriptcn.com 代码示例
const obj = { name: 'Tom', age: 20 };
console.log(obj); // { name: 'Tom', age: 20 }
Reflect.defineProperty(obj, 'gender', { value: 'male', writable: false });
console.log(obj); // { name: 'Tom', age: 20, gender: 'male' }
Reflect.deleteProperty(obj, 'gender');
console.log(obj); // { name: 'Tom', age: 20 }
Reflect.set(obj, 'age', 30);
console.log(obj); // { name: 'Tom', age: 30 }在上面的示例中，我们使用了 Reflect 对象的一些方法，来修改对象的属性和方法。
应用场景
反射的应用场景也非常广泛，可以用于实现对象深拷贝、实现对象属性的动态绑定等。
下面是一个示例代码，演示了如何使用 Reflect 实现对象深拷贝：
// javascriptcn.com 代码示例
function deepCopy(obj) {
const keys = Reflect.ownKeys(obj);
const result = {};
keys.forEach(key => {
const value = obj[key];
if (typeof value === 'object') {
result[key] = deepCopy(value);
} else {
result[key] = value;
}
});
return result;
}
const data = { name: 'Tom', age: 20, friends: ['Bob', 'Alice'] };
const copy = deepCopy(data);
console.log(copy); // { name: 'Tom', age: 20, friends: [ 'Bob', 'Alice' ] }
console.log(copy === data); // false
console.log(copy.friends === data.friends); // false在上面的示例中，我们使用了 Reflect 对象的一些方法，实现了对象的深拷贝。
总结
代理和反射是 ECMAScript 2021 中非常有用的功能，它们可以帮助我们更好地掌控 JavaScript 的行为和流程。在实际开发中，我们可以根据需要使用这些功能，来提升 JavaScript 的编程能力。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650ae24d95b1f8cacd5373d5