【前端】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)// 设置 dombox.innerHTML = value}
})console.log(obj)

1.1 get方法

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

1.2 set方法

let target = {}
let proxy = new Proxy(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 = new Proxy(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] === '_') {return false;}return key in target;}
})

1.4 this问题

let target = new Set()
const proxy = new Proxy(target, {get(target, key) {const value =  target[key]// 遇到Function都手动绑定一下this// 正常调用时，this指向proxy// bind修正后，value方法的this指向target对象if(value instanceof Function) {console.log(`访问${value}方法了`)return value.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 = new Set()
const proxy = new Proxy(target, {get(target, key) {const value = Reflect.get(target, key)if (value instanceof Function) {console.log(`访问${value}方法了`)return value.bind(target)}return value},set() { // set(target, key, value)return Reflect.set(...arguments)}
})
proxy.add(1)

let arr = [1, 2, 3]
let proxy = new Proxy(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)