JavaScript进阶讲解十四—＞Proxy-Reflect

监听对象的操作

在之前我们已将讲过一种方式（Object.defineProperty）通过它的存取属性描述符，我们就可以实现对对象属性的监听。

const obj = {
    name: 'xt',
    age: 18
}

Object.keys(obj).forEach(key => {
    let val = obj[key]

    Object.defineProperty(obj, key, {
        get: function() {
            console.log(`监听到获取${key}`);
            return val
        },
        set: function(newVal) {
            console.log(`监听到设置${key}`);
            val = newVal
        }
    })
})

// 触发getter
console.log(obj.name); // 监听到获取name   xt
console.log(obj.age); // 监听到获取age  18

// 触发setter
obj.name = 'xt' // 监听到设置name
obj.name = '20' // 监听到设置age

我们都知道vue2中实现响应式就是采用的Object.defineProperty，在vue3中是采用的Proxy，这是为什么呢？而且既然有了Object.defineProperty又为什么要在es6中推出Proxy呢？我们来看看Object.defineProperty的缺点：

1. Object.defineProperty设计的初衷，不是为了去监听截止一个对象中所有的属性的。
2. 对新增、删除等属性是无能为力的

Proxy

Proxy：ES6中，新增了一个Proxy类，用于帮助我们创建一个代理。也就是说：

1. 如果我们希望监听一个对象的相关操作，那么我们可以先创建一个代理对象（Proxy对象）。
2. 对该对象的所有操作，都通过代理对象来完成，代理对象可以监听我们想要对原对象进行哪些操作

Proxy的基本使用

const obj = {
    name: 'xt',
    age: 18,
    address: {
        addr: '111'
    }

}

// 第二个参数是捕获器对象
const objProxy = new Proxy(obj, {})

objProxy.name = 'haha'
objProxy.address.addr = '22'

// 当修改了objProxy的属性值， obj对象也会修改
console.log(obj); // { name: 'haha', age: 18, address: { addr: '22' } }
console.log(objProxy); // { name: 'haha', age: 18, address: { addr: '22' } }

Proxy的set和get捕获器

我们上面说过，new Proxy的第二个参数，是捕获器对象，接下来我们看看怎么用

const obj = {
    name: 'xt',
    age: 18
}

const objProxy = new Proxy(obj, {
    // receiver 调用的代理对象
    get: function(target, key, receiver) {
        console.log('get捕获器', key);
        console.log(receiver); // { name: 'haha', age: 18 }
        return target[key]
    },
    set: function(target, key, value, receiver) {
        console.log('set捕获器', key);
        console.log(receiver); // { name: 'xt', age: 18 }
        target[key] = value
        console.log(receiver); // { name: 'haha', age: 18 }
    }
})


objProxy.name = 'haha' // set捕获器 name
console.log(objProxy.name); // get捕获器 name haha

set和get分别对应的是函数类型

1. get函数有三个参数

   1.1 target：目标对象（侦听的对象）
   1.2 property：被获取的属性key
   1.3 receiver：调用的代理对象

2. set函数有四个参数

   2.1 target：目标对象（侦听的对象）
   2.2 property：将被设置的属性key
   2.3 value：新属性值
   2.4 receiver：调用的代理对象

Proxy所有捕获器

1. handler.getPrototypeOf()：Object.getPrototypeOf 方法的捕捉器。
2. handler.setPrototypeOf()：Object.setPrototypeOf 方法的捕捉器。
3. handler.isExtensible()：Object.isExtensible 方法的捕捉器
4. handler.preventExtensions()：Object.preventExtensions 方法的捕捉器。
5. handler.getOwnPropertyDescriptor()：Object.getOwnPropertyDescriptor 方法的捕捉器
6. handler.defineProperty()：Object.defineProperty 方法的捕捉器。
7. handler.ownKeys()： Object.getOwnPropertyNames 方法和
   Object.getOwnPropertySymbols 方法的捕捉器
8. handler.has()：in 操作符的捕捉器
9. handler.get()：属性读取操作的捕捉器
10. handler.set()： 属性设置操作的捕捉器
11. handler.deleteProperty()：delete 操作符的捕捉器
12. handler.apply()：函数调用操作的捕捉器
13. handler.construct()：new 操作符的捕捉器

Reflect

Reflect也是ES6新增的一个API，它是一个对象，字面的意思是反射。

作用：提供了很多操作JavaScript对象的方法，有点像Object中操作对象的方法。

Reflect的常见方法

1. Reflect.getPrototypeOf(target)：类似于Object.getPrototypeOf()
2. Reflect.setPrototypeOf(target, prototype)：设置对象原型的函数. 返回一个 Boolean， 如果更新成功，则返回true
3. Reflect.isExtensible(target)：类似于 Object.isExtensible()
4. Reflect.preventExtensions(target)：类似于 Object.preventExtensions()。返回一个Boolean。
5. Reflect.getOwnPropertyDescriptor(target, propertyKey)：类似于 Object.getOwnPropertyDescriptor()。如果对象中存在该属性，则返回对应的属性描述符, 否则返回 undefined
6. Reflect.defineProperty(target, propertyKey, attributes)： Object.defineProperty() 类似。如果设置成功就会返回 true
7. Reflect.ownKeys(target)：返回一个包含所有自身属性（不包含继承属性）的数组。(类似于Object.keys(), 但不会受enumerable影响).
8. Reflect.has(target, propertyKey)：判断一个对象是否存在某个属性，和 in 运算符 的功能完全相同
9. Reflect.get(target, propertyKey[, receiver])：获取对象身上某个属性的值，类似于 target[name]。
10. Reflect.set(target, propertyKey, value[, receiver])：将值分配给属性的函数。返回一个Boolean，如果更新成功，则返回true。
11. Reflect.deleteProperty(target, propertyKey)：作为函数的delete操作符，相当于执行 delete target[name]。
12. Reflect.apply(target, thisArgument, argumentsList)：对一个函数进行调用操作，同时可以传入一个数组作为调用参数。和Function.prototype.apply() 功能类似
13. Reflect.construct(target, argumentsList[, newTarget])：对构造函数进行 new 操作，相当于执行 new target(…args)。
    Reflect的使用

const obj = {
    name: 'xt',
    age: 18
}

const objProxy = new Proxy(obj, {
    get: function(target, key, receiver) {
        console.log('get捕获器', key);
        return Reflect.get(target, key, receiver)
    },
    set: function(target, key, value, receiver) {
        console.log('set捕获器', key);
        return Reflect.set(target, key, value, receiver)
    },
    has: function(target, key) {
        return Reflect.has(target, key)
    },
    deleteProperty: function(target, key) {
        return Reflect.deleteProperty(target, key)
    }
})


objProxy.name = 'haha' // set捕获器 name
console.log(objProxy.name); // get捕获器 name haha