详解VUE中的Proxy代理
作者：阿晨学前端
这篇文章主要介绍了Proxy代理对象详解,Proxy 是ES6中提供的一个非常强大的功能，可以用来代理另一个对象，从而拦截、监视并修改这个对象的各种操作,需要的朋友可以参考下
Proxy 是ES6中提供的一个非常强大的功能，可以用来代理另一个对象，从而拦截、监视并修改这个对象的各种操作
首先是Proxy()的参数：
- arget：被代理的对象。
- handler：被代理对象上的自定义行为，也就是对arget进行处理的地方
handler处理函数一都有：
- get(target, propKey, receiver)：拦截对象属性的读取操作。
- set(target, propKey, value, receiver)：拦截对象属性的设置操作，返回一个布尔值
- has(target, propKey)：拦截 propKey in proxy 操作，返回一个布尔值
- deleteProperty(target, propKey)：拦截对象属性的删除操作，返回一个布尔值
- apply(target, object, args)：拦截 Proxy 实例作为函数调用的操作。
- construct(target, args, newTarget)：拦截 Proxy 实例作为构造函数调用的操作，返回一个对象
- ......
下面对get函数进行简单的演示：
let arr = [123,"ac","你好"]
arrPro = new Proxy(arr,{
get(target,prop){
// target 代表被代理的数组，也就是 [123,"ac","你好"]
console.log(target)
// prop 表示要访问的属性，也就是 0
console.log(prop)
return prop in target ? target[prop] : 'error'
}
})
console.log(arrPro[0])下面对set函数进行简单的演示：
let arr = []
let arrPro = new Proxy(arr,{
set(target,prop,val){
if(typeof val === "number"){
target[prop] = val
return true
}else{
return false
}
}
})
arrPro.push(5)
console.log(arr) //[5]下面对has函数进行简单的演示：
let range = {
start:1,
end:5
}
range = new Proxy(range,{
has(target,prop){
return prop >= target.start && prop <= target.end
}
})
console.log(2 in range) // true
console.log(6 in range) // falseget、set、deleteProperty小集合：
let user = {
name: 'ac',
age: 12,
_password: 'xxx'
}
user = new Proxy(user, {
get(target, prop) {
if (prop.startsWith('_')) {
throw new Error('不可访问')
} else {
return target[prop]
}
},
set(target, prop, val) {
if (prop.startsWith('_')) {
throw new Error('不可设置')
} else {
target[prop] = val
return true
}
},
deleteProperty(target, prop) {
if (prop.startsWith('_')) {
throw new Error('不可删除')
} else {
delete target[prop]
return true
}
}
})
console.log(user.age) //12
console.log(user._password) //Error:不可访问
user.age = 22
console.log(user.age) //22
delete user.age
console.log(user.age) //undefined下面对apply函数进行简单的演示：
let sum = (...args) =>{
let num = 0
args.forEach(item =>{
num += item
})
return num
}
sum = new Proxy(sum,{
apply(target,ctx,args){
return target(...args) * 2
}
})
console.log(sum(2,5)) //14
console.log(sum.call(null,2,5)) //14
console.log(sum.apply(null,[2,5])) //14下面对construct函数进行简单的演示：
let User = class {
constructor(name){
this.name = name
}
}
User = new Proxy(User,{
construct(target,args,newTarget){
console.log("代理拦截") //代理拦截
return new target(...args) //User {name: 'ac'}
}
})
console.log(new User('ac'))vue3中就是用Proxy实现的双向数据绑定
到此这篇关于Proxy代理对象详解的文章就介绍到这了,更多相关Proxy代理内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！