了解 ECMAScript 2021 中的 Proxy 与 Reflect-JavaScript中文网-JavaScript教程资源分享门户

概述

ECMAScript 是一种常用的脚本语言，自 1995 年以来一直得到广泛应用。当前最新的版本是 ECMAScript 2021。Proxy 与 Reflect 是 ECMAScript 6 引入的两个新概念，它们都是用来在代码执行过程中监视并修改对象行为的机制。在前端开发中，它们可用于实现数据的验证、解耦、缓存等操作，具有重要的指导意义。

Proxy

Proxy 是一种可以代理某种对象行为的机制。可以使用 Proxy 来拦截对对象的访问、添加操作、删除操作等行为，从而实现对对象的完全控制。

基本语法

Proxy 有两个参数，第一个是要代理的对象，第二个是一个处理程序对象。

let proxy = new Proxy(target, handler);

示例代码：

const obj = {
  name: 'user'
};
const handler = {
  get(target, key) {
    console.log('get:', key);
    return target[key];
  },
  set(target, key, value) {
    console.log('set:', key, value);
    target[key] = value;
  }
};
const proxy = new Proxy(obj, handler);

proxy.name = 'admin'; // set: name admin
console.log(proxy.name); // get: name admin

Proxy 对象支持的拦截操作

Proxy 对象支持的拦截操作如下：

get(target, property, receiver)：拦截对象属性访问操作；
set(target, property, value, receiver)：拦截对象属性的设置操作；
apply(target, thisBinding, argumentsList)：拦截函数的调用操作；
construct(target, argumentsList, newTarget)：拦截对象的创建操作（new 操作符）；
getOwnPropertyDescriptor(target, property)：拦截对象属性的描述符操作；
defineProperty(target, property, descriptor)：拦截定义对象属性操作；
deleteProperty(target, property)：拦截对象属性的删除操作；
getPrototypeOf(target)：拦截对象原型的获取操作；
setPrototypeOf(target, proto)：拦截设置对象原型的操作；
isExtensible(target)：拦截一个对象是否可扩展的操作；
preventExtensions(target)：拦截对象不可扩展的操作；
enumerate(target)、ownKeys(target)：拦截对象枚举属性的操作；
has(target, property)：拦截对象属性是否存在的操作。

使用示例

拦截对象的访问：

let obj = { name: 'user' };
let proxy = new Proxy(obj, {
  get(target, property) {
    return target[property] + '_modified';
  }
});

console.log(proxy.name); // 'user_modified'

拦截对象的赋值：

let obj = { name: 'user' };
let proxy = new Proxy(obj, {
  set(target, property, value) {
    target[property] = value + '_modified';
  }
});

proxy.name = 'admin';
console.log(proxy.name); // 'admin_modified'

拦截数组排序：

let arr = [3, 1, 2];
let proxy = new Proxy(arr, {
  get(target, property) {
    if (property === 'sort') {
      return function(comparefn = (a, b) => a - b) {
        target.sort(comparefn);
        return target;
      }
    }
    return target[property];
  }
});

console.log(proxy.sort()); // [1, 2, 3]

Reflect

Reflect 是一个内置对象，它提供了一组静态方法，可以调用对象默认的行为，并返回该行为的结果。它的作用是更方便地执行一些对象操作，同时提供一些用于拦截的方法。

基本语法

Reflect 提供了一组静态方法，这些方法与 Proxy 的拦截器方法一一对应：

Reflect.get(target, propertyKey[, receiver])，等同于基本类型的 obj[propertyKey]；
Reflect.set(target, propertyKey, value[, receiver])，等同于基本类型的 obj[propertyKey] = value；
Reflect.apply(target, thisArgument, argumentsList)，等同于基本类型的 func.call(thisArgument[, argumentsList])；
Reflect.construct(target, argumentsList[, newTarget])，等同于 new target(...argumentsList)；
Reflect.getPrototypeOf(target)，等同于 Object.getPrototypeOf(target)；
Reflect.setPrototypeOf(target, prototype)，等同于 Object.setPrototypeOf(target, prototype)；
Reflect.defineProperty(target, propertyKey, attributes)，等同于 Object.defineProperty(target, propertyKey, attributes)；
Reflect.deleteProperty(target, propertyKey)，等同于 delete target[propertyKey]；
Reflect.has(target, propertyKey)，等同于 (propertyKey in target)；
Reflect.ownKeys(target)，等同于 Object.getOwnPropertyNames(target) 和 Object.getOwnPropertySymbols(target) 组成后的数组；
Reflect.isExtensible(target)，等同于 Object.isExtensible(target)；
Reflect.preventExtensions(target)，等同于 Object.preventExtensions(target)；
Reflect.getOwnPropertyDescriptor(target, propertyKey)，等同于 Object.getOwnPropertyDescriptor(target, propertyKey)。

使用示例

let obj = { name: 'user' };
Reflect.set(obj, 'name', 'admin');
console.log(obj.name); // 'admin'

let handler = {
  get(target, name) {
    if (name === 'proof') {
      return '123';
    }
    return Reflect.get(target, name);
  },
};
let obj = { name: 'user' };
obj = new Proxy(obj, handler);
console.log(obj.proof); // '123'

总结

Proxy 与 Reflect 是 ECMAScript 6 中非常重要的概念，可以用来拦截并修改对象的行为，从而实现对对象的完全控制。使用这些概念可以方便地实现某些前端操作，并增强代码的可读性和可维护性。建议开发者深入学习这些概念，灵活应用于实际项目中。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65acbdc3add4f0e0ff652ebd