Proxy
可以理解成,在目标对象之前架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写
之前我们是这样的
var obj = {}
obj.name = 'shehui'
接着我们访问该属性
也得到了我们初始定义的数据,但是如果我们要在获取obj.name的时候返回"oh!shehui",加上前缀修饰,这个时候我们就可以用到proxy来进行对象的拦截。
var obj = new Proxy({ name: 'shehui' }, {
get (target, key, receiver) {
console.log(target, key, receiver)
}
})
可以看到我们获取obj的时候,返回的是也proxy对象,当我们访问obj.name时候会触发get方法,打印出来一些信息,target是原生对象,key是对象的属性,receiver是proxy包装的对象
接下来实现我们的需求,在'shehui'前面加上'oh!'
var obj = new Proxy({ name: 'shehui' }, {
get (target, key, receiver) {
return 'oh!' + target[key]
}
})
这样就拦截到了我们的对象,在不改变原对象的前提下,进行了重新赋值。
var proxy = new Proxy(target, handler);
生成一个proxy实例,target是我们要拦截的目标对象,handle是拦截的行为操作
var obj = new Proxy({}, {
get (target, property) {
return 20
}
})
get方法的target是要拦截的对象,property是 拦截对象的属性,上面的会让所有的属性访问都是20
如果要针对单独的属性进行设置,就可以使用if来判断,也可以用switch...case
var obj = new Proxy({}, {
get (target, property) {
if (property == 'name') {
return 'gaofeng'
} else if (property == 'age') {
return 100
}
}
})
var obj = new Proxy({}, {
get (target, property) {
switch (property) {
case 'name':
return 'gaofeng';
case 'age':
return 100;
default:
return '默认';
}
}
})
若果没有没有拦截方法,那么target就跟obj是一样的
var target = {};
var handle = {}
var obj = new Proxy(target, handle)
var target = {};
var handle = {
get (target, property) {
return 20
}
}
var obj = { proxy: new Proxy(target, handle) }
将Proxy对象实例设置到proxy属性上,这样可以通过obj.proxy进行访问
Proxy对象实例作为其他对象的原型,进行拦截
//一般情况下
var proxy = new Proxy({}, {
get (target, property) {
return 40
}
})
var obj = {}
//把proxy实例作为新创建对象的原型
var proxy = new Proxy({}, {
get (target, property) {
return 40
}
})
var obj = Object.create(proxy)
var person = {
name: 'world',
age: 20
}
var proxy = new Proxy(person, {
get (target, name) {
if (name in target) {
return target[name]
} else {
throw new Error('没有找到相关' + name + '的属性')
}
}
})