JS Proxy() API介绍

作者: 郭仙人不是闲人 | 来源:发表于2021-01-12 16:43 被阅读0次

Proxy

拦截函数

get

target 代理的对象
propkeyName 读取的属性名称
receiver Proxy 对象本身

如果一个属性不可配置（configurable）且不可写（writable），则 Proxy 不能修改该属性，否则通过 Proxy 对象访问该属性会报错。


var proxy = new Proxy({a:1},{
    get:function(target,propkeyname,resiver){
        return {target,propkeyname,resiver}
    }
})

console.log(proxy.a)
/**
 * {
 *   target:{a:1},
 *   propkeyName:"a",
 *   resiver: Proxy({a:1}) // 这指的就是 proxy 这个对象
 * }
 */

dom 生成器

var dom = new Proxy(
  {},
  {
    get: function (target, elementType,receiver) {
      return function (attrs, ...children) {
        const ele = document.createElement(elementType);
        for (let attr of Object.keys(attrs)) {
          ele.setAttribute(attr, attrs[attr]);
        }
        for (let child of children) {
          if (typeof child === "string") {
            child = document.createTextNode(child);
          }
          ele.append(child);
        }
        return ele;
      };
    },
  }
);

var ele = dom.div(
  {},
  "Hello,world!",
  dom.a({ href: "www.baidu.com" }, "百度")
);
console.log(ele);

//  <div><a href="www.baidu.com">百度</a></div>

set

target 代理的对象
propkeyName 设置属性的名称
propkeyValue 设置属性的值
receiver Proxy 对象本身

严格模式下：需要返回 true ,返回 false 或不返回会报错

Object.defineProperty 不会触发这个调用

如果一个属性不可配置（configurable）且不可写（writable），则 Proxy 不能修改该属性，否则通过 Proxy 对象不起作用。

  var handler = {
    set(target,propkeyName,propValue){
        console.log("-------> set");
        console.log("target",target);
        console.log("propkeyName",propkeyName);
        console.log("propValue",propValue);
        target[propkeyName] = propValue;
        console.log("<------- set");
      },

  };
  var target = {a:1};
  var proxy = new Proxy(target, handler);
  proxy.foo = 'bar'
  Object.defineProperty(proxy,'foo2',{ value: "bar2", writable: true, enumerable: true, configurable: true })

  console.log(proxy);

apply

target 代理的对象
ctx 函数上下文中的 this 指针
args 函数接收的参数

若代理对象是一个函数，那么可以拦截执行调用

拦截调用

    var twice = {
    apply (target, ctx, args) {
        return Reflect.apply(...arguments) * 2;
    }
    };
    function sum (left, right) {
    return left + right;
    };
    var proxy = new Proxy(sum, twice);
    proxy(1, 2) // 6
    proxy.call(null, 5, 6) // 22
    proxy.apply(null, [7, 8]) // 30

    // 使用 Reflect 调用也会被拦截
    Reflect.apply(proxy, null, [9, 10]) // 38

has

target 代理的对象
propkeyName 查询属性的名称

如果原对象不可配置或者禁止扩展，这时 has()拦截会报错。

不检查属性来自自身还是原型，只对 in 关键字生效，且对 for_in 无效

    var obj = { a: 10 };
    Object.preventExtensions(obj);

    var p = new Proxy(obj, {
    has: function(target, prop) {
        return false;
    }
    });

    'a' in p // TypeError is thrown

constructor

target 代理的函数
args 构造函数参数
newTarget Proxy 对象

构造函数拦截器必须返回一个对象

construct()方法中的 this 指向的是 handler，而不是实例对象。

  const handler = {
    construct: function(target, args) {
      console.log(this === handler);
      return new target(...args);
    }
  }

  let p = new Proxy(function () {}, handler);
  new p() // true

deleteProperty

target 代理对象
propkeyName 属性名称

需要在该函数中将代理对象中对应值删除。需要返回 true 表示删除成功，false/报错表示删除失败

目标对象自身的不可配置（configurable）的属性，不能被 deleteProperty 方法删除，否则报错。

  const handle = {
    deleteProperty:function(target,keyName){
        console.log("target",target);
          console.log("keyName",keyName);
          delete target[keyName];
          return true
      }
  }

  const proxy = new Proxy({a:1},handle);

  delete proxy.a;

  console.log(proxy);

defineProperty

target 代理对象
propkeyName 属性值名称
descriptor 属性描述

当 set 与 defineProperty 同时存在的时候，直接赋值只会调用 set，但如果不存在 set 或者通过 Object.defineProperty 还是会被调用

返回值为 true,表示成功，如果无返回值会报错

var handler = {
  set(target,propkeyName,propValue){
      console.log("-------> set");
      console.log("target",target);
      console.log("propkeyName",propkeyName);
      console.log("propValue",propValue);
      target[propkeyName] = propValue;
      console.log("<------- set");
    },
  defineProperty (target, key, descriptor) {
    console.log("-------> defineProperty");
    console.log("target",target);
    console.log("key",key);
    console.log("descriptor",descriptor);
    console.log("<------- defineProperty");
    Object.defineProperty(target,key,descriptor);
    return true;
  }
};
var target = {a:1};
var proxy = new Proxy(target, handler);
proxy.foo = 'bar'
Object.defineProperty(proxy,'b',{ value: "bar", writable: true, enumerable: true, configurable: true })

console.log(proxy);

getOwnPropertyDescriptor

target 代理对象
propkeyName 属性值名称

