es6系列-Proxy-一一网

基本概念：

Proxy 可以理解为在目标对象之前建立了一个拦截,外界访问这个对象的时候都会经过这个拦截。Proxy可以对外界的访问进行过滤和改写。

基础使用和基本参数：

Proxy的基本用法就是下面的形式，使用new Proxy 生成一个实例。target参数表示所要拦截的目标对象，handler参数也是一个对象，用来定制拦截行为（有多达13种拦截行为）。不过我们在调用的时候就是要调用生成的Proxy对象而不是原对象，不然的话结果不会经过处理。

var proxy = new Proxy(target,handeler);

let params = {
    name:'11111'
};
let obj = new Proxy(params,{
    get:function(target,propkey,_proxy){
        return '哈哈哈哈'
    }
});
consolo.log(params.name);  // 11111
consolo.log(obj.name);    // 哈哈哈哈
复制代码

使用Proxy代理数组：

Proxy不但可以直接监听数组，而且代理数组后可以监听到数组常用的方法对数组产生的改变

let arr = []
let arrProxy = new Proxy(arr, {
  get: (target, prop) => {
    console.log('get value by proxy')
    return prop in target ? target[prop] : undefined
  },
  set: (target, prop, value) => {
    console.log('set value by proxy')
    target[prop] = value
    return true
  }
})
arrProxy.push(1)
// get value by proxy  // 获取数组arr的push方法
// get value by proxy  // 获取数组arr的length属性
// set value by proxy  // 设置arr[0] = 1
// set value by proxy  // 设置数组arr长度为1
arrProxy[0] = 1
// set value by proxy
arrProxy[0] = 2
// set value by proxy 
复制代码

使用Proxy拦截深层对象（对象的属性还是对象）：

在get拦截方法内进行判断，如果是对象并且不等于null。就 return new Proxy(target[key], handler) 使用Proxy进行重新代理

function observerProxy(obj) {
        let handler = {
            get(target, key, receiver) {
                // 核心代码   如果是对象，就递归添加 proxy 拦截
                if (typeof target[key] === 'object' && target[key] !== null) {
                    return new Proxy(target[key], handler)
                }
                return Reflect.get(target, key, receiver)
            },
            set(target, key, value, receiver) {
                return Reflect.set(target, key, value, receiver)
            }
        }
        return new Proxy(obj, handler)
    }
    let obj = {
        name: '守候',
        flag: {
            book: {
                name: 'js',
                page: 325
            },
            interest: ['火锅', '旅游'],
        }
    }
    let objTest = observerProxy(obj)
objTest.flag.interest = [1]; // 监听到了获取方法   监听到数据改变了  这两个都调用到了 
复制代码