学习笔记 JavaScript ES6 Reflect

学习内容：

• 将Object属于语言内部的方法放到Reflect上
• 修改某些Object方法的返回结果，让其变得更合理
• 让Object操作变成函数行为
• Reflect对象的方法与Proxy对象的方法相辅相成

将Object属于语言内部的方法放到Reflect上

ES之前的设计，有很多属性方法都是在window或Object上面，这样并不规范，所以ES才要升级。

比如下面的代码中，把Object直接改为Reflct就可以直接运行了，这个就是把Object下的defineProperty()方法转移到了Reflect下面：

let obj = {}
let newValue = ''
// Object.defineProperty(obj, 'name', {
Reflect.defineProperty(obj, 'name', {
    get() {
        return newValue
    },
    set(val) {
        console.log('set')
        newValue = val
    }
}) 
obj.name = 'test'
console.log(obj.name)

修改某些Object方法的返回结果，让其变得更合理

// 之前判断能否定义成功需要用try catch
try {
    Object.defineProperty
} catch (e) {

}

// ES6，判断是否定义成功直接直接返回boolean了。
//Reflect.defineProperty()这个方法返回boolean
if(Reflect.defineProperty()){

} else {

}

让Object操作变成函数行为

console.log('assign' in Object) // 命令式操作
console.log(Reflect.has(Object, 'assign')) // 函数式操作

---------
true
true

Reflect对象的方法与Proxy对象的方法相辅相成

看个例子：

let user = {
    name : 'Sure',
    age : 36,
    _password : '***'
}
user = new Proxy(user, {
    get(target, prop) {
        if(prop.startsWith('_')) {
            throw new Error('Error')
        } else {

            // 注意，把下面改写为Reflect
            // return target[prop]
            // 与Proxy一一对应
            return Reflect.get(target, prop) // 拦截get操作，所以是Reflect.get
        }
    }
})

console.log(user.name)

---------
Sure

再来个例子：

let sum = (...args) => {
    let num = 0
    args.forEach(item => {
        num += item
    })
    return num
}

sum = new Proxy(sum, {
    apply(target, ctx, args) {

        // 改为Reflect.apply方法
        // return target(...args) * 2
        return Reflect.apply(target, target, [...args]) * 2
    }
})

console.log(sum(1,2))

其它的写法都类似啦~