【前端】ES6：Proxy代理和Reflect对象

文章目录

1 Proxy代理

Proxy如其名，它的作用是在对象和和对象的属性值之间设置一个代理，获取该对象的值或者设置该对象的值， 以及实例化等等多种操作， 都会被拦截住， 经过这一层我们可以统一处理，我们可以认为它就是“代理器”。

ES6之前：

let obj ={}// let arr = [1,2,3] // push pop// console.log(box)
Object.defineProperty(obj,"data",{// obj--对象，data--属性get(){
        console.log("get")return box.innerHTML
    },set(value){
        console.log("set",value)// 设置 dom
        box.innerHTML = value
    }})

console.log(obj)

1.1 get方法

let target ={}let proxy =newProxy(target,{get(target, prop){return target[prop]}})

1.2 set方法

let target ={}let proxy =newProxy(target,{get(target, prop){return target[prop]},set(target, prop, value){if(prop ==="data"){
            box.innerHTML = value
        }
        target[prop]= value;}})

1.3 has方法

has捕获器，拦截对象属性的in操作符的调用，当使用in操作符来检查一个属性是否存在于一个对象时，如果对象是个proxy，has捕获器就会被调用。

let target ={_prop:"内部数据"}let proxy =newProxy(target,{get(target, prop){return target[prop]},set(target, prop, value){if(prop ==="data"){
            box.innerHTML = value
        }
        target[prop]= value;},has(target, key){if(key[0]==='_'){returnfalse;}return key in target;}})

1.4 this问题

let target =newSet()const proxy =newProxy(target,{get(target, key){const value =  target[key]// 遇到Function都手动绑定一下this// 正常调用时，this指向proxy// bind修正后，value方法的this指向target对象if(value instanceofFunction){
            console.log(`访问${value}方法了`)returnvalue.bind(target)// 不能是call / apply，改变页面加载之后就立即执行，同步代码// bind 不会立即执行原函数，异步代码 }return value
    }})
proxy.add(1)

Proxy本质上属于元编程非破坏性数据劫持，在原对象的基础上进行了功能的衍生而又不影响原对象，符合松耦合高内聚的设计理念。

2 Reflect对象

Reflect可以用于获取目标对象的行为，它与Object类似，但是更易读，为操作对象提供了一种更优雅的方式。它的方法与Proxy是对应的。

2.1 代替Object的某些方法

const obj ={};
Reflect.defineProperty(obj,'name',{value:'kerwin',writable:false,configurable:false});

2.2 修改某些Object方法返回结果

// 老写法try{
  Object.defineProperty(target, property, attributes);// success}catch(e){// fail}// 新写法if(Reflect.defineProperty(target, property, attributes)){// success}else{// fail}

2.3 命令式变为函数行为

const obj ={name:"kerwin"};//老写法
console.log("name"in obj)//true//新写法
console.log(Reflect.has(obj,'name'))//true//老写法delete obj.name
//新写法
Reflect.deleteProperty(obj,"name")

2.4 配合Proxy

Reflect.set()和Reflect.get()。

let obj ={name:"kerwin"}

Reflect.set(obj,"age",100)
console.log(Reflect.get(obj,"name"))

let target =newSet()const proxy =newProxy(target,{get(target, key){const value = Reflect.get(target, key)if(value instanceofFunction){
            console.log(`访问${value}方法了`)returnvalue.bind(target)}return value
    },set(){// set(target, key, value)return Reflect.set(...arguments)}})
proxy.add(1)

let arr =[1,2,3]let proxy =newProxy(arr,{get(target, key){
        console.log('get', key)return Reflect.get(...arguments)},set(target, key, value){
        console.log('set', key, value)return Reflect.set(...arguments)}})
proxy.push(4)// 能够打印出很多内容// get push     (寻找 proxy.push 方法)// get length   (获取当前的 length)// set 3 4      (设置 proxy[3] = 4)// set length 4 (设置 proxy.length = 4)