在ES6标准中新增了一个功能Proxy,他可以自定义一些常用行为,如:查找、枚举、函数调用等。通过Proxy这个名称也可以看出来它包含了‘代理’的含义,只要有‘代理’的诉求都可以考虑使用Proxy来实现。
let p = new Proxy(target, handler)
解释:
参数 | 含义 |
---|---|
target | 用Proxy包装的目标对象(可以是任何类型的对象,包括原生数组、函数、甚至另一个代理) |
handler | 一个对象,其属性是当执行一个操作时定义代理的行为的函数 |
场景:
读取一个对象的key-value
let o = {
name: 'xiaoming',
age: 20
}
console.log(o.name) //xiaoming
console.log(o.age) //20
console.log(o.from)// undefined
当读取from的时候返回的是undefined,因为o这个对象中没有这个key-value。想想在读取数据的时候,这个数据经常是聚合的,当我们没有按照规范来的时候或者数据缺失的时候,经常会出现这个情况。
如果我们不想在调用key的时候返回undefined,之前的做法是这样的:
console.log(o.from || '')
如果对所有的代码都是这样做,那么阅读性和观赏性就不得而知了。值得庆幸的是,ES6的Proxy可以让我们轻松的解决这一问题:
let o = {
name: 'xiaoming',
age: 20
}
let handler = {
get(obj, key){
return Reflect.has(obj, key) ? obj[key]: ' '
}
}
let p = new Proxy(o, handler)
console.log(p.from)
这个代码是想表达如果o对象有这个key-value则直接返回,如果没有一律返回’ ',当然这里是自定义,可以根据自己的需求来写适合自己业务的规则。
//response.data是JSON格式的数据,来自服务端的响应
//在ES5中只能通过遍历把所有的属性设置为只读
for(let [key] of Object.entries(response.data)){
Object.defineProperty(response.data, key, {
writable: false
})
}
如果使用Proxy就简单很多了:
let data = new Proxy(response.data, {
set(obj, key, value){
return false
}
})
场景2:
对于数据交付而言,校验是不可或缺的一个环境,传统的做法是将校验写在业务逻辑里,导致耦合度较高。如果使用Proxy就可以将代码设计的非常灵活。
//Validator.js
export default (obj, key, value) => {
if(Reflect.has(key) && value > 20) {
obj[key] = value
}
}
import Validator from './Validator'
let data = new Proxy(response.data, {
set: Validator
})
场景3:
如果对读写进行监控,可以这样写:
let validator = {
set(target, key, value) {
if(key === "age"){
if(typeof value !== 'number' || Number.isNan(value)){
throw new TypeError('Age must be a number')
}
if(value <=0 ){
throw new TypeError('Age must be a positive number')
}
}
return true
}
}
const person = { age: 27 }
const proxt = new Proxy(person, validator)
proxy.age = 'foo'
// TypeError: Age must be a number
proxy.age = NaN
// TypeError: Age must be a number
proxy.age = 0
// TypeError: Age must be a positive number
proxy.age = 28
场景4:
示例一个对象,每个对象都有一个自己的id而且只读。
class Component {
constructor(){
this.proxy = new Proxy({
id: Math.random().toString(36).slice(-8)
})
}
get id () {
return this.proxy.id
}
}
const dinosaur = {
name: 'Fred',
isDangerous: true
}
const dinoProxy = Proxy.revocable(dinosaur, {
get: (target, property) => {
return 'RAWRRRRRRR'
}
})
const proxifiedDinosaur = dinoProxy.proxy
console.log(proxifiedDinosaur.name) // 'RAWRRRRRRR'
console.log(proxifiedDinosaur.isDangerous) //'RAWRRRRRRR'
dinoProxy.revoke()
console.log(proxifiedDinosaur.name) // TypeError: cannot perform 'get' on a proxy that has been revoked
console.log(proxifiedDinosaur.isDangerous)// TypeError: cannot perform 'get' on a proxy that has been revoked
一旦revoke调用,proxy就失效了,这也就起到了‘临时’代理的作用