关于es6中的proxy代理对象

es6中新增的proxy代理对象，其作用与es5中的Object.defineDroperty类似，对被代理的数据做getter、setter处理，但是proxy的功能更强大，下面简单看下使用

const person = { name:'zhangxu', age: 20 } const personProxy = new Proxy(person,{ //target是被代理的目标对象 property是对象中的属性 get(target,property){ //设置访问对象中某属性值的返回值 return property in target ? target[property] : 'default' }, //value是对象的属性被赋予的新值 set(target,property,value){ //对属性值的变更进行限制，age属性值只能是整数，否则报错 if(property === 'age'){ if(!Number.isInteger(value)){ throw new TypeError(`${value} is not a int`) } } target[property] = value } })

proxy与defineDroperty的对比

defineDroperty只能监视属性的读写，Proxy能监视更多的对象操作,如delete操作，对象中方法的调用等 const person = { name:'zhangxu', age: 20 } const personProxy = new Proxy(person,{ deleteProperty(target,property){ //对删除操作进行监听 delete target[property] } }) delete personProxy.age

Proxy其他可监听的操作如下，可以自行尝试

2.Proxy能更好得监视数组对象

const list = [] const listProxy = new Proxy(list,{ set(target,proerty,value){ target[property] = value return true//表示设置成功 } }) listProxy.push(100)

3.Proxy以非侵入的方式监管了对象的读写