Object.defineProperty详解与使用示例

文章不知道大家是否熟悉？今天我将给大家介绍《Object.defineProperty 是 JavaScript 中用于定义或修改对象属性的方法，它允许你精确控制属性的行为。通过该方法，可以设置属性的 value、writable、enumerable、configurable 等描述符属性。1. 定义属性描述符基本语法如下：Object.defineProperty(obj, prop, descriptor);obj：目标对象。prop：要定义或修改的属性名。descriptor：一个描述符对象，包含以下可选属性：属性类型说明valueany属性的值，默认为 undefinedwritableboolean是否可以被修改，默认为 falseenumerableboolean是否可枚举（如在 for...in 循环中可见），默认为 falseconfigurableboolean是否可以被删除或再次修改，默认为 falsegetfunction属性的 getter 函数setfunction属性的 setter 函数2. 示例：定义一个只读属性 const obj = {}; Object.defineProperty(obj, 'name', { value: 'Alice', writable: false, enumerable: true, configurable: false》，这篇文章主要会讲到等等知识点，如果你在看完本篇文章后，有更好的建议或者发现哪里有问题，希望大家都能积极评论指出，谢谢！希望我们能一起加油进步！

Object.defineProperty通过属性描述符实现对对象属性的精细控制，支持数据属性和访问器属性，为Vue 2.x等框架的数据响应式提供基础。其核心在于利用get和set拦截属性读写，实现依赖收集与视图更新。然而，它存在无法监听属性增删、数组索引修改等局限，导致Vue 2.x需通过特殊API弥补。相比之下，ES6 Proxy能代理整个对象，拦截更全面的操作，成为Vue 3.x的首选，代表了响应式系统的演进方向。尽管如此，Object.defineProperty在常量定义、私有属性模拟、懒加载等场景仍具实用价值。

Object.defineProperty在JavaScript中扮演着一个非常核心的角色，它允许我们对对象的属性进行精确到位的控制，包括其值、可写性、可枚举性以及可配置性。更深层次地看，它通过提供getter和setter机制，为许多现代前端框架构建数据响应式系统奠定了基础，使得数据变化能够被系统感知并触发相应的视图更新。

解决方案

要利用Object.defineProperty定义属性描述符，我们主要通过其提供的第三个参数——一个“属性描述符”对象来操作。这个描述符对象可以包含数据属性（value, writable, enumerable, configurable）或访问器属性（get, set），但不能同时拥有两者。

以一个简单的例子来说明：

const user = {};

Object.defineProperty(user, 'name', {
  value: '张三',
  writable: false, // 属性值不可修改
  enumerable: true, // 属性可被枚举（例如for...in）
  configurable: false // 属性不可被删除，描述符不可再修改
});

Object.defineProperty(user, 'age', {
  get() {
    console.log('访问了age属性');
    return this._age;
  },
  set(newValue) {
    console.log('修改了age属性为：', newValue);
    if (newValue < 0) {
      console.warn('年龄不能为负数！');
      return;
    }
    this._age = newValue;
  },
  enumerable: true,
  configurable: true
});

user._age = 25; // 初始化内部age值

console.log(user.name); // 输出：张三
user.name = '李四'; // 尝试修改，但因为writable: false，修改无效
console.log(user.name); // 仍然输出：张三

console.log(user.age); // 触发get，输出：访问了age属性，然后输出：25
user.age = 30; // 触发set，输出：修改了age属性为： 30
console.log(user.age); // 触发get，输出：访问了age属性，然后输出：30

在数据响应式系统中，Object.defineProperty的核心作用在于它的访问器属性：get和set。当一个对象属性被定义了get和set后，每次访问该属性都会触发get函数，每次修改该属性都会触发set函数。

其实现原理大致是这样的：

1. 遍历数据对象： 框架会递归遍历数据对象的所有属性。
2. 劫持属性： 对于每个属性，框架会使用Object.defineProperty将其转换为getter/setter。
3. 依赖收集（get）： 当组件渲染时，如果它访问了某个响应式数据属性，这个属性的getter就会被触发。在getter中，框架会记录下当前正在运行的组件（或者更准确地说，是其对应的“watcher”），将其添加为该数据属性的“订阅者”。
4. 派发更新（set）： 当数据属性被修改时，它的setter就会被触发。在setter中，框架会通知所有之前收集到的订阅者（watcher），告诉它们这个数据属性已经变化了。
5. 视图更新： 收到通知的watcher会触发其关联组件的重新渲染，从而更新视图。

这套机制使得数据和视图之间建立起了一种自动的联系，开发者无需手动操作DOM，只需修改数据，视图就会随之更新。

为什么Vue 2.x选择Object.defineProperty来实现数据响应式，它有哪些局限性？

Vue 2.x选择Object.defineProperty作为其核心的响应式实现，主要是出于对浏览器兼容性的考量。在ES6的Proxy出现之前，defineProperty是唯一能提供这种粒度属性劫持能力的原生API，它在当时几乎所有主流浏览器中都得到了良好的支持。这使得Vue 2.x能够构建一个稳定且广泛可用的响应式系统。

然而，这种选择也带来了显著的局限性，这些问题在实际开发中常常令人头疼：

1. 无法检测对象属性的添加或删除： Object.defineProperty只能劫持已经存在的属性。当你向一个响应式对象添加新属性，或者删除一个现有属性时，Vue 2.x是无法感知的。例如，this.someObject.newProp = 'value'这样的操作，newProp并不会是响应式的。为了解决这个问题，Vue 2.x提供了Vue.set和Vue.delete这两个API，它们本质上是在内部重新调用了Object.defineProperty来处理新属性，或者进行显式删除。
2. 无法直接检测数组变动： Object.defineProperty无法直接拦截数组通过索引修改元素（如arr[0] = newValue）或修改length属性的操作。Vue 2.x通过“魔改”数组的变异方法（如push, pop, splice, shift, unshift, sort, reverse）来解决这个问题。它重写了这些方法，在执行原始操作的同时，额外增加了通知依赖更新的逻辑。但对于非变异方法（如slice, filter, map），则需要重新赋值才能触发响应。
3. 深度嵌套对象性能开销： 实现响应式需要递归地遍历数据对象的所有属性，并为每个属性都设置getter/setter。对于那些结构复杂、深度嵌套或数据量庞大的对象，这个初始化过程可能会带来不小的性能开销，尤其是在应用启动时。
4. 无法响应Map、Set等ES6数据结构： Object.defineProperty的设计初衷是针对普通JavaScript对象的属性操作，对于ES6引入的Map、Set这类数据结构，它无能为力。如果要在Vue 2.x中响应这些数据结构的变化，需要额外的封装或转换。

在实际开发中，除了响应式系统，Object.defineProperty还有哪些不为人知的妙用？

尽管Object.defineProperty在响应式框架中大放异彩，但它的能力远不止于此。在日常开发中，它还能在一些特定场景下提供精细的控制，解决一些看似棘手的问题：

1. 创建不可修改的常量或配置项： 当你需要定义一些应用程序级别的常量或配置对象，并且希望它们在初始化后不能被意外修改时，Object.defineProperty是绝佳的选择。通过将writable设置为false，你可以确保这些值是只读的，这对于维护代码的稳定性和安全性非常有帮助。

   const config = {};
   Object.defineProperty(config, 'API_KEY', {
     value: 'your_secret_key_123',
     writable: false,
     enumerable: true,
     configurable: false
   });
   // config.API_KEY = 'new_key'; // 会在非严格模式下静默失败，严格模式下抛错

2. 模拟私有属性和访问控制： 尽管JavaScript没有原生的私有属性，但Object.defineProperty结合闭包可以模拟出类似的效果。你可以将实际的数据存储在一个闭包作用域内的变量中，然后通过getter和setter来控制外部对这些数据的访问权限和逻辑。

   function createCounter() {
     let _count = 0; // 私有变量
     const obj = {};
     Object.defineProperty(obj, 'count', {
       get() {
         return _count;
       },
       set(value) {
         if (typeof value === 'number' && value >= 0) {
           _count = value;
         } else {
           console.warn('Count must be a non-negative number.');
         }
       },
       enumerable: true
     });
     return obj;
   }
   const counter = createCounter();
   counter.count = 10;
   console.log(counter.count); // 10
   counter.count = -5; // 警告，值不变
   console.log(counter.count); // 10

3. 属性的懒加载和缓存： 在某些场景下，某个属性的值可能计算成本很高，或者需要从外部资源获取。你可以利用getter来实现懒加载，即只有当属性第一次被访问时才进行计算或获取，并将结果缓存起来。后续访问直接返回缓存值，避免重复工作。

   const data = {};
   Object.defineProperty(data, 'expensiveResult', {
     get() {
       if (!this._cachedResult) {
         console.log('正在进行昂贵的计算...');
         this._cachedResult = 1 + 2 + 3 + 4 + 5; // 模拟耗时计算
       }
       return this._cachedResult;
     },
     enumerable: true,
     configurable: true
   });
   console.log(data.expensiveResult); // 第一次访问，触发计算
   console.log(data.expensiveResult); // 第二次访问，直接返回缓存

4. 数据校验和格式化： 在setter中加入逻辑，可以在属性被赋值时进行数据类型校验、范围检查或格式化操作。这有助于确保数据的完整性和一致性，避免无效数据进入系统。

与ES6的Proxy相比，Object.defineProperty在数据劫持方面有何异同和演进方向？

Object.defineProperty和ES6的Proxy都是JavaScript中实现数据劫持的关键机制，但它们在能力和设计理念上存在显著差异，也代表了JavaScript语言在这一领域的演进方向。

相同点：

两者都能实现对对象属性的访问（get）和修改（set）进行拦截，从而在数据操作发生时执行自定义逻辑。这是构建响应式系统或进行数据监控的基础。

不同点：

1. 拦截粒度：
   • Object.defineProperty：只能针对单个已存在的属性进行劫持。这意味着你必须遍历对象的每一个属性来设置getter/setter。对于新添加的属性，它无法直接感知。
   • Proxy：可以拦截整个对象的所有操作。它不是针对单个属性，而是为目标对象创建了一个代理，所有对代理对象的操作都会先经过代理的handler。这意味着它能够拦截属性的增删改查、函数调用、甚至in操作符、for...in循环等，提供了更全面的控制能力。
2. 对新属性和数组的检测能力：
   • Object.defineProperty：这是它的最大痛点。无法直接检测对象新属性的添加和删除，也无法直接拦截数组通过索引修改元素或改变length的操作。
   • Proxy：完美解决了这些问题。由于它拦截的是整个对象，当通过代理对象添加新属性或删除属性时，handler中的set或deleteProperty方法会被触发。对于数组，Proxy也能轻松拦截通过索引修改元素的操作，因为它同样是对象属性操作的一种。
3. 嵌套对象处理：
   • Object.defineProperty：需要递归遍历所有嵌套对象，为每个属性都设置getter/setter，这在初始化时开销较大。
   • Proxy：虽然也需要递归地为嵌套对象创建Proxy，但其拦截能力更强，能够更灵活地处理深层数据结构。例如，可以在get中按需创建子对象的Proxy，实现懒代理。
4. 性能：
   • Object.defineProperty：为每个属性创建getter/setter可能会带来一定的内存开销。
   • Proxy：通常被认为在某些场景下性能更优，因为它只创建了一个代理对象，而不是为每个属性都定义了拦截器。但实际性能取决于具体的实现和使用场景。
5. 浏览器兼容性：
   • Object.defineProperty：兼容性非常好，几乎所有现代浏览器都支持。
   • Proxy：是ES6（ES2015）的特性，在IE浏览器中不被支持，但在现代浏览器中已广泛可用。

演进方向：

随着ES6及其后续版本的普及，Proxy已经成为数据劫持和响应式系统构建的首选。

• Vue 3.x全面转向Proxy： 最典型的例子就是Vue 3.x的响应式系统。它完全抛弃了Object.defineProperty，转而使用Proxy。这使得Vue 3.x能够原生解决Vue 2.x中关于新属性和数组变化的痛点，极大地简化了响应式系统的实现逻辑，并提供了更强大、更一致的响应式能力。
• 更灵活的元编程： Proxy不仅仅用于响应式系统，它提供了20多种拦截操作（trap），使其成为JavaScript中强大的元编程工具，可以用于构建各种自定义行为，例如：验证、格式化、日志记录、访问控制、性能监控等。
• Object.defineProperty的定位： 尽管Proxy功能更强大，Object.defineProperty并非完全被淘汰。它在需要对单个属性进行精确、细粒度控制，或者在不支持Proxy的旧环境（虽然现在越来越少见）中，仍然是不可替代的工具。例如，创建不可变属性、实现属性的懒加载或自定义行为时，它依然非常实用。

总的来说，Proxy代表了JavaScript数据劫持的未来，提供了更全面、更强大的能力，解决了Object.defineProperty的诸多历史遗留问题。而Object.defineProperty则是一个经典且依然有用的工具，尤其在特定场景下仍有其独特的价值。

本篇关于《Object.defineProperty详解与使用示例》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！