理解 Proxy 和 Object.defineProperty：提升你的 JavaScript 技能(上)

在这里插入图片描述

🤍 前端开发工程师（主业）、技术博主（副业）、已过CET6
🍨 阿珊和她的猫_CSDN个人主页
🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》
🍚 蓝桥云课签约作者、已在蓝桥云课上架的前后端实战课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

文章目录

引言
- 介绍 Proxy 和 Object.defineProperty 的背景和重要性
Proxy 的基本概念和用法
- 解释 proxy 的作用和工作原理
- 展示如何创建一个 proxy 对象
- 探讨 proxy 的一些常见用例，如数据拦截、属性访问控制等

引言

介绍 Proxy 和 Object.defineProperty 的背景和重要性

在 JavaScript 中，Proxy 对象和 Object.defineProperty()方法都是用于操作对象的属性和方法的工具。它们提供了一种更高级、更灵活的方式来控制对象的行为。

Proxy 对象是在 ES6 中引入的，它可以用于创建一个代理对象，该代理对象可以拦截对原始对象的操作，并可以自定义对这些操作的响应。这使得可以在不修改原始对象的情况下，对对象的访问进行额外的处理，例如数据验证、日志记录、性能监测等。
Object.defineProperty()方法则是在 ES5 中引入的，它可以用于直接定义对象的属性，包括属性的可枚举性、可写性、可配置性以及值的获取和设置函数。通过使用 Object.defineProperty()，可以在对象上添加新属性，或者修改现有属性的行为。

这两个工具的重要性在于它们提供了一种更细粒度的控制对象的方式。在一些场景下，直接修改对象的属性可能会带来一些问题，例如不可预测的副作用、命名冲突等。而使用 Proxy 和 Object.defineProperty()，可以在不影响其他代码的情况下，对对象的行为进行定制，从而提高代码的可维护性和扩展性。

此外，Proxy 对象还可以与其他 JavaScript 特性（如迭代器、生成器等）结合使用，提供更强大的功能。而 Object.defineProperty()方法则常用于创建不可变对象、实现响应式编程等领域。

总的来说，Proxy 对象和 Object.defineProperty()方法是 JavaScript 中非常重要的工具，它们为开发人员提供了更多的灵活性和控制力，有助于编写更高效、更可靠的代码。

Proxy 的基本概念和用法

解释 proxy 的作用和工作原理

Proxy 是 JavaScript 中的一个对象，它可以用于创建一个代理对象，该代理对象可以拦截对原始对象的操作，并可以自定义对这些操作的响应。

Proxy 的作用主要有以下几个方面：

数据拦截：可以拦截对对象的访问，例如读取属性、写入属性、调用方法等，并可以在这些操作之前或之后进行额外的处理，例如数据验证、日志记录、性能监测等。
虚拟属性：可以通过 Proxy 对象为原始对象添加新的属性，这些属性实际上并不存在于原始对象上，而是通过 Proxy 对象来实现的。
方法拦截：可以拦截对对象方法的调用，并可以在调用方法之前或之后进行额外的处理，例如参数验证、错误处理等。

在这里插入图片描述

Proxy 的工作原理基于 JavaScript 的原型链和委托机制。当创建一个 Proxy 对象时，需要传递一个目标对象作为参数，proxy 对象会拦截对目标对象的操作，并根据需要进行相应的处理。

具体来说，

当对 proxy 对象进行操作时，JS 会首先检查 proxy 对象的自有属性，如果找到了相应的属性或方法，则直接执行；
如果没有找到，则会通过原型链和委托机制来查找目标对象上的属性或方法，并执行相应的操作。

在这个过程中，proxy 对象可以通过拦截器函数来干预对目标对象的操作，从而实现自定义的行为。

需要注意的是，Proxy 对象是在 ES6 中引入的，对于一些旧版本的浏览器可能需要使用 polyfill 来实现。此外，Proxy 对象的性能可能会受到一定的影响，因此在实际应用中需要根据具体情况进行权衡。

展示如何创建一个 proxy 对象

以下是一个简单的示例，展示如何创建一个 Proxy 对象：

const target = { name: 'John' };

const proxy = new Proxy(target, {
  // 定义属性的获取行为
  get: (target, key) => Reflect.get(target, key) + '!',

  // 定义属性的设置行为
  set: (target, key, value) => Reflect.set(target, key, value.toUpperCase())
});

console.log(proxy.name); 
proxy.name = 'JACK';
console.log(proxy.name);

在这个示例中，我们创建了一个 Proxy 对象，它拦截了对 target 对象的属性操作。具体来说：

在 get() 方法中，我们使用 Reflect.get() 来获取原始对象的属性值，并在返回之前对其进行了一些额外的操作（在这里，我们只是在属性值后面添加了一个感叹号）。
在 set() 方法中，我们使用 Reflect.set() 来设置原始对象的属性值，并在设置之前对其进行了一些额外的操作（在这里，我们将新的值转换为大写）。

通过使用 Proxy 对象，我们可以在不修改原始对象的情况下，对对象的操作进行拦截和自定义。这对于一些高级应用场景非常有用，例如数据验证、日志记录、性能监测等。

探讨 proxy 的一些常见用例，如数据拦截、属性访问控制等

以下是一些 Proxy 对象常见的用例：

数据拦截：可以使用 Proxy 对象来拦截对对象的访问，例如读取属性、写入属性、调用方法等。通过拦截这些操作，可以进行额外的数据处理、验证、日志记录等。

const target = { name: 'John' };

const proxy = new Proxy(target, {
  // 拦截属性的读取操作
  get: (target, key) => Reflect.get(target, key) + '!',

  // 拦截属性的写入操作
  set: (target, key, value) => Reflect.set(target, key, value.toUpperCase())
});

console.log(proxy.name); 
proxy.name = 'JACK';
console.log(proxy.name);

属性访问控制：可以使用 Proxy 对象来控制对对象属性的访问，例如禁止访问某些属性、只读属性等。

const target = { name: 'John', age: 25 };

const proxy = new proxy(target, {
  // 拦截属性的读取操作
  get: (target, key) => {
    if (key === 'age') {
      return Reflect.get(target, key);
    }
    throw new Error('无权访问该属性');
  }
});

console.log(proxy.name); 
console.log(proxy.age); 
try {
  console.log(proxy.password); 
} catch (error) {
  console.error(error.message); 
}

方法拦截：可以使用 Proxy 对象来拦截对对象方法的调用，例如修改方法的行为、添加额外的参数等。

const target = {
  sayHello: function() {
    console.log('Hello, ' + this.name);
  }
};

const proxy = new proxy(target, {
  // 拦截方法的调用操作
  apply: (target, thisArg, argumentsList) => {
    Reflect.apply(target, thisArg, argumentsList);
    console.log('方法执行完毕');
  }
});

proxy.sayHello();

虚拟属性：可以使用 Proxy 对象来为对象添加虚拟属性，这些属性实际上并不存在于原始对象上，而是通过代理对象来实现。

const target = { name: 'John' };

const proxy = new proxy(target, {
  // 拦截属性的读取操作
  get: (target, key) => {
    if (key === 'age') {
      return Reflect.get(target, key) + 1;
    }
    return Reflect.get(target, key);
  }
});

console.log(proxy.age);