必须返回一个属性描述对象或者 undefinde，否则会报错

  var handler = {
    getOwnPropertyDescriptor (target, key) {
      if (key[0] === '_') {
        return;
      }
      return Object.getOwnPropertyDescriptor(target, key);
    }
  };
  var target = { _foo: 'bar', baz: 'tar' };
  var proxy = new Proxy(target, handler);
  Object.getOwnPropertyDescriptor(proxy, 'wat')
  // undefined
  Object.getOwnPropertyDescriptor(proxy, '_foo')
  // undefined
  Object.getOwnPropertyDescriptor(proxy, 'baz')
  // { value: 'tar', writable: true, enumerable: true, configurable: true }

getPrototypeOf()

Object.prototype.__proto__
Object.prototype.isPrototypeOf()
Object.getPrototypeOf()
Reflect.getPrototypeOf()
instanceof

拦截以上方法,返回值必须是对象或是 null，否则会报错。

另外，如果目标对象不可扩展（non-extensible）， getPrototypeOf()方法必须返回目标对象的原型对象。


var proto = {};
var p = new Proxy({a:1}, {
  getPrototypeOf(target) {
    return proto;
  }
});
Object.getPrototypeOf(p) === proto // true

isExtensible

拦截 Object.isExtensible()操作。该函数必须返回布尔值，其他值会被自动转换。

且返回值必须与目标对象的 isExtensible 属性保持一致，否则就会抛出错误

var target = {};
object.preventExtensions(target);
console.log(Object.isExtensions(target)); // false
var p = new Proxy(target, {
  isExtensible: function(target) {
    console.log("called");
    return true;
  }
});

Object.isExtensible(p) // 与 target.isExtensions 值不一致  会报错

ownKeys

方法返回的数组成员，只能是字符串或 Symbol 值。如果有其他类型的值，或者返回的根本不是数组，就会报错。

如果目标对象自身包含不可配置的属性(configurable)，则该属性必须被 ownKeys()方法返回，否则报错。

如果目标对象是不可扩展的（non-extensible），这时 ownKeys()方法返回的数组之中，必须包含原对象的所有属性，且不能包含多余的属性，否则报错。

拦截以下调用

Object.getOwnPropertyNames()
- 会自动过滤属性名为 Symbol 的属性，即使拦截函数中返回
Object.getOwnPropertySymbols()
- 会自动过滤非属性名为 Symbol 的属性，即使拦截函数中返回
Object.keys()
- 会自动过滤不存在、不可遍历、属性名为 Symbol 的属性，即使拦截函数中返回
for...in 循环
- 会自动过滤不存在、不可遍历、属性名为 Symbol 的属性，即使拦截函数中返回

  let target = {
    a: 1,
    b: 2,
    c: 3,
    [Symbol.for('secret')]: '4',
  };

  Object.defineProperty(target, 'key', {
    enumerable: false,
    configurable: true,
    writable: true,
    value: 'static'
  });

  let handler = {
    ownKeys(target) {
      return ['a', 'd', Symbol.for('secret'), 'key'];
    }
  };

  let proxy = new Proxy(target, handler);

  console.log( Object.keys(proxy));
  // Array ["a"]
  console.log( Object.getOwnPropertyNames(proxy));
  // Array ["a", "d", "key"]
  console.log( Object.getOwnPropertySymbols(proxy));
  // Array ["a", "d", "key"]
  for(let key in proxy){
    console.log(key);
  }
  // “a”

preventExtensions

preventExtensions()方法拦截 Object.preventExtensions()。该方法必须返回一个布尔值，否则会被自动转为布尔值。

只有目标对象不可扩展时（即 Object.isExtensible(proxy)为 false），proxy.preventExtensions 才能返回 true，否则会报错。

为解决这个问题，可以在拦截函数中，将目标对象禁止掉扩展

  var target = {};
  var proxy = new Proxy(target, {
    preventExtensions: function(target) {
      return true;
    }
  });

  Object.preventExtensions(proxy)
  // Uncaught TypeError: 'preventExtensions' on proxy: trap returned truish but the proxy target is extensible

  // proxy 的拦截 与 Object.isExtensions(proxy)[值为 false] 不一致 会报错

setPrototypeOf

setPrototypeOf()方法主要用来拦截 Object.setPrototypeOf()方法。

该方法只能返回布尔值，否则会被自动转为布尔值。另外，如果目标对象不可扩展（non-extensible），setPrototypeOf()方法不得改变目标对象的原型。

  var handler = {
    setPrototypeOf (target, proto) {
      throw new Error('Changing the prototype is forbidden');
    }
  };
  var proto = {};
  var target = function () {}; // 函数或对象都是可以的
  var proxy = new Proxy(target, handler);
  Object.setPrototypeOf(proxy, proto);
  // Error: Changing the prototype is forbidden

Proxy.revocable

返回一个可取消的 Proxy 实例

Proxy.revocable()方法返回一个对象，该对象的 proxy 属性是 Proxy 实例，revoke 属性是一个函数，可以取消 Proxy 实例。上面代码中，当执行 revoke 函数之后，再访问 Proxy 实例，就会抛出一个错误。

Proxy.revocable()的一个使用场景是，目标对象不允许直接访问，必须通过代理访问，一旦访问结束，就收回代理权，不允许再次访问。

  let target = {};
  let handler = {};

  let {proxy, revoke} = Proxy.revocable(target, handler);

  proxy.foo = 123;
  proxy.foo // 123

  revoke();
  proxy.foo // TypeError: Revoked

this 问题

在 Proxy 代理的情况下，目标对象内部的 this 关键字会指向 Proxy 代理，也就是 handle。

  const target = {
    m: function () {
      console.log(this === proxy);
    }
  };
  const handler = {};

  const proxy = new Proxy(target, handler);

  target.m() // false
  proxy.m()  // true