Proxy看单词就知道大概是干嘛的了呗!无非就是代理呗。
虽然看了好几天才理解大概是干什么的,怎么使用,然鹅到现在我也无法想到怎么在项目中使用上它。此时我脸上不自觉的露出了尴尬而又不失礼貌的微笑,你就别脸上笑嘻嘻,心里麻麻批这特么学了有啥用你告诉我撒。
就当长见识了呗!说代理感觉很懵逼,其实可以这么理解,Proxy就是在目标对象之前架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写。因为这个单词的原意是代理,所以我们就叫做“代理器”。
结构
var proxy = new Proxy(target, handler)
- new Proxy()表示生成一个Proxy实例
- target参数表示所要拦截的目标对象
- handler参数也是一个对象,用来定制拦截行为。
get()简单实例
// target目标对象
var person = {
name: 'zdf'
}
// handler拦截行为
var handler = {
get:function(){
return "疯子"
}
}
// 实例new Proxy()
var proxy = new Proxy(person, handler)
// 使用
proxy.name
proxy.title
proxy.job
// 打印结果
console.log(proxy.name) // => 疯子
console.log(proxy.title) // => 疯子
console.log(proxy['name']) // => 疯子
- get() 是proxy()自带的一个拦截操作,拦截对象属性的读取,比如proxy.name和proxy['name']。
- get(target, propKey, receiver)
- target: 目标对象; propKey: 属性名; receiver: proxy 实例本身(严格地说,是操作行为所针对的对象);
set()简单实例
// handler拦截行为修改为以下方式其他的不改变
var handler = {
get(target, prop) {
if (prop !== 'age') {
return '疯子'
}
},
set(target,prop,value) {
if (prop === 'age') {
if (!Number.isInteger(value)) {
throw new TypeError('年龄一定是数字!')
}
if (value > 150) {
throw new RangeError('如果是地球人,目前还没有活过150岁的货色!')
}
}
// 满足上面的条件后直接赋值给对象
return target[prop] = value
}
}
// 打印结果
console.log(proxy.age = 100 ) // => 100
console.log(person.age) // => 100 就这么变成一百岁了
console.log(proxy.age = '万岁万岁万万岁') // => "TypeError: 年龄一定是数字!"
console.log(proxy.age = 250 ) // => "RangeError: 如果是地球人,目前还没有活过150岁的货色!"
// ps: 不能一起打印,只能逐条打印,打印完了知道效果后就注释掉吧。
- set()拦截对象属性的设置,比如proxy.age= 100或proxy['age'] = 100,返回一个布尔值。
- set(target, propKey, value, receiver)
- target: 目标对象; propKey: 属性名; value: 属性值; receiver: proxy 实例本身;
apply()简单实例
// target添加一个方法
var person = {
name:'zdf',
say(){
'we will rock you!'
}
}
// handler添加一个apply()拦截
var handler = {
apply(target, ctx, args){
console.log('我说:’ + args[0])
}
}
// 建一个新实例proxy1
var proxy1 = new Proxy(person.say, handler)
// 使用
proxy1('去你妈的房产商都去吃米田共吧!') // => 我说:去你妈的房产商都去吃米田共吧
- apply方法拦截函数的调用、call和apply操作。
- apply(target, context, args)
- target: 目标对象; context: 上下文对象(this); args: 目标对象的参数数组;
总结
Proxy七七八八一共有十三种拦截方法,如果你有空研究可以去网上自己学学看。我就不写了,太多了你也看不下去的。了解一下总是没错的,感觉还是有地方用得到的。