数据代理 | iGmaBlog

Object.defineProperty

介绍

通过 Object.defineProperty 可以给一个以声明的对象添加属性。
Object.defineProperty 有三个参数：
- 参数一：是要操作的对象
- 参数二：是要添加的 key
- 参数三：是对该属性的配置

用法

给对象 obj 添加一个 age 属性，属性值为 21。

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue Demo</title>
</head>
<body>
    <script>
        let obj = {
            name: 'iGma',
            sex: '男'
        }

        Object.defineProperty(obj,'age',{
            value: 21,          // 值
        })
    </script>
</body>
</html>

在控制台中使用 Object.keys() 方法打印 obj 的所有 key，这时会发现，后添加的 age 属性不在数组中，如下图：

遍历 obj 对象

上图现象是正常的，也就是说我们通过 Object.defineProperty 添加的属性不会被遍历出来，这时可以在配置中加入 enumerable 项即可。

代码

javascript

Object.defineProperty(obj,'age',{
    value: 21,          // 值
    enumerable: true,   // 是否可以被枚举，默认是 false
})

运行结果

修改 age 属性值

在控制台对 age 属性重新赋值，打印 obj 会发现值没有变，如下图。
需要在配置相中加入 writable 项配置即可。

代码

javascript

Object.defineProperty(obj,'age',{
    value: 21,          // 值
    enumerable: true,   // 是否可以被枚举，默认是 false
    writable: true,     // 是否可修改，默认是 false
})

运行结果

删除 age

在控制台删除 obj 的 age 属性，如下图。
当前 age 属性是无法删除的，需要加入 configurable 配置项。

代码

javascript

Object.defineProperty(obj,'age',{
    value: 21,          // 值
    enumerable: true,   // 是否可以被枚举，默认是 false
    writable: true,     // 是否可修改，默认是 false
    configurable: true, // 是否可删除，默认是 false
})

运行结果

监测读取属性函数

代码

javascript

Object.defineProperty(obj, 'age', {
    /*
        当调用 age 属性时执行的函数。返回 age 的值
        value 和 get 是同一个作用，只能同时用一个。
    */
    get() {
        console.log("age 属性被调用");
        return 30;
    }
})

运行结果

监测修改属性函数

代码

javascript

Object.defineProperty(obj, 'age', {
    /*
        当调用 age 属性时执行的函数。返回 age 的值
        writable 和 set 是同一个作用，只能同时用一个
    */
    set(value) {
        console.log(`age 属性被修改，修改值为：${value}`);
    }
})

运行结果

数据代理定义

定义

通过一个对象代理另一个对象中属性的操作（读、写）

需求

定义第一个对象 obj0 包含属性 x 值为 100。
定义第二个对象 obj1 包含属性 y 值为 200。
给 obj1 添加一个属性 x 值为 obj0.x。
修改 obj1 的 x 时，obj0 的 x 也变化。

实现

代码

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
        let obj0 = { x: 100 };
        let obj1 = { y: 200 };
        
        Object.defineProperty(obj1,'x',{
            get(){
                return obj0.x;
            },
            set(value){
                obj0.x = value;
            }
        })
    </script>
</body>
</html>

运行结果

Object.defineProperty ​

介绍 ​

用法 ​

遍历 obj 对象 ​

修改 age 属性值 ​

删除 age ​

监测读取属性函数 ​

监测修改属性函数 ​

数据代理定义 ​

定义 ​

需求 ​

实现 ​

Object.defineProperty

介绍

用法

遍历 obj 对象

修改 age 属性值

删除 age

监测读取属性函数

监测修改属性函数

数据代理定义

定义

需求

实现