JavaScript Proxy 对象使用指南：语法、Handler捕获器与Proxy.revocable

JavaScript Proxy 对象概述

JavaScript 中的 Proxy 对象

Proxy 对象允许开发者为基本操作定义自定义行为，这些操作涵盖属性查找、赋值、枚举以及函数调用等场景。

Proxy 语法结构

语法


const proxy = new Proxy(target, handler);

target：这是被 Proxy 包装的目标对象，可以是任意类型的对象，包括原生数组、函数，甚至是另一个代理对象。
handler：这是一个通常包含函数作为属性的对象，其中各个属性中的函数分别定义了代理在执行业务操作时的具体行为。

Proxy 核心原理与描述

描述

Proxy 旨在修改某些操作的默认行为，可以将其理解为目标对象前架设的一层拦截。所有外部访问必须经过这层拦截，从而提供了一种过滤和修改访问的机制。该术语源于“代理”概念，此处指由 Proxy 代理某些操作，故译为代理器。


var target = {a: 1};
var proxy = new Proxy(target, {
  set: function(target, key, value, receiver){ 
    console.log("watch");
    return Reflect.set(target, key, value, receiver);
  },
  get: function(target, key, receiver){ 
    return target[key];
  }
});
proxy.a = 11; // watch
console.log(target); // {a: 11}

Object.defineProperty 用于监听单个属性，而 Proxy 则监听整个对象。通过调用 new Proxy()，可以创建一个代理来替代另一个被称为目标的对象。该代理对目标对象进行了虚拟化，因此表面上代理与目标对象可视为同一对象。代理允许拦截目标对象上的底层操作，这些操作原本属于 JavaScript 引擎的内部能力。拦截行为通过响应特定操作的函数实现，即通过 Proxy 代理对象后，得到的对象与被代理对象几乎完全一致，且能从底层实现对对象的完全监控。


// 常见的一道面试题 实现 a===1&&a===2&&a===3 为true

// Object.defineProperty 定义的是属性
// 可以实现对于题目的要求
var _a = 0;
Object.defineProperty(window, "a", {
  get:function(){
    return ++_a;
  }
})
console.log(a===1 && a===2 && a===3); // true

// proxy 代理的是对象 
// 因此在调用时实际与题目要求并不太相符
// 但同样也是一种实现方式
var _a = 0;
var proxy = new Proxy(window, {
  set: function(target, key, value, receiver){ 
    return Reflect.set(target, key, value, receiver);
  },
  get: function(target, key, receiver){
    if(key === "a") return ++_a;
    else return window[key];
  }
});
console.log(proxy.a===1 && proxy.a===2 && proxy.a===3); //true

Proxy 方法与可撤销代理

方法

Proxy.revocable()

Proxy.revocable(target, handler) 方法用于创建一个可撤销的代理对象，其返回一个包含代理对象本身及其撤销方法的可撤销 Proxy 对象。

target：将用 Proxy 封装的目标对象，可以是任何类型的对象，包括原生数组、函数，甚至可以是另外一个代理对象。
handler：一个对象，其属性是一批可选的函数，这些函数定义了对应的操作被执行时代理的行为。

该方法的返回值是一个结构为 {"proxy": proxy, "revoke": revoke} 的对象。一旦某个代理对象被撤销，它将变得几乎完全不可调用，在其身上执行任何可代理操作都会抛出 TypeError 异常。需注意，可代理操作一共有 14 种，执行这 14 种操作以外的操作不会抛出异常。一旦被撤销，该代理对象便不可能被直接恢复到原来的状态，同时和它关联的目标对象以及处理器对象都有可能被垃圾回收。再次调用撤销方法 revoke() 则不会有任何效果，但也不会报错。


var revocable = Proxy.revocable({}, {
 get: function(target, key) {
  return `[[ ${key} ]]`;
 }
});
var proxy = revocable.proxy;
console.log(proxy.example); // [[ example ]]
revocable.revoke();
// console.log(proxy.example); // 抛出 TypeError
// proxy.example = 1;      // 抛出 TypeError
// delete proxy.example;    // 抛出 TypeError
// typeof proxy         // "object"，因为 typeof 不属于可代理操作

Handler 捕获器详解

handler 对象方法

handler 对象是一个容纳一批特定属性的占位符对象，它包含有 Proxy 的各个捕获器 trap。所有的捕捉器是可选的，如果没有定义某个捕捉器，那么就会保留源对象的默认行为。

