前言
Proxy 也就是代理,可以帮助我们完成很多事情,例如对数据(对象,数组)的处理,对构造函数的处理,对数据的验证,说白了,就是在我们访问对象前添加了一层拦截,可以过滤很多操作,而这些过滤,由你来定义。
想了解更多请戳:官方文档
语法
let p = new Proxy(target, handler);
参数
1、target :需要使用Proxy包装的目标对象(可以是任何类型的对象,包括原生数组,函数,甚至另一个代理)。
2、handler: 一个对象,其属性是当执行一个操作时定义代理的行为的函数(可以理解为某种触发器)。具体的handler相关函数请查阅官网
简单示例:
<script>
'use strict'
const obj = {name: 'baidu', site: 'baidu.com'}
let proxy = new Proxy(obj, {
// 获取属性
get (target, key){
console.log('获取了getter属性');
return target[key]
}
})
console.log(proxy.name);
</script>
上方的案例,我们使用Proxy将obj
对象包装起来,再返回给obj
,此时的obj
已经成为了一个Proxy实例,我们对其的操作,都会被Proxy拦截。Proxy有两个参数,第一个是target,也就是我们传入的obj
对象,另一个则是handler,也就是我们传入的第二个参数,一个匿名对象。在handler中定义了一个名叫get的函数,当我们获取obj
的属性时,则会触发此函数。
咱们再来试试使用set来拦截一些操作,并将get返回值更改
const person = {
name: '小明',
age: 18,
professional: 'student'
}
let xiaoming = new Proxy(person, {
get(targetObj, propertyKey) {
return targetObj[propertyKey]
},
set(targetObj, propertyKey, value) {
if (propertyKey == 'age' && typeof value !== 'number') {
throw Error('age字段必须是number类型')
}
targetObj[propertyKey] = value
return Reflect.set(targetObj, propertyKey, value);
// 或者 return true
}
})
xiaoming.age = 14
console.log(xiaoming.name);
console.log(xiaoming);
在严格模式'use strict'
下,没有return Reflect.set(targetObj, propertyKey, value);
亦会抛出错误,因为set函数必须返回一个boolean值,只有返回值为true时才表示修改成功,我们没有手动return,函数会自动返回undefined,undefined != true,所以报错是正常的
在 set 拦截函数中判断了如果是更改 age 属性时,类型不是 Number则抛出错误
最后,正确的输出了我们想要的结果!