ES6中的代理Proxy和反射Reflect(上)

简介：认识高阶知识点之代理Proxy和反射Reflect

Proxy

• 概述

正如Proxy的英译"代理"所示，Proxy是ES6为了操作对象引入的API。它不直接作用在对象上，而是作为一种媒介，如果需要操作对象的话，需要经过这个媒介的同意。

• 使用方式

	/* @params
	** target: 用Proxy包装的目标对象
	** handler: 一个对象，对代理对象进行拦截操作的函数，如set、get
	*/
	let p = new Proxy(target, handler)

• 使用场景

const house = {
  name: '张三',
  price: '1000',
  phone: '18823139921',
  id: '111',
  state: '**',
};

const houseProxy = new Proxy(house, {
  // 读取代理
  get: function (target, key) {
    switch (key) {
      case 'price':
        return target[key].replace('1000', '1200');
      case 'phone':
        return target[key].substring(0, 3) + '****' + target[key].substring(7);
      default:
        return target[key];
    }
  },
  // 设置代理
  set: function (target, key, value) {
    if (key === 'id') {
      return target[key];
    } else if (key === 'state') {
      return (target[key] = value);
    }
  },
});

console.log(houseProxy.price);
console.log(houseProxy.phone);

houseProxy.id = '222';
houseProxy.state = '****';
console.log(houseProxy.id);
console.log(houseProxy.state);

Reflect

• 概述

与Proxy相同，ES6引入Reflect也是用来操作对象的，它将对象里一些明显属于语言内部的方法移植到Reflect对象上，它对某些方法的返回结果进行了修改，使其更合理，更具语义化，并且使用函数的方式实现了Object的命令式操作

• 常见用法

	const person = {
	  name: '张三',
	  age: '18',
	  phone: '18823139921',
	  id: '111',
	};
	const res = 'name' in person;
	const res1 = Reflect.has(person, 'name');
	console.log(res, res1);```