Proxy 入门

211 阅读1分钟

在操作对象或者方法时候可以预先做一些处理,就像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 入门学习 (参照原文