JavaScript中proxy的深度学习

剑九_六千里

已于 2024-05-24 17:56:38 修改

阅读量4.9k

点赞数 6

分类专栏： # JavaScript 文章标签： es6 javascript 前端 vue.js

于 2022-06-28 22:05:29 首次发布

本文链接：https://blog.csdn.net/to_the_future/article/details/125510646

版权

JavaScript 专栏收录该内容

28 篇文章 3 订阅

订阅专栏

文章目录

一、 `Proxy` 概述
- 1.1. `Proxy` 是什么
- 1.2. `Proxy` 的作用
二、 `Proxy` 的基本用法
三、 `Proxy` 的高级用法
- 3.1. `Proxy` 的嵌套使用
- 3.3. `Reflect` 对象
四、`Proxy` 的应用场景
五、`Proxy` 的兼容性和使用注意事项
- 5.1. `Proxy` 的兼容性
- 5.2. `Proxy` 的使用注意事项
总结

一、 `Proxy` 概述

1.1. `Proxy` 是什么

Proxy 是一个内置对象，可以用于拦截JavaScript对象的操作。它提供了一个钩子函数的集合，这些钩子函数可以拦截对象的许多操作，例如读取和写入属性，调用方法等等。通过使用 Proxy，可以在属性访问，对象枚举，函数调用等操作之前执行自定义逻辑，从而实现更高级的操作和控制。

1.2. `Proxy` 的作用

因为es5中提供的Object.defineProperty方法无法对数组的变化进行监测，通过数组索引修改值及改变length以及一些数组方法使用时不能很好的监测并修改，因此es6提供了proxy方法以监测数组的改变

二、 `Proxy` 的基本用法

2.1. 创建 `Proxy` 对象

可以使用 new Proxy(target, handler) 方法创建 Proxy 对象。其中，target 是要拦截的对象，handler 是一个对象，它定义了拦截 target 的操作的钩子函数。

以下是一个简单的示例，创建了一个拦截对象 person，并定义了 get 和 set 钩子函数：

let person = {
  name: 'John',
  age: 30
};

let handler = {
  get: function(target, prop) {
    console.log(`Getting property "${prop}"`);
    return target[prop];
  },
  set: function(target, prop, value) {
    console.log(`Setting property "${prop}" to "${value}"`);
    target[prop] = value;
  }
};

let proxy = new Proxy(person, handler);

console.log(proxy.name); // Output: Getting property "name", John
proxy.age = 40; // Output: Setting property "age" to "40"
console.log(proxy.age); // Output: Getting property "age", 40

在这个示例中，handler 对象定义了 get 和 set 钩子函数。当使用 proxy 对象读取或写入属性时，会调用相应的钩子函数，并在控制台输出相应的信息。

2.2. `Proxy` 的基本操作

Proxy 对象的基本操作包括：

get 钩子函数：用于拦截属性的读取操作。当读取 proxy 对象的属性时，会调用 get 钩子函数，并返回相应的值。
set 钩子函数：用于拦截属性的写入操作。当写入 proxy 对象的属性时，会调用 set 钩子函数，并将相应的值传递给它。
apply 钩子函数：用于拦截函数的调用操作。当调用 proxy 对象的函数时，会调用 apply 钩子函数，并将相应的参数传递给它。
construct 钩子函数：用于拦截 new 操作符。当使用 new 操作符创建 proxy 对象的实例时，会调用 construct 钩子函数，并返回相应的实例。

以下是一个简单的示例，展示了如何使用 get 和 set 钩子函数：

let person = {
  name: 'John',
  age: 30
};

let handler = {
  get: function(target, prop) {
    console.log(`Getting property "${prop}"`);
    return target[prop];
  },
  set: function(target, prop, value) {
    console.log(`Setting property "${prop}" to "${value}"`);
    target[prop] = value;
  }
};

let proxy = new Proxy(person, handler);

console.log(proxy.name); // Output: Getting property "name", John
proxy.age = 40; // Output: Setting property "age" to "40"
console.log(proxy.age); // Output: Getting property "age", 40

2.3. `Proxy` 的陷阱（Traps）

在 JavaScript 中，Proxy 可以用来拦截对象的读取、设置、枚举等操作，它提供了一些钩子函数，可以在对象上执行这些操作之前执行自定义逻辑。这些钩子函数被称为陷阱（Traps），它们的作用类似于事件监听器。以下是一些常用的陷阱：