handler.getPrototypeOf()：Object.getPrototypeOf 方法的捕捉器。
handler.setPrototypeOf()：Object.setPrototypeOf 方法的捕捉器。
handler.isExtensible()：Object.isExtensible 方法的捕捉器。
handler.preventExtensions()：Object.preventExtensions 方法的捕捉器。
handler.getOwnPropertyDescriptor()：Object.getOwnPropertyDescriptor 方法的捕捉器。
handler.defineProperty()：Object.defineProperty 方法的捕捉器。
handler.has()：in 操作符的捕捉器。
handler.get()：属性读取操作的捕捉器。
handler.set()：属性设置操作的捕捉器。
handler.deleteProperty()：delete 操作符的捕捉器。
handler.ownKeys()：Reflect.ownKeys、Object.getOwnPropertyNames、Object.keys、Object.getOwnPropertySymbols 方法的捕捉器。
handler.apply()：函数调用操作的捕捉器。
handler.construct()：new 操作符的捕捉器。


var target = {
  a: 1,
  f: function(...args){
    console.log(...args);
  }
};
var proxy = new Proxy(target, {
  getPrototypeOf: function(target) {
    console.log("getPrototypeOf");
    return Object.getPrototypeOf(target);
  },
  setPrototypeOf: function(target, prototype) {
    console.log("setPrototypeOf");
    return Object.setPrototypeOf(target, prototype);
  },    
  isExtensible: function(target) {
    console.log("isExtensible");
    return Object.isExtensible(target);
  },
  preventExtensions: function(target) {
    console.log("preventExtensions");
    return Object.preventExtensions(target);
  },
  getOwnPropertyDescriptor: function(target, prop) {
    console.log("getOwnPropertyDescriptor");
    return Object.getOwnPropertyDescriptor(target, prop);
  },
  defineProperty: function(target, prop, descriptor) {
    console.log("defineProperty");
    return Object.defineProperty(target, prop, descriptor);
  },
  has: function(target, prop) {
    console.log("has");
    return prop in target;
  },
  get: function(target, prop, receiver) {
    console.log("get");
    return target[prop];
  },
  set: function(target, prop, value, receiver) {
    console.log("set");
    target[prop] = value;
    return true;
  },
  deleteProperty: function(target, property) {
    console.log("deleteProperty");
    delete target[property];
    return true;
  },
  ownKeys: function(target) {
    console.log("ownKeys");
    return Reflect.ownKeys(target);
  }
})


var proxyF = new Proxy(target.f, {
  construct: function(target, argumentsList, newTarget) {
    console.log("construct");
    return new target(...argumentsList);
  },
  apply: function(target, thisArg, argumentsList) {
    console.log("apply");
    return target.apply(thisArg, argumentsList);
  },

})

const _prototype = {test: 1};
Object.setPrototypeOf(proxy, _prototype); // setPrototypeOf
console.log(Object.getPrototypeOf(proxy)); // getPrototypeOf // { test: 1 }

Object.preventExtensions(proxy); // preventExtensions
console.log(Object.isExtensible(proxy)); // isExtensible // false

Object.defineProperty(proxy, "a", {configurable: true}); // defineProperty
console.log(Object.getOwnPropertyDescriptor(proxy, "a")); // getOwnPropertyDescriptor // { value: 1, writable: true, enumerable: true, configurable: true }

proxy.a = 11; // set
console.log(proxy.a); // get // 11

console.log(Object.keys(proxy)); // ownKeys getOwnPropertyDescriptor getOwnPropertyDescriptor // [ 'a', 'f' ]
delete proxy.a; // deleteProperty
console.log("a" in proxy); // has // false

proxyF(1, 2, 3); // apply 1 2 3
new proxyF(1, 2, 3); // construct 1 2 3

每日一题

https://github.com/WindrunnerMax/EveryDay

以上就是 JavaScript 中的 Proxy 对象的详细内容，更多关于 JavaScript Proxy 对象的资料请关注本站其它相关文章！

JavaScript Proxy 对象详解：语法、拦截器与撤销机制

JavaScript Proxy 对象概述

Proxy 语法结构

Proxy 核心原理与描述

Proxy 方法与可撤销代理

Handler 捕获器详解

实用工具推荐