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

在这里插入图片描述

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

文章目录

Object.defineProperty 的基本概念和用法
- 解释 Object.defineProperty 的作用和工作原理
- 展示如何使用 Object.defineProperty 来定义对象的属性
- 探讨 Object.defineProperty 的一些常见用例，如数据劫持、属性枚举等
比较 proxy 和 Object.defineProperty
- 分析两者的相似之处和不同之处
总结
- 总结 proxy 和 Object.defineProperty 的优势和适用场景

Object.defineProperty 的基本概念和用法

解释 Object.defineProperty 的作用和工作原理

Object.defineProperty() 是 JavaScript 中的一个方法，用于定义或修改对象的属性。
它可以用来设置对象的属性是否可枚举、可读写、可配置以及值的获取和设置函数。

Object.defineProperty() 的语法如下：

Object.defineProperty(obj, prop, descriptor)

其中，obj 是要定义属性的对象，prop 是要定义或修改的属性名，descriptor 是一个对象，用于描述属性的特性。

descriptor 对象的属性如下：

configurable：是否可配置，即是否可以通过 delete 操作删除属性，或者通过 Object.defineProperty() 重新定义属性。默认为 false。
enumerable：是否可枚举，即是否可以通过 for...in 循环遍历属性。默认为 false。
value：属性的值。如果不指定，则默认为 undefined。
writable：是否可写，即是否可以通过赋值操作修改属性的值。默认为 false。
get：获取属性值的函数。当访问该属性时，会调用这个函数返回属性值。
set：设置属性值的函数。当通过赋值操作修改属性值时，会调用这个函数。

Object.defineProperty() 的工作原理是：它会在对象的原型链上创建一个新的属性，或者修改已有的属性。如果指定了 value 属性，则会直接设置属性的值；如果指定了 get 或 set 函数，则会将这些函数作为属性的获取和设置方法。

通过使用 Object.defineProperty()，可以实现以下功能：

定义只读属性。
定义不可枚举属性。
定义可配置属性。
定义属性的获取和设置方法。

需要注意的是，Object.defineProperty() 只能定义对象的自有属性，而不能定义继承的属性。如果要定义继承的属性，可以使用 Object.getOwnPropertyDescriptor() 方法获取属性的描述符，然后进行修改。

展示如何使用 Object.defineProperty 来定义对象的属性

Object.defineProperty() 方法可以用来直接在一个对象上定义一个新属性，或者修改一个已存在的属性。下面是一些使用 Object.defineProperty() 的例子：

定义一个不可枚举、可读写的属性：

const obj = {};

// 添加名为 myProperty 的属性，值为 'Hello, World!'
Object.defineProperty(obj, 'myProperty', {
  value: 'Hello, World!',
  enumerable: false,
  writable: true
});

console.log(obj.myProperty);

在这个例子中，Object.defineProperty() 被用来向 obj 对象添加一个名为 myProperty 的新属性。这个属性的值是 ‘Hello, World!’，它是不可枚举的（即，它不会出现在 for...in 循环中），并且是可读写的。

定义一个只读属性：

const obj = {};

// 添加名为 myReadOnlyProperty 的属性，值为 'Read Only'
Object.defineProperty(obj, 'myReadOnlyProperty', {
  value: 'Read Only',
  enumerable: true,
  writable: false
});

console.log(obj.myReadOnlyProperty); 
obj.myReadOnlyProperty = '修改失败';
console.log(obj.myReadOnlyProperty);

在这个例子中，Object.defineProperty() 被用来向 obj 对象添加一个名为 myReadOnlyProperty 的新属性。这个属性的值是 ‘Read Only’，它是可枚举的，但它是只读的，尝试修改它的值会失败。

定义一个具有 getter 和 setter 的属性：

const obj = {};

// 添加名为 myComputedProperty 的属性，值通过 getter 函数计算得出
Object.defineProperty(obj, 'myComputedProperty', {
  get: function() {
    return this.name + ' ' + this.age;
  },
  enumerable: true
});

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

console.log(obj.myComputedProperty);

在这个例子中，Object.defineProperty() 被用来向 obj 对象添加一个名为 myComputedProperty 的新属性。这个属性的值是通过一个 getter 函数计算得出的，该函数将对象的 name 和 age 属性组合在一起。这个属性是可枚举的。

你可以根据需要自定义 Object.defineProperty() 的参数，以满足你对对象属性的特定要求。

探讨 Object.defineProperty 的一些常见用例，如数据劫持、属性枚举等

Object.defineProperty 是 JavaScript 中的一个方法，用于定义或修改对象的属性。它可以用来实现一些常见的用例，如数据劫持、属性枚举等。下面是一些常见的用例：

数据劫持：通过使用 Object.defineProperty，可以在对象的属性上添加自定义的 get 和 set 方法，从而在获取和设置属性值时进行额外的操作，实现数据劫持。这对于实现观察者模式、响应式编程等非常有用。

下面是一个简单的数据劫持示例，当修改对象的属性时会触发回调函数：

// 定义一个对象
const obj = { data: 10 };