get：用于拦截对象的读取操作。当读取对象的属性时，会调用 get 陷阱函数，并返回相应的值。
set：用于拦截对象的设置操作。当设置对象的属性时，会调用 set 陷阱函数，并将相应的值传递给它。
apply：用于拦截函数的调用操作。当调用对象的函数时，会调用 apply 陷阱函数，并将相应的参数传递给它。
construct：用于拦截 new 操作符。当使用 new 操作符创建对象的实例时，会调用 construct 陷阱函数，并返回相应的实例。
has：用于拦截 in 操作符。当使用 in 操作符判断对象是否包含某个属性时，会调用 has 陷阱函数，并返回相应的结果。
deleteProperty：用于拦截 delete 操作符。当使用 delete 操作符删除对象的属性时，会调用 deleteProperty 陷阱函数，并返回相应的结果。
defineProperty：用于拦截 Object.defineProperty 方法。当使用 Object.defineProperty 方法定义对象的属性时，会调用 defineProperty 陷阱函数，并将相应的参数传递给它。
getOwnPropertyDescriptor：用于拦截 Object.getOwnPropertyDescriptor 方法。当使用 Object.getOwnPropertyDescriptor 方法获取对象属性的描述符时，会调用 getOwnPropertyDescriptor 陷阱函数，并返回相应的描述符。
getPrototypeOf：用于拦截 Object.getPrototypeOf 方法。当使用 Object.getPrototypeOf 方法获取对象的原型时，会调用 getPrototypeOf 陷阱函数，并返回相应的原型。

以上是 Proxy 的一些常用陷阱，可以根据需要选择相应的陷阱函数来拦截对象的操作。需要注意的是，陷阱函数必须返回相应的值，否则会导致程序错误。

三、 `Proxy` 的高级用法

Proxy 对象可用于高级用法，例如嵌套使用和与 Reflect 对象一起使用。 Reflect 是一个对象，提供了可拦截的 JavaScript 操作的方法。它也可以与 Proxy 对象一起使用，以提供更多控制拦截的操作。

一些 Proxy 的高级用法包括：

数据验证：Proxy 对象可用于在将数据设置到对象之前验证数据，以确保它符合某些条件。
对象虚拟化：Proxy 对象可用于创建由真实数据支持但具有附加功能或行为的虚拟对象。
数据绑定：Proxy 对象可用于创建应用程序不同部分之间的数据绑定，以确保当一个数据发生变化时，所有其他相关的数据也会被更新。
缓存：Proxy 对象可用于缓存昂贵的操作或数据，以确保它们仅在必要时才被计算或检索。

Reflect 提供了一些方法，可直接在对象上执行这些操作，这在使用 Proxy 对象时非常有用。一些 Reflect 方法包括：

Reflect.get(target, propertyKey[, receiver])：获取对象上属性的值
Reflect.set(target, propertyKey, value[, receiver])：设置对象上属性的值
Reflect.apply(target, thisArgument, argumentsList)：使用给定的 this 值和参数调用函数
Reflect.construct(target, argumentsList[, newTarget])：使用给定的一组参数创建构造函数的新实例

这些方法可以与 Proxy 对象一起使用，以提供对拦截的操作的更多控制。

总的来说，Proxy 对象提供了一种强大的方式来拦截和修改对象上的 JavaScript 操作。通过创建嵌套的 Proxy 对象并使用 Reflect 提供的额外功能，Proxy 可以成为高级 JavaScript 开发人员非常有用的工具。

3.1. `Proxy` 的嵌套使用

可以使用 Proxy 对象嵌套另一个 Proxy 对象，从而实现对对象的更高级别的拦截和控制。以下是一个简单的示例，展示了如何使用嵌套的 Proxy 对象：

let person = {
  name: "John",
  age: 30,
};

let handler1 = {
  get: function (target, prop) {
    console.log(`Getting property "${prop}"`);
    return target[prop];
  },
};

let handler2 = {
  get: function (target, prop) {
    console.log(`Getting property "${prop}"`);
    const value = target[prop];
    // 检查value是否为对象，以避免创建针对非对象的代理
    if (typeof value === "object" && value !== null) {
      return new Proxy(value, handler1);
    }
    return value;
  },
};

let proxy = new Proxy(person, handler2);

console.log(proxy.name); // Output: Getting property "name", John
console.log(proxy.name.length); // Output: Getting property "length", 4

在这个示例中，创建了两个 handler 对象，分别用于拦截 person 对象和 person 对象的属性。当使用 proxy 对象读取属性时，会调用 handler2 对象的 get 钩子函数，并返回另一个 Proxy 对象，该对象使用 handler1 对象拦截属性的读取操作。因此，在控制台输出相应的信息时，会输出两次。

3.3. `Reflect` 对象

Reflect 是 JavaScript 中的一个对象，它提供了一些方法，用于拦截和处理对象上可以执行的各种操作。它可以与 Proxy 对象一起使用，以提供对拦截操作的更多控制。一些 Reflect 提供的方法包括 get、set、apply 和 construct。这些方法可以直接用于对象上，执行相应的操作，这在使用 Proxy 对象时非常有用。

四、`Proxy` 的应用场景

4.1. 数据验证

Proxy 对象的一个常见应用场景是数据验证。可以使用 set 陷阱函数来拦截属性的设置操作，并在设置属性之前验证属性的值是否符合某些条件。以下是一个简单的示例，展示了如何使用 set 陷阱函数来验证数据：

