一、Proxy使用

• 作用：Proxy是ES6为了操作对象而引入的API，不直接作用于对象，而是通过类似媒介的方式进行对象的操作
• 使用

/*** target：需要proxy处理的对象* handler：对对象进行处理的方法
*/
let proxy = new Proxy(target,handler);

• 作用
  • 拦截对象get操作

  {/*** target：需要proxy处理的对象* handler：对对象进行处理的方法,如set、get*/let user1 = {name: "Mike",phone: "13146467899",addr: "zh",};let proxy = new Proxy(user1, {get: function (target, key) {switch (key) {case "phone":return (target[key].substring(0, 3) + "****" + target[key].substring(7));case "name":return target[key].substring(0, 1) + "**";default:return target[key];}},});console.log(proxy.phone, proxy.name); // 131****7899 M**
  }
  

  • 拦截对象set操作

  {/*** target：需要proxy处理的对象* handler：对对象进行处理的方法,如set、get*/let user1 = {name: "Mike",phone: "13146467899",addr: "zh",};let proxy = new Proxy(user1, {// 拦截setset(target, key, value) {if (key === "id") {return (target[key] = value + "1xx");} else {return target[key];}},});proxy.id = "xxx";console.log(proxy.id, proxy.name); // xxx1xx Mike
  }
  

  • 拦截对象has操作

  {/*** target：需要proxy处理的对象* handler：对对象进行处理的方法,如set、get*/let user1 = {name: "Mike",phone: "13146467899",addr: "zh",};let proxy = new Proxy(user1, {// 拦截has操作has: function (target, key) {if (key in target) {console.log(`${key}:`, target[key]);return true;} else {return false;}},});console.log("name" in proxy); // name: Mike true
  }
  

  • 拦截对象delete操作

  {/*** target：需要proxy处理的对象* handler：对对象进行处理的方法,如set、get*/let user1 = {name: "Mike",phone: "13146467899",addr: "zh",// 私有属性_id: "s112ewd",};let proxy = new Proxy(user1, {// 拦截delete操作deleteProperty: function (target, key) {if (key.indexOf("_") === 0) {console.warn("私有属性无法删除");return false;}return true;},});console.log(delete proxy["_id"]); // 私有属性无法删除
  }
  

  • 拦截对象key属性

  	{/*** target：需要proxy处理的对象* handler：对对象进行处理的方法,如set、get*/let user1 = {name: "Mike",phone: "13146467899",addr: "zh",// 私有属性_id: "s112ewd",};let proxy = new Proxy(user1, {// 拦截指定的属性名称，会遍历对象ownKeys(target) {return Object.keys(target).filter((item) => {return item !== "id" && item.indexOf("_") !== 0;});},});console.log(Object.keys(proxy)); // ['name', 'phone', 'addr']
  }
  

二、Reflect的使用

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

{let user = {name: "fluyi",age: 18,};console.log(Reflect.has(user, "name")); // trueconsole.log(Reflect.set(user, "name", "Jenny")); //trueconsole.log(Reflect.get(user, "name")); // Jenny
}

三、Proxy与Reflect实现简单的双向数据绑定

{// 获取dom元素const inObj = document.getElementById("input");const outObj = document.getElementById("txt");// 设置代理对象let obj = {};// 配置代理对象选项let handler = {get: function (target, key) {return Reflect.get(target, key);},set: function (target, key, value) {// 如果输入为文本if (key === "text") {inObj.value = inObj.value === value ? inObj.value : value;outObj.innerHTML = value;}return Reflect.set(target, key, value);},};// 配置代理对象let proxy = new Proxy(obj, handler);// 添加监听事件inObj.addEventListener("keyup", function (event) {proxy.text = event.target.value;});proxy.text = 124;
}

双向绑定功能
你输入的内容是：