Proxy-Reflect

监听对象的操作

使用存储属性描述符

<script>
        const obj = {
     
            name:'Li',
            age:18,
            gender:'man'
        }
        Object.keys(obj).forEach(key => {
     
            Object.defineProperty(obj, key, {
     
                get() {
     
                    console.log(`obj中的${
       key}的值被获取`);
                },
                set() {
     
                    console.log(`obj中的${
       key}的值被设置`);
                }
            })
        })

        console.log(obj.name);
        obj.age = 20
    script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

缺点：
与设计初衷不符
难以进行增加和删除操作的监听

proxy可以监听13种操作

proxy是一个类
实例是代理对象

使用proxy实现刚才的操作

 <script>
        const obj = {
     
            name:'Li',
            age:18,
            gender:'man'
        }
       
        const proxyObj =
1
2
3
4
5
6
7
8