初识代理(Proxy)和反射(Reflection)API

mdn上的解释:

Proxy 对象用于定义基本操作的自定义行为(如属性查找,赋值,枚举,函数调用等)。

Reflect 是一个内置的对象,它提供拦截 JavaScript 操作的方法。这些方法与处理器对象的方法相同。Reflect不是一个函数对象,因此它是不可构造的。

《深入理解ES6》中对Proxy的解释是:代理(Proxy)是一种可以拦截并改变底层JavaScript引擎操作的包装器,在新语言中通过它暴露内部运作的对象

术语

  • handler
    包含陷阱(traps)的占位符对象。
  • traps
    提供属性访问的方法。这类似于操作系统中陷阱的概念。
  • target
    代理虚拟化的对象。

一个简单的代理

用Proxy构造函数创建代理需要传入两个参数:目标(target)和处理程序(handler

let target = {};
let proxy = new Proxy(target, {})

proxy.name = "proxy";
console.log(proxy.name);      // "proxy"
console.log(target.name);    // "proxy"

target.name = "target";
console.log(proxy.name);      // "target"
console.log(target.name);    // "target"

代理只是简单地将操作转发给目标,它不会储存这个属性。由于 proxy.name 和 target.name 引用都是 target.name ,因此二者的值相同,从而为 target.name 设置新值后, proxy.name 也一同变化。

一些拦截底层操作的例子

  • 使用 set 陷阱验证属性
let target = {
  name: "target"
};
let proxy = new Proxy (target, {
   /**
   *  trapTarget 用户接收属性(代理的目标)的对象
   *  key 要写入的属性值(字符串或 Symbol 类型)
   *  value 被写入属性的值
   *  receiver 操作发生的对象(通常是代理)
   */
  set(trapTarget, key, value, receiver) {
    // 忽略不希望收到影响的已有属性
    if (!trapTarget.hasOwnProperty(key)) {
        if (isNaN(value)) {
          throw new TypeError("属性必须是数字");
        }
    }
    // 添加属性
    return Reflect.set(trapTarget, key, value, receiver);
  }
});

// 添加一个新属性
proxy.count = 1;
console.log(proxy.count);    // 1
console.log(target.count);    // 1

// 由于目标已有 name 属性因而可以给它赋予不是数字的值
proxy.name = "proxy";
console.log(proxy.name);    // "proxy"
console.log(target.name);    // "proxy"

// 给新属性赋予不是数字的值
proxy.anotherName = "proxy" //   TypeError: “属性必须是数字”
  • 用 get 陷阱验证对象结构( Object Shape )
let proxy = new Proxy({}, {
  get(trapTarget, key, receiver) {
    if (!(key in receiver)) {
      throw new TypeError("属性" + key + "不存在");
    }

    return Reflect.get(trapTarget, key, receiver);
  }
});

// 添加一个属性,程序仍正常运行
proxy.name = "proxy";
console.log(proxy.name);  // "proxy"

// 如果属性不存在,则抛出错误
console.log(proxy.name);  // 抛出错误
  • 使用 has 陷阱隐藏已有属性
let target = {
  name: "target",
  value: 42
};

let proxy = new Proxy(target, {
  has(trapTarget, key) {
    if (key === "value") {
      return false;
    } else {
      return Reflect.has(trapTarget, key);
    }
  }
});

console.log("value" in proxy);  // false
console.log("name" in proxy);  // true
console.log("toString" in proxy);  // true

总结

这是proxy和reflection简单的介绍,简单的说就是可以拦截js底层方法的操作,从而将底层方法改造成期望的效果。之后会更新关于代理和反射的其他用法和用处

    原文作者:天驱丶
    原文地址: https://www.jianshu.com/p/75b90d316f71
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