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;
// 更新 DOM
if (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 元素。
- 通过
