Proxy

proxy 代理 ES6 增强 对象和函数(方法) 生命周期 预处理

就是在函数执行之前先预处理一下

语法

let p = new Proxy(target, handler);

target就是你要处理的函数或者是对象，handler就是你要对该函数或者对象进行的操作

target:

let target={
    add:function(val){
        return val+10
    },
    name:'I am Jsfei'
}

handle内有三个内置方法分别是get,set,apply。这三个方法的用途：
get:在你得到对象内的属性时之前进行操作
get(target,key,property)

• target：得到的目标值
• key:目标的key值，相当于对象的属性
• property:不常用

set:在你改变对象内的属性时之前进行操作
set(target,key,value,receiver)

• target:目标值
• key:目标的key值
• value:要改变的值
• receiver:改变之前的值

apply:在调用函数之前进行的操作

handle:

let handle = {
    get: function(target, key, property) {
        console.log('com in Get')
        return target[key]
    }
}

声明Proxy

let pro=new Proxy(target,handle)

get

let target = {
    add: function(val) {
        return val + 10
    },
    name: 'I am Jsfei'
}
let handle = {
    get: function(target, key, property) {
        console.log('com in Get')
        return target[key]
    }
}
let pro = new Proxy(target, handle)
console.log(pro.name) 
//com in Get
//I am Jsfei

set

let target = {
    add: function(val) {
        return val + 10
    },
    name: 'I am Jsfei'
}
let handle = {
    set: function(target, key, value, receiver) {
        console.log(`set ${key}=${value}`)
        return target[key]
    }
}
let pro = new Proxy(target, handle)
pro.name = "范飞飞"
console.log(pro.name)
    //set name = 范飞飞
    //I am Jsfei

apply

apply的作用就是调用内部的方法,它使用在方法体是一个匿名函数时.

let target = function() {
    return 'I am JSfei'
}
let handle = {
    apply(target, ctx, args) {
        console.log('do apply');
        return Reflect.apply(...arguments)
    }
}
let pro = new Proxy(target, handle)

console.log(pro())
    //do apply
    //I am JSfei

通过Proxy实现一个简单的数据响应

let onWatch = (obj, setBind, getLogger) => {
  let handler = {
    get(target, property, receiver) {
      getLogger(target, property)
      return Reflect.get(target, property, receiver)
    },
    set(target, property, value, receiver) {
      setBind(value, property)
      return Reflect.set(target, property, value)
    }
  }
  return new Proxy(obj, handler)
}

let obj = { a: 1 }
let p = onWatch(
  obj,
  (v, property) => {
    console.log(`监听到属性${property}改变为${v}`)
  },
  (target, property) => {
    console.log(`'${property}' = ${target[property]}`)
  }
)
p.a = 2 // 监听到属性a改变
p.a // 'a' = 2