【ES6系列】Proxy
Proxy 是 ES6 中新增的功能，它可以用来自定义对象中的操作。Vue3.0 中将会通过 Proxy 来替换原本的 Object.defineProperty 来实现数据响应式。
语法
let p = new Proxy(target, handler)
解释
| 参数 | 含义 | 必选 |
|---|---|---|
| target | 用 Proxy 包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理） | Y |
| handler | 一个对象，其属性是当执行一个操作时定义代理的行为的函数 | Y |
// 读法示例
let o = {
name: 'lee',
price: 190
}
let d = new Proxy(o, {
get(target, key) {
if (key === 'price') {
return target[key] + 20
} else {
return target[key]
}
}
})
console.log(d.price, d.name) // 210 "lee"场景一：读写操作拦截
// 场景一：读写操作拦截-Proxy
let o = {
name: 'lee',
price: 190
}
// 中介函数不直接暴露o
let d = new Proxy(o, {
get(target, key) { // 读操作拦截-可读
return target[key]
},
set(target, key, value) { // 写操作拦截-不可写
return false
}
})
d.price = 300 // 赋值操作被拦截
console.log(d.price, d.name) // 190 "lee"
// 场景一：读写操作拦截-ES5 中 Proxy 的实现过程
for (let [key] of Object.entries(o)) { // Object.entries(o) 可o转换为键值对形式
// 属性描述符
Object.defineProperty(o, key, {
writable: false
})
}
o.price = 300 // 不可写
console.log(o.name, o.price) // lee 190es5的实现方式和ES6的Proxy区别：ES5写法key被彻底锁死，不可写，只有通过再次修改属性描述符才可以修改属性值。而ES6的代理从用户角度来说是锁死的，但中介函数还可以操作。
场景二：用户交互操作，较验数据保护，数据规范
// 业务场景描述：1、不能修改数据结构，拦截无效数据 2、只能修改price且不能超过300
let o = {
name: 'lee',
price: 190
}
let d = new Proxy(o, {
get(target, key) {
return target[key] || '' // 异常处理
},
set(target, key, value) {
if (Reflect.has(target, key)) {
if (key === 'price') {
if (value > 300) { // 大于300 不允许写操作
return false
} else {
target[key] = value
}
}
} else { // 操作属性不是 price 不允许写操作
return false
}
}
})
// d.price = 280
// console.log(d.price, d.name) // 280 "lee"
// d.price = 310
// console.log(d.price, d.name) // 190 "lee"
// d.price = 301
// d.name = 'chris'
// console.log(d.price, d.name) // 190 "lee"
d.age = 3
console.log(d.price, d.name, d.age) // 190 "lee" ""
// 上述功能模块化/解耦
let o = {
name: 'lee',
price: 190
}
let validator = (target, key, value) => {
if (Reflect.has(target, key)) {
if (key === 'price') {
if (value > 300) { // 大于300 不允许写操作
return false
} else {
target[key] = value
}
}
} else { // 操作属性不是 price 不允许写操作
return false
}
}
let d = new Proxy(o, {
get(target, key) {
return target[key] || '' // 异常处理
},
set: validator
})
// d.price = 280
// console.log(d.price, d.name) // 280 "lee"
// d.price = 310
// console.log(d.price, d.name) // 190 "lee"
// d.price = 301
// d.name = 'chris'
// console.log(d.price, d.name) // 190 "lee"
d.age = 3
console.log(d.price, d.name, d.age) // 190 "lee" ""场景三：用户异常行为监控、上报
let validator = (target, key, value) => {
if (Reflect.has(target, key)) {
if (key === 'price') {
if (value > 300) { // 大于300 不允许写操作
throw new TypeError('price exceed 300') // 不满足规则，触发错误
// return false
} else {
target[key] = value
}
}
} else { // 操作属性不是 price 不允许写操作
return false
}
}
let d = new Proxy(o, {
get(target, key) {
return target[key] || '' // 异常处理
},
set: validator
})
d.price = 310
console.log(d.price, d.name, d.age) // Uncaught TypeError: price exceed 300场景四：组件化开发中异常组件瞄准
业务场景描述：声明一个类，每次生成实例都分配id，要求：每次生成的实例、不同实例之间的id随机且唯一，只读。
class Component {
constructor() {
this.proxy = new Proxy({
id: Math.random().toString(36).slice(-8)
}, {}) //生成一个随机串转换成36进制的字符串，并截止后八位
}
get id() {
return this.proxy.id
}
}
let com = new Component()
let com2 = new Component()
for (let i = 0; i < 10; i++) { // 读取十次实例对象的id
console.log(com.id, com2.id) // dmi2frvf tkk9v1qh
}
com.id = 'abc';
console.log(com.id, com2.id) // dmi2frvf tkk9v1qh撤销代理：
Proxy.revocable()
创建一个临时代理或是可撤销的代理。返回的是代理数据和撤销的操作两部分内容。
let o = {
name: 'lee',
price: 190
}
// new Proxy()返回的数据是被代理的数据
// Proxy.revocable() 创建一个临时代理或是可撤销的代理。返回的是代理数据和撤销的操作两部分内容
let d = Proxy.revocable(o, {
get(target, key) {
if (key === 'price') {
return target[key] + 20
} else {
return target[key]
}
}
})
console.log(d.proxy.price, d)
setTimeout(function () {
d.revoke()
setTimeout(function () {
console.log(d.proxy.price, d) // Uncaught TypeError: Cannot perform 'get' on a proxy that has been revoked
}, 100)
}, 1000)思考：
1、组件初始化的时候都赋值一个可读且随机的ID，该怎么做？
2、临时代理有哪些应用场景呢？
3、如何把接口的数据用代理进行包装？