深入理解ES6之——代理和反射(proxy)
程序员文章站
2022-03-20 17:14:18
通过调用new proxy()你可以创建一个代理来替代另一个对象(被称为目标),这个代理对目标对象进行了虚拟,因此该代理与该目标对象表面上可以被当做同一个对象来对待。 创建一个简单的代理 当你使用Proxy构造器来创建一个代理时,需要传递两个参数:目标对象以及一个处理器,后者是定义了一个或多个陷阱函 ......
通过调用new proxy()你可以创建一个代理来替代另一个对象(被称为目标),这个代理对目标对象进行了虚拟,因此该代理与该目标对象表面上可以被当做同一个对象来对待。
创建一个简单的代理
当你使用proxy构造器来创建一个代理时,需要传递两个参数:目标对象以及一个处理器,后者是定义了一个或多个陷阱函数的对象。如果未提供陷阱函数,代理会对所有操作采取默认行为。
使用set陷阱函数验证属性值
let target = {}; var proxy = new proxy(target, { set(traptarget, key, value, receiver) { if (!traptarget.hasownproperty(key)) { if (isnan(value)) { throw new error('proxy must be a number'); } } return reflect.set(traptarget, key, value, receiver); } }) proxy.count = 1; console.log(proxy.count); console.log(target.count); try { proxy.anthorname = 'cc'; } catch (err) { console.log(err.message); }
使用上述方法可以对添加给对象的属性值进行验证,如果值为非数字,就会抛出错误。
使用get陷阱函数进行对象外形验证
在js中,如果读取一个对象中不存在的属性时,会显示undefined,这对于排查问题很不利。使用代理进行对象外形验证就可以帮你从这个错误中拯救出来。
let proxy = new proxy({}, { get(traptarget, key, receiver) { if (!(key in receiver)) { throw new error(`property ${key} not exist`); } return reflect.get(traptarget, key, receiver); } }) proxy.name = 'cc'; try { console.log(proxy.age); } catch (error) { console.log(error.message); } //输出结果 property age not exist
上述代码对打印的对象属性进行验证,如果不存在则抛出一个错误。
使用has陷阱函数隐藏属性
in运算符用于判断指定对象中是否存在某个属性,如果对象的属性名与指定的字符串或符号值相匹配,那么in运算符应当返回true,无论该属性是对象自身的属性还是原型的属性。代理允许你使用has陷阱函数来解决这个问题
has陷阱函数会在使用in运算符的情况下被调用,并且会被传入两个参数:
- traptarget:需要读取属性的对象(即代理的目标对象)
- key:需要检查的属性的键(字符串类型或符号类型)reflect.has()方法接收与之相同的参数并向in运算符返回默认相应结果
let target = { name: 'cc', age: 26, sex: 'man' } let proxy = new proxy(target, { has(traptarget, key) { if (traptarget.hasownproperty(key)) { return reflect.has(traptarget, key); } else { return false; } } }) console.log('tostring' in proxy); console.log('name' in proxy); console.log('age' in proxy);
使用deleteproperty陷阱函数避免属性被删除
delete运算符能从指定对象上删除一个属性,在删除成功时返回true,否则返回false
deleteproperty陷阱函数会在使用delete运算符去删除对象属性时被调用,并且会被传入两个参数:
- traptarget:需要删除属性的对象
- key:需要删除的属性的键
reflect.deleteproperty()方法也接受两个参数,并提供了deleteproperty陷阱函数的默认实现。
let target = { name: 'target', value: 42 } let proxy = new proxy(target, { deleteproperty(traptarg, ke) { if (ke === 'value') { return false; } else { return reflect.deleteproperty(traptarg, ke); } } }) let result = delete proxy.value; let result1 = delete proxy.name; console.log(result); console.log(result1);