Object.defineProperty 和 Proxy 使用例子

最新推荐文章于 2024-05-31 14:49:19 发布

Meta.Qing

最新推荐文章于 2024-05-31 14:49:19 发布

阅读量552

点赞数 10

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/qq_20173195/article/details/138646759

版权

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 元素。