Object.defineProperty 和 Proxy 使用例子

Object.defineProperty 是 JavaScript 中定义或修改对象属性的工具。它允许开发者更精确地控制属性的行为，如是否可枚举、是否可写、是否可配置等。

核心特性描述符

value: 属性的值，默认值为 undefined。
writable: 布尔值，表示属性值是否可修改，默认值为 false。
enumerable: 布尔值，表示属性是否可在对象的枚举属性中被枚举，默认值为 false。
configurable: 布尔值，表示属性描述符是否可被修改，属性是否可被删除，默认值为 false。
get: 返回属性值的函数，无默认值。取值器函数是用于访问属性的逻辑，可以定义自定义的读取逻辑。
set: 设置属性值的函数，无默认值。设置器函数是用于写入属性的逻辑，可以定义自定义的写入逻辑。

典型应用

控制属性的可写性: 确保某些属性不可被意外修改。
控制属性的可枚举性: 隐藏属性，使其在 for...in 循环和 Object.keys 中不可见。
控制属性的可配置性: 锁定属性，防止其被删除或重新定义。
创建访问器属性: 使用 get 和 set 函数定义属性的访问和设置逻辑。

使用方法

Object.defineProperty(obj, prop, descriptor);

obj: 目标对象。
prop: 要定义或修改的属性的名称。
descriptor: 包含属性描述符的对象。

`Proxy`

Proxy 是 ECMAScript 6 (ES6) 引入的一种用于定义自定义行为的对象。它允许开发者拦截和自定义基本操作，例如属性访问、赋值、枚举、函数调用等。

核心概念

target: 被代理的目标对象，可以是任何类型的对象（对象、数组、函数等）。
handler: 包含捕捉器（拦截方法）的对象。这些捕捉器可以拦截和自定义对 target 的各种操作。

常用捕捉器

get: 拦截属性读取操作，允许开发者定义读取属性时的行为。
set: 拦截属性设置操作，允许开发者定义写入属性时的行为。
has: 拦截 in 操作符，允许开发者定义检查属性是否存在时的行为。
deleteProperty: 拦截 delete 操作符，允许开发者定义删除属性时的行为。
apply: 拦截函数调用操作，允许开发者定义调用函数时的行为。
construct: 拦截 new 操作符，允许开发者定义实例化对象时的行为。

典型应用

日志和调试: 在访问或修改对象属性时记录日志。
数据验证: 在设置属性值时进行验证和检查。
虚拟化和延迟计算: 按需计算属性值或延迟执行某些操作。
安全和访问控制: 限制或控制对对象属性的访问。

使用方法

new Proxy(target, handler);

target: 要包装的目标对象。
handler: 包含捕捉器的对象，用于定义拦截和自定义操作的逻辑。

比较与选择

Object.defineProperty:
- 提供精确控制对象属性的特性。
- 适合需要严格控制单个对象属性行为的场景。
Proxy:
- 提供全面的拦截和自定义功能。
- 适合需要对整个对象的所有操作进行控制和自定义的场景。

在实际应用中，Proxy 提供了更强大的功能和更高的灵活性，但 Object.defineProperty 仍然是一个非常有用的工具，尤其是在需要简单地控制某些属性行为时。

使用 Object.defineProperty 的例子

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Object.defineProperty Example</title>
</head>
<body><div id="nameDisplay">Name: </div><div id="ageDisplay">Age: </div><script>let person = {_name: 'Alice',_age: 25
};Object.defineProperty(person, 'name', {get() {return this._name;},set(newValue) {this._name = newValue;document.getElementById('nameDisplay').innerText = `Name: ${newValue}`;},enumerable: true,configurable: true
});Object.defineProperty(person, 'age', {get() {return this._age;},set(newValue) {this._age = newValue;document.getElementById('ageDisplay').innerText = `Age: ${newValue}`;},enumerable: true,configurable: true
});// 初始化 DOM 内容
document.getElementById('nameDisplay').innerText = `Name: ${person.name}`;
document.getElementById('ageDisplay').innerText = `Age: ${person.age}`;// 测试更改属性
setTimeout(() => {person.name = 'Bob';person.age = 30;
}, 2000);</script>
</body>
</html>

使用 Proxy 的例子

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Proxy Example</title>
</head>
<body><div id="nameDisplay">Name: </div><div id="ageDisplay">Age: </div><script>// 定义 person 对象let person = {name: 'Alice',age: 25};// 创建一个 Proxy 以监听属性变化const handler = {get(target, property) {// 返回属性值return target[property];},set(target, property, value) {// 更新属性值target[property] = value;// 更新 DOMif (property === 'name') {document.getElementById('nameDisplay').innerText = `Name: ${value}`;} else if (property === 'age') {document.getElementById('ageDisplay').innerText = `Age: ${value}`;}// 返回 true 表示设置成功return true;}};// 创建代理对象const proxyPerson = new Proxy(person, handler);// 初始设置 DOM 内容document.getElementById('nameDisplay').innerText = `Name: ${proxyPerson.name}`;document.getElementById('ageDisplay').innerText = `Age: ${proxyPerson.age}`;// 测试读取和更改属性setTimeout(() => {console.log(proxyPerson.name); // 读取属性值console.log(proxyPerson.age);proxyPerson.name = 'Bob'; // 设置属性值proxyPerson.age = 30;}, 2000);</script>
</body>
</html>

解释

Object.defineProperty 示例:
- 通过 Object.defineProperty 定义 person 对象的 name 和 age 属性。
- 使用 get 和 set 方法分别定义属性的读取和设置行为。
- 属性值变化时，更新对应的 DOM 元素。
Proxy 示例:
- 通过 Proxy 创建 person 对象的代理 proxyPerson。
- 使用 get 方法拦截属性读取操作，返回属性值。
- 使用 set 方法拦截属性设置操作，更新属性值并更新 DOM 元素。