- 代理
proxy在目标对象的外层搭建了一层拦截，外界对目标对象的某些操作，必须通过这层拦截
var proxy = new Proxy(target, handler);
new Proxy()表示生成一个Proxy实例，target参数表示所要拦截的目标对象，handler参数也是一个对象，用来定制拦截行为
- 常用拦截方法
1.get 拦截对象属性的读取
let arr = [7, 8, 9];
arr = new Proxy(arr, {
get(target, prop) {
return prop in target ? target[prop] : 'error'
}
})
console.log(arr[3]) //error
console.log(arr[1]) //8
2.set 拦截对象属性的设置，返回一个布尔值
let arr = [7, 8, 9];
newArr = new Proxy(arr, {
set(target, prop, val) {
if (typeof(val) === 'number') {
target[prop] = val
return true
} else {
return false
}
}
})
newArr.push(2)
console.log(newArr[1]) //8
console.log(arr) //[7, 8, 9, 2]
newArr.push(11)
console.log(arr) //[7, 8, 9, 2, 11]
3.has 拦截propKey in proxy 的操作，返回一个布尔值
let range = {
start: 1,
end: 5,
}
range = new Proxy(range, {
has(target, prop) {
return prop >= target.start && prop <= target.end;
}
})
console.log(3 in range) //true
console.log(6 in range) //false
- ownKeys 拦截Object.getOwnPropertyNames(proxy)、Object.getOwnPropertySymbol(proxy)、Object.keys(proxy)、 for.....in循环 返回一个数组
let userinfo = {
username: 'kiw',
age: 18,
_password: '***',
[Symbol()]: '我是唯一的',
};
let p = new Proxy(userinfo, {
ownKeys(target) {
return Object.keys(target).filter(item => {
return !item.startsWith('_')
})
}
})
console.log(Object.getOwnPropertyNames(p)) //["username", "age"]
console.log(Object.getOwnPropertySymbols(p)) //[]
console.log(Object.keys(p)) //["username", "age"]
for (const key in p) {
const element = p[key];
console.log(element) //kiw 18
}
- deleteProperty 拦截delete proxy[propKey]的操作，返回一个布尔值
let obj = {
username: 'kiw',
age: 18,
}
let p = new Proxy(obj, {
deleteProperty(target, prop) {
delete target[prop]
return true
}
})
delete p.age;
console.log(obj) //{username:"kiw"}
- apply 拦截函数的调用、call和apply操作
let sum = function(...args) {
let count = 0;
args.forEach((item) => {
count += item
})
return count;
};
let p = new Proxy(sum, {
apply(target, ctx, args) {
return target(...args) * 2
}
})
console.log(p(1, 2, 3, 4)) //20
console.log(p.call(null, 1, 2, 3, 4)) //20
console.log(p.apply(null, [1, 2, 3, 4])) //20
- construct 拦截new命令，返回一个对象
let User = class {
constructor(name) {
this.name = name;
}
}
User = new Proxy(User, {
construct(target, args, newTarget) {
return new target(...args)
}
})
console.log(new User('kiw')) //{name: "kiw"}
proxy的作用
- 拦截和监视外部对对象的访问
- 降低函数或类的复杂度
- 在复杂操作前对操作进行校验或对所需资源进行管理