let validator = {
  set: function(target, prop, value) {
    if (prop === 'age') {
      if (typeof value !== 'number' || value < 0 || value > 120) {
        throw new Error('Invalid age');
      }
    }

    target[prop] = value;
    return true;
  }
};

let person = new Proxy({}, validator);

person.name = 'John';
person.age = 30;

console.log(person.name); // Output: John
console.log(person.age); // Output: 30

person.age = '30'; // Output: Uncaught Error: Invalid age

在这个示例中，validator 对象定义了一个 set 陷阱函数，用于拦截 person 对象的属性设置操作。当属性名为 'age' 时，它会验证属性的值是否为数字并且是否在 0 到 120 的范围内。如果不是，它会抛出一个错误。否则，它会将属性设置为相应的值。当尝试设置 'age' 属性的值为字符串 '30' 时，会抛出一个错误。

4.2. 虚拟化对象

Proxy 对象的一个常见应用场景是对象虚拟化，可以使用 Proxy 对象来创建由真实数据支持但具有附加功能或行为的虚拟对象。以下是一个简单的示例，展示了如何使用 Proxy 对象来实现对象虚拟化：

let data = {
  name: 'John',
  age: 30
};

let handler = {
  get: function(target, prop) {
    if (prop === 'name') {
      return target[prop].toUpperCase();
    } else {
      return target[prop];
    }
  },
  set: function(target, prop, value) {
    if (prop === 'age') {
      if (typeof value !== 'number' || value < 0 || value > 120) {
        throw new Error('Invalid age');
      }
    }

    target[prop] = value;
    return true;
  }
};

let person = new Proxy(data, handler);

console.log(person.name); // Output: JOHN
console.log(person.age); // Output: 30

person.age = 31; // Output: 31
person.age = '31'; // Output: Uncaught Error: Invalid age

在这个示例中，data 对象包含了 name 和 age 属性。通过创建一个 handler 对象，并使用 get 和 set 陷阱函数，我们可以对 person 对象进行虚拟化。当使用 person 对象读取 name 属性时，会调用 handler 对象的 get 钩子函数，并将属性值转换为大写字母。当设置 age 属性时，会调用 handler 对象的 set 钩子函数，并验证属性的值是否为数字，并且是否在 0 到 120 的范围内。如果不是，它会抛出一个错误。否则，它会将属性设置为相应的值。

4.3. 数据绑定

Proxy 对象的一个常见应用场景是数据绑定，可以使用 Proxy 对象来创建多个数据之间的绑定，以确保它们在任何时候都保持同步。以下是一个简单的示例，展示了如何使用 Proxy 对象来实现数据绑定：

let person1 = {
  name: 'John',
  age: 30
};

let person2 = new Proxy({}, {
  get: function(target, prop, receiver) {
    return person1[prop];
  },
  set: function(target, prop, value, receiver) {
    person1[prop] = value;
    return true;
  }
});

console.log(person1.name); // Output: John
console.log(person2.name); // Output: John

person1.name = 'Jane';

console.log(person1.name); // Output: Jane
console.log(person2.name); // Output: Jane

person2.name = 'Jim';

console.log(person1.name); // Output: Jim
console.log(person2.name); // Output: Jim

在这个示例中，我们创建了两个对象 person1 和 person2。通过创建一个 handler 对象，并使用 get 和 set 陷阱函数，我们可以对 person2 对象进行数据绑定。当使用 person2 对象读取属性时，会调用 handler 对象的 get 钩子函数，并返回 person1 对应的属性值。当设置 person2 对象的属性时，会调用 handler 对象的 set 钩子函数，并将属性的值设置为 person1 对应的属性值。由于 person2 对象和 person1 对象使用相同的引用，因此它们之间的任何更改都会相互影响。

4.4. 缓存代理

Proxy 对象的另一个常见应用场景是缓存，可以使用 Proxy 对象来缓存昂贵的操作或数据，以确保它们仅在必要时才被计算或检索。以下是一个简单的示例，展示了如何使用 Proxy 对象来实现缓存代理：

let fibonacci = new Proxy({}, {
  get: function(target, prop, receiver) {
    if (prop < 2) {
      return 1;
    }

    if (!(prop in target)) {
      target[prop] = fibonacci[prop - 1] + fibonacci[prop - 2];
    }

    return target[prop];
  }
});

console.log(fibonacci[10]); // Output: 89
console.log(fibonacci[20]); // Output: 10946

在这个示例中，我们创建了一个 fibonacci 对象，并使用 get 陷阱函数来实现缓存代理。当使用 fibonacci 对象获取属性时，会检查该属性是否已经存在于 target 对象中。如果不是，它会计算斐波那契数列的值并将其存储在 target 对象中。否则，它将返回 target 对象中的相应值。通过使用缓存代理，我们可以避免计算相同的斐波那契数列的值，从而提高代码的性能。