proxy

ES6新增Proxy对象用于定义基本操作的自定义行为（如属性查找，赋值，枚举，函数调用等）。

语法

/* 
  参数1： 用Proxy包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）。
  参数2： 一个对象，其属性是当执行一个操作时定义代理的行为的函数。（操作时的具体）
*/
const proxy = new Proxy(targe, handler)

栗子

const obj = {
  firstName: 'JOJO',
  age: 18,
  children: {
    obj2: {
      firstName: '鸡哥'
    },
    obj3: {
      firstName: '坤坤'
    }
  },
  hobby: ['吃饭', '睡觉'],
}

const handler = {
  // 参数3： Proxy 或者继承 Proxy 的对象 
  get(obj, key, receiver) {
    return key in obj ? obj[key] : '没有'
  },
  set(obj, key, val) {
    obj[key] = val
  },

  /* 
    除了 get set proxy 还提供多种拦截操作
  */
  /* 
    handler.has() 方法是针对 in 操作符的代理方法。
    console.log('firstName' in proxy) false
  */
  has(obj, key) {
    if(key === 'firstName') {
      return false
    }
  },
  /* 
    handler.ownKeys() 方法用于拦截 Reflect.ownKeys()
    Reflect.ownKeys() 返回一个由目标对象自身的属性键组成的数组
    for (const key in proxy) {
      console.log(key); // age
    }
  */
  ownKeys(obj) {
    return Reflect.ownKeys(obj).filter(key => key === 'age');
  }
}

深度侦听

function ob (obj) {
  const handler = {
    get (obj, key, receiver) {
      if (typeof obj[key] === 'object') return new Proxy(obj[key], handler);
      console.log('get', key, obj[key]);
      // return key in obj ? obj[key] : 'undefined';
      return Reflect.get(obj, key, receiver);
    },
    set (obj, key, value, receiver) {
      if (typeof value === 'object') return new Proxy(value, handler);
      console.log('set', key, value);
      // obj[key] = value;
      Reflect.set(obj, key, value, receiver);
    }
  };
  return new Proxy(obj, handler);
}