Object.defineProperty方法详解

定义

Object.defineProperty() 方法在 JavaScript 中被用来直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回这个对象。这个方法允许你精确地控制属性在对象上的行为，包括属性的值、可写性、可枚举性和可配置性。

语法

?

1	Object.defineProperty(obj, propertyName, descriptor)

　　

• obj：要定义属性的对象。
• propertyName：要定义或修改的属性的名称或 Symbol。
• descriptor：这个属性的描述符。它必须是一个对象，可以具有以下属性：
  • value：属性的值，默认为 undefined。
  • writable：如果为 true，属性的值可以被重写。默认为 false。
  • enumerable：如果为 true，则属性会被枚举（例如，通过 for...in 循环或 Object.keys()）。默认为 false。
  • configurable：如果为 true，属性可以被删除或修改。默认为 false。
  • get：一个函数，作为 getter，当访问此属性时会被调用。
  • set：一个函数，作为 setter，当修改此属性时会被调用。

示例

示例 1：定义一个新属性

?

1 2 3 4 5 6 7 8 9 10

let obj = {};      Object.defineProperty(obj, 'example', {    value: 'hello',    writable: true,    enumerable: true,    configurable: true  });      console.log(obj.example); // 输出 "hello"

示例 2：使用 getter 和 setter

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

let obj = {    _privateVar: 'hello'  };      Object.defineProperty(obj, 'example', {    get: function() {      return this._privateVar;    },    set: function(value) {      this._privateVar = value;    },    enumerable: true,    configurable: true  });      console.log(obj.example); // 输出 "hello"  obj.example = 'world';  console.log(obj.example); // 输出 "world"

• 当一个属性同时设置了 value 或 writable 和 get/set 时，会抛出一个错误，因为它们是互斥的。
• 默认情况下，通过 Object.defineProperty() 定义的属性是不可枚举的（enumerable: false）和不可配置的（configurable: false），除非在描述符中明确指定为 true。
• 如果试图删除一个不可配置的属性，会抛出一个错误。
• 如果试图修改一个不可配置属性的 enumerable 属性，也会抛出一个错误。

实际应用

Object.defineProperty() 在许多 JavaScript 库和框架中都有应用，特别是在需要精确控制对象属性的行为时。例如，在 Vue.js 这样的响应式框架中，它用于实现数据劫持，使得当对象属性的值发生变化时，视图能够自动更新。

总结

当使用 Object.defineProperty() 方法定义或修改一个对象的属性时，提供的 descriptor 对象中的属性设置会直接影响该属性在 JavaScript 对象中的行为，并且可能会对其他一些常用的 JavaScript 方法产生影响。以下是对 descriptor 中不同属性设置及其对 JavaScript 其他方法影响的总结：

1. value
   • 设置该属性的值。
   • 如果同时设置了 value 和 writable 为 true，那么可以通过直接赋值来修改属性的值。
   • 如果同时提供了 get 或 set 访问器函数，则 value 和 writable 将被忽略。
   • 对其他方法的影响：无直接影响，但属性的值变化可能会影响依赖于该属性的其他代码。
2. writable
   • 如果为 true，属性的值可以被重写。
   • 如果为 false，属性的值将是只读的，尝试直接修改它会静默失败（不会报错）。
   • 对其他方法的影响：
     • 如果尝试通过 Object.assign() 方法覆盖只读属性，该属性将不会被改变。
     • 如果使用解构赋值 (... 语法) 尝试复制只读属性到另一个对象，原属性仍然不会改变。
3. enumerable
   • 如果为 true，属性会被枚举（例如，通过 for...in 循环或 Object.keys()）。
   • 如果为 false，属性将不会被枚举。
   • 对其他方法的影响：
     • for...in 循环只会遍历可枚举的属性。
     • Object.keys()、Object.values() 和 Object.entries() 方法只返回对象自身的可枚举属性的键、值或键值对数组。
     • JSON.stringify() 默认情况下只序列化对象的可枚举属性。
4. configurable
   • 如果为 true，属性可以被删除或修改（例如，通过 delete 运算符或再次调用 Object.defineProperty()）。
   • 如果为 false，属性不能被删除或修改其 configurable 和 enumerable 特性。
   • 对其他方法的影响：
     • 如果试图删除一个不可配置的属性，delete 运算符将返回 false，并且属性不会被删除。
     • 如果试图修改一个不可配置属性的 enumerable 属性，将会抛出一个错误。
     • 尝试再次调用 Object.defineProperty() 修改不可配置属性的描述符（除了 value 和 writable 之外）也会抛出一个错误。
5. get
   • 一个函数，作为 getter，当访问此属性时会被调用。
   • 如果没有 getter 函数，那么尝试访问该属性将返回 undefined（除非同时设置了 value）。
   • 对其他方法的影响：无直接影响，但 getter 函数的返回值会替代属性的值，并可能影响依赖于该属性的其他代码。
6. set
   • 一个函数，作为 setter，当修改此属性时会被调用。
   • 如果没有 setter 函数，那么尝试设置该属性的值将静默失败（不会报错，除非属性是只读的）。
   • 对其他方法的影响：无直接影响，但 setter 函数中的代码可能会在属性值被设置时执行，从而影响其他代码的执行。

在使用 Object.defineProperty() 时，务必注意这些描述符属性之间的相互作用和潜在影响，以确保代码按预期工作。