在操作对象或者方法时候可以预先做一些处理,就像vue中的钩子函数一样。
声明
let _proxy = new Proxy({},{}) 接收两个参数,第一个是对象或者方法,第二个是预处理的代码 get,set,apply 。
get 属性
在获取对象的属性值的预处理方法,有三个参数
- target 得到的目标值
- key 目标的 key 值 , 相当于对象的属性
- property 相当于 new Proxy 的第一个参数
let _proxy = new Proxy({ fun: function () { console.log('执行 _pro对象中的 fun() 函数') }, _str: '我是_pro对象中的_str字符串!'}, { get(target, key, property) { console.log('target为', target) console.log('key为', key) console.log('property为', property) console.log('执行获取数据之情的预处理函数') return target[key] }, })注意 : get 方法中 必须有返回值
set 属性
在修改对象中的属性值的预处理方法,有四个参数
- target 目标值
- key 目标的key
- value 要 修改后 的值
- receiver:改变前的原始值。
let _proxy = new Proxy({ fun: function () { console.log('执行 _pro对象中的 fun() 函数') }, _str: '我是_pro对象中的_str字符串!'}, { get(target, key, property) { console.log('target为', target) console.log('key为', key) console.log('property为', property) console.log('执行获取数据之情的预处理函数') return target[key] }, set: function (target, key, value, receiver) { console.log('target为', target) console.log('key为', key) console.log('value为', value) console.log('receiver为', receiver) console.log(` 执行设置数据的预处理函数 setting ${key} = ${value}`); return target[key] = value; } })_proxy._str = '修改之后的字符串!';console.log(_proxy._str);apply 属性
apply的作用是调用内部的方法,它使用在方法体是一个匿名函数时。
let _fun = function () { console.log('我是_fun 函数的执行语句')}let _hander = { apply(target, ctx, args) { console.log('target为', target) console.log('ctx为', ctx) console.log('args为',args) console.log('执行 _fun 函数的预处理语句'); return Reflect.apply(...arguments); }}let _pro_apply = new Proxy(_fun, _hander)_pro_apply()proxy 入门学习 (参照原文)