手把手实现vue响应式 - Reflect（四）

Reflect的作用

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

它主要提供了很多操作JavaScript对象的方法，类似 Object操作对象的方法

• Reflect.getPrototypeOf(target)类似于 Object.getPrototypeOf()
• Reflect.defineProperty(target, propertyKey, attributes)类似于Object.defineProperty()

有了Object操作对象的方法，为什么还需要 Reflect 这样的新增对象呢？

• 早期的ECMA规范中没有考虑到对对象本身的操作如何设计才会规范，所以一些API放到了Object上
• 但是Object作为一个构造函数，这些操作放到它上面并不合适
• 另外还包含类似in 、delete操作符，让js看起来有一些奇怪
• 在ES6中新增了Reflect，让我们这些操作都集中到了Reflect对象上
   

 比较 Reflect 和 Object 方法 - JavaScript | MDN

Reflect 和 Proxy一起使用

const obj = {
    name: 'deyang',
    age: 24
}

const objProxy = new Proxy(obj, {
    get(target, key, receiver) {
        return target[key]
       
    },
    set(target, key, newValue, receiver) {
        target[key] = newValue
        const result = Reflect.set(target, key, newValue)
        
    }
})

objProxy.name = 'kobe'
console.log(objProxy.name)

上面的使用还是涉及对原来的对象属性的读取和赋值，这样与我们使用 proxy的初衷有点事与愿违。

我们可以通过 Reflect调用 get 和 set 方法，第一个参数为目标对象，第二个参数为属性名

const obj = {
    name: 'deyang',
    age: 24
}

const objProxy = new Proxy(obj, {
    get(target, key, receiver) {
        console.log('get--------'）
        return Reflect.get(target, key, receiver)
    },
    set(target, key, newValue, receiver) {
        console.log('set--------')
        Reflect.set(target, key, newValue)
    }
})

objProxy.name = 'kobe'
console.log(objProxy.name)

 但是使用 Reflect和原来的直接操作对象属性有什么区别呢？

以 Reflect.set 为例，返回的是一个布尔值，可以让我们清楚的知道某个属性是否设置成功，如果原来的属性被 Object.freeze()，冻结了，那么通过 target[key] = newValue 其实是无效的。有了Reflect.set() 返回的布尔值，我们就可以做相对应的操作，成功走成功的逻辑，失败走失败的逻辑

const objProxy = new Proxy(obj, {
    get(target, key, receiver) {
        console.log('get--------')
        // return target[key]
        return Reflect.get(target, key, receiver)
    },
    set(target, key, newValue, receiver) {
        console.log('set--------')
        // target[key] = newValue
        const result = Reflect.set(target, key, newValue)
        if (result) {
        } else { }
    }
})

 因此 Reflect 这个API比原来 Object 上面的方法更加的丰富