浅谈数据代理_什么是数据代理

1、 什么是数据代理

通过一个对象代理对另一个对象中的属性的操作（读/写），就是数据代理。

2、简单实现数据代理

JS有一个内置对象Object数据代理的方法为：Object.defineProperty(obj, prop, descriptor)，通过这个方法即可实现数据代理。
参数解析：
obj----------------------------------->要定义属性的对象
prop--------------------------------->要定义或修改的属性的名称或 Symbol
descriptor-------------------------->要定义或修改的属性描述符

---

下面举个最简单的数据代理的例子：

    let obj1 = {x:100};
    let obj2 = {y:200};

    Object.defineProperty(obj2, 'x', {
         // 当读取obj2的x属性时，get函数（getter）就会被调用，且返回值就是x的值
        get() {
            console.log('拿obj1的x了');
            return obj1.x
        },
         // 当修改obj2的x属性时，set函数（setter）就会被调用，且会收到一个具体修改的值value
        set(value) {
            console.log('给obj1的x赋值');
            obj1.x = value
        }
    })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

这里便是通过操作（读/写）对象obj2来实现对对象obj1的读取、存储。

---

扩展：在descriptor参数中，除了getter、setter（最常用的两个）之外，还有其他配置项，例：

	let person = {
	        name: 'xxc',
	        age: 22
	    };

    Object.defineProperty(person, 'age', {
        value: 18,
        enumerable: true, // 控制属性是否可以枚举，默认为false
        writable: true, // 控制属性是否可以被修改，默认为false
        configurable: true, // 控制属性是否可以被删除，默认为false
    })
1
2
3
4
5
6
7
8
9
10
11

注：通过代理的方式修改person中age属性与直接修改person中age属性的区别也很明显，代理的方式属性默认都是不可修改或枚举的，需要手动开启配置项设置。

但是我们用数据代理一般只会用到getter和setter，比如在vue中data里的属性就是用到数据代理来方便程序员写代码。