// 使用 Object.defineProperty 进行数据劫持
Object.defineProperty(obj, 'data', {
  get() {
    console.log('读取属性值');
    return this._data;
  },

  set(newValue) {
    console.log('设置属性值');
    if (newValue > 100) {
      throw new Error('属性值不能大于 100');
    }

    this._data = newValue;
  }
});

obj.data = 20; 
console.log(obj.data);

属性枚举：使用 Object.defineProperty 的 enumerable 属性可以控制属性是否出现在对象的枚举中。默认情况下，对象的属性是可枚举的，但通过将 enumerable 设置为 false，可以使属性不可枚举。

下面是一个示例，创建一个不可枚举属性：

const obj = {};

// 创建一个不可枚举属性
Object.defineProperty(obj, 'mySecret', {
  value: '秘密',
  enumerable: false
});

// 检查属性是否可枚举
for (const key in obj) {
  if (obj.hasOwnProperty(key)) {
    console.log(key);
  }
}

console.log(obj.mySecret);

属性访问控制：除了 get 和 set 方法外，Object.defineProperty 还可以使用 configurable 属性来控制属性的可配置性。将 configurable 设置为 false 可以防止通过 delete 操作删除属性，或者通过 Object.defineProperty 重新定义属性。

下面是一个示例，创建一个不可配置的属性：

const obj = {};

// 创建一个不可配置属性
Object.defineProperty(obj, 'myProtected', {
  value: '受保护的',
  configurable: false
});

try {
  // 尝试删除属性
  delete obj.myProtected;
  console.log('属性已删除');
} catch (error) {
  console.log('删除属性失败:', error.message);
}

try {
  // 尝试重新定义属性
  Object.defineProperty(obj, 'myProtected', {
    value: '新值'
  });
  console.log('属性已重新定义');
} catch (error) {
  console.log('重新定义属性失败:', error.message);
}

console.log(obj.myProtected);

这些是 Object.defineProperty 的一些常见用例。它提供了一种灵活的方式来操作对象的属性，实现一些高级的功能，如数据劫持、属性枚举控制和属性访问控制。

比较 proxy 和 Object.defineProperty

分析两者的相似之处和不同之处

Proxy和Object.defineProperty都是JavaScript中用于拦截对象操作的机制，它们有相似之处，也有不同之处，下面对它们进行比较和分析。

相似之处：

都可以对对象进行拦截。
都可以拦截属性的读、写和删除操作。
都可以在拦截操作时执行自定义逻辑。
都可以阻止默认操作或修改默认操作的结果。
都可以监听对象属性变化，以及拦截原型属性访问。
都可以控制对象的可枚举性、可配置性和可写性。

在这里插入图片描述

不同之处：

Object.defineProperty只能拦截单个属性，而Proxy可以拦截整个对象。
Proxy对拦截的操作范围更广，可以拦截数组操作和函数调用，而Object.defineProperty只能对属性访问进行拦截。
Proxy可以动态添加拦截器，而Object.defineProperty直接对属性进行设置。
Proxy在处理某些情况下的性能可能会比Object.defineProperty差，特别是当拦截大量属性时。
Object.defineProperty是ES5中引入的，而Proxy是ES6中引入的。

在实际使用中，Object.defineProperty通常用于具体属性的拦截和操作，例如属性的监听，数据劫持等；而Proxy则更适用于对整个对象的拦截和处理，例如实现面向切面编程、缓存、转发等高级功能。但需要注意的是，Proxy虽然功能十分强大，但是并不是所有浏览器都支持，因此在开发时需要根据使用场景和项目需求做出合适的选择，避免因为技术兼容性问题导致项目无法实现。

总结

总结 proxy 和 Object.defineProperty 的优势和适用场景

以下是使用表格总结Proxy和Object.defineProperty的优势和适用场景的示例：

功能	Proxy	Object.defineProperty
直接拦截对对象的操作	是	否
支持拦截的操作范围广泛	是	否
可以拦截的操作包括读取、写入、删除等	是	否
可以自定义拦截操作的逻辑	是	否
可以拦截数组的操作	是	否
支持动态添加和删除拦截器	是	否
支持对整个对象进行拦截	是	否
可以修改拦截的操作结果	是	否
替代Object.defineProperty的用法	部分替代	是
对象引用改变是否需要重新设置拦截器	需要重新设置	不需要重新设置

适用场景：

Proxy适用于需要对整个对象进行拦截且拦截的操作范围广泛的场景。它允许自定义拦截逻辑，可以用来实现数据绑定、验证、日志记录等功能。
Object.defineProperty适用于只需要对对象的某个属性进行拦截的场景。它可以用来实现对属性的读、写、删除操作进行定制，例如监听属性变化、冻结对象等。

请注意，Proxy是ES6引入的新特性，对于一些需要兼容老版本浏览器的项目可能不适合使用。而Object.defineProperty（作为ES5的特性）在老版本浏览器中也可能存在一些限制。因此，在选择使用哪种拦截机制时，你应该根据具体的项目需求和兼容性考虑做出决策。