ES6的代理Proxy和反射Reflect的使用

news2024/11/29 4:27:08

一、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, {
    // 拦截set
    set(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")); // true
  console.log(Reflect.set(user, "name", "Jenny")); //true
  console.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;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>var 与const </title>
</head>

<body>

    <h1>双向绑定功能</h1>
    <input type="text" id="input">
    <h2>你输入的内容是：<i id="txt"></i></h2></script>
</body>

</html>