重学ES6之代理Proxy和反射Reflect

let obj = {}
let newVal = ""
Object.defineProperty(obj,'name',{
    get() {
        return newVal
    }
    set(val) {
        newVal = val
    }
})
复制代码

let obj = {}
const p = new Proxy(obj,{
    
})
p.name = 'imooc'
console.log(obj.name) // imooc
// 上面代码没有进行任何配置代理拦截 所以对于代理p的才会原封不动的到obj上


// 增加一些拦截的钩子
// 注意这个例子是用in检查receiver（代理）而非target，
// 是因为防止receiver是否含有has陷阱，
// 如果有has陷阱就可以对in进行一层拦截。
// 而源对象target可能会忽略in操作符的has陷阱从而引发错误。
cosnt array = [7,8,9]
const p = new Proxy(arr, {
    get(target,props,receiver) {
        // target 表示源对象（被代理的对象）
        // props 表示读取的属性key值
        // receiver表示操作发生的对象（通常是代理）
        if(!(props in receiver)) {
            throw new TypeError("key值不存在")
        }
        // Reflect反射API以对象的形式出现，对象中方法的默认特性与相同的底层操作一致。
        // 也就是return Refelct API就是默认的get值。
        return Reflect.get(target,props,reveiver)
    }
})
复制代码

let arr = new Proxy(arr,{
    set(target,key,value,receiver) {
        if(typeof key !== 'number') {
            throw new TypeError("属性必须是数字")
        }
        return Reflect.set(target,key,value,receiver)
    }
})
复制代码

let range = {
    name:"target",
    vlaue:42
}
let proxy = new Proxy(range, {
    has(target,key) {
        if(key === 'value') {
            return false // 表示碰到key为value的返回false
        }else {
            return Reflect.has(target,key)
        }
    }
})
复制代码

let userInfo = {
    username:"wanghaoyu",
    age:23,
    _password:"***" // 下划线开头的***我并不想被Object.keys()，forin等取到
}

// 这个例子使用了一个ownKeys陷阱，它首先调用Reflect.ownKeys()获取目标的默认key列表
// 接下来用filter()方法过滤掉以下划线自负开始的字符串。然后将过滤后的数组元素添加到proxy的方法返回上
user = new Proxy(userInfo,{
    ownKeys(target) {
    // 返回不以_开头的属性数组
        return Reflect.ownKeys(tarrget).filter(i => !i.startsWith("_"))
    }
})
Object.keys(userInof) // [username,age]
复制代码

let user = {
    name:"wanghaoyu",
    age:18,
    _password:"***"
}
// 我希望下划线开头的_password属性不可以删除
user = new Proxy(user,{
    deleteProperty(target,key) {
        if(key.startsWith("_")) {
            return false
        }else {
            return Reflect.deleteProperty(target,key)
        }
    }
})
复制代码

// 注意形参上的...args并不是扩展，是rest参数
// 将传入的参数合成成为一个数组Array
let sum = (...args) => {
    let num = 0
    args.forEach(i => {
        num += i
    })
    return num
}

// proxy apply
let proxy = new Proxy(sum,{
    apply:(target,this,args) => {
        return Reflect.apply(target,this,args) *2
    }
})

console.log(sum(10,16)) // 26
console.log(proxy(10,12)) // 52
复制代码

let user = class User {
    
}

let proxy = new Proxy(user,{
    construct: (target,arguments,newTarget) => {
     return Reflect.constructd(target,arguments,newTarget)   
    }
})

复制代码