JS `Object.defineProperty()` / `Object.defineProperties()`：精确控制属性特性 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

嘿，各位代码界的探险家们，今天咱们要深入挖掘 JavaScript 对象属性控制的宝藏—— Object.defineProperty() 和 Object.defineProperties()。准备好迎接一场关于对象属性的精密控制之旅了吗？系好安全带，发车！

第一站：理解属性的“内心世界”

在 JavaScript 的世界里，对象的属性可不仅仅是键值对那么简单。每个属性都藏着一些“小秘密”，也就是我们说的“特性”（attributes）。这些特性决定了属性的行为，比如能否被修改、能否被枚举等等。

常见的属性特性有：

value: 属性的实际值。这个好理解，就是你访问属性时得到的东西。
writable: 布尔值，决定属性的值是否可以被修改。true 表示可以修改，false 表示只读。
enumerable: 布尔值，决定属性是否可以通过 for...in 循环或 Object.keys() 等方法枚举出来。true 表示可以枚举，false 表示不可枚举（隐藏属性）。
configurable: 布尔值，决定属性是否可以被删除，以及属性的特性是否可以被修改。true 表示可以配置，false 表示不可配置（一旦设置为 false，就无法再改回 true 了！）。

第二站：Object.defineProperty() – 属性的“私人订制”

Object.defineProperty() 允许我们为一个对象精确地定义或修改一个属性，并设置它的特性。它的语法是这样的：

Object.defineProperty(obj, prop, descriptor)

obj: 要定义属性的对象。
prop: 要定义或修改的属性的名称（字符串或 Symbol）。
descriptor: 一个对象，包含要设置的属性特性。

举个例子：

const person = {};

Object.defineProperty(person, 'name', {
  value: 'Alice',
  writable: false, // 不可修改
  enumerable: true,  // 可以枚举
  configurable: false // 不可配置
});

console.log(person.name); // 输出: Alice

person.name = 'Bob';
console.log(person.name); // 输出: Alice (因为 writable 为 false)

for (let key in person) {
  console.log(key); // 输出: name (因为 enumerable 为 true)
}

delete person.name; // 无法删除 (因为 configurable 为 false)
console.log(person.name); // 输出: Alice

在这个例子中，我们给 person 对象添加了一个 name 属性，并设置了它的特性。writable: false 使得 name 属性不可修改，enumerable: true 使得 name 属性可以被枚举，configurable: false 使得 name 属性无法被删除和重新配置。

注意： 如果你没有显式指定某个特性，它的默认值是 false （除了 value，它的默认值是 undefined）。比如：

const obj = {};
Object.defineProperty(obj, "age", {value: 30});
console.log(obj.age); // 30
obj.age = 35;
console.log(obj.age); // 30 (writable 默认是 false)
for (let key in obj) {
    console.log(key); // 什么都不输出 (enumerable 默认是 false)
}
delete obj.age;
console.log(obj.age); // 30 (configurable 默认是 false)

第三站：Object.defineProperties() – 批量属性定制

如果你想一次性定义或修改多个属性，可以使用 Object.defineProperties()。它的语法如下：

Object.defineProperties(obj, descriptors)

obj: 要定义属性的对象。
descriptors: 一个对象，它的键是属性名，值是对应的属性描述符对象。

看个例子：

const person = {};

Object.defineProperties(person, {
  firstName: {
    value: 'John',
    writable: true,
    enumerable: true,
    configurable: true
  },
  lastName: {
    value: 'Doe',
    writable: false,
    enumerable: false,
    configurable: true
  },
  fullName: {
    get: function() {
      return this.firstName + ' ' + this.lastName;
    },
    enumerable: true,
    configurable: true
  }
});

console.log(person.firstName); // 输出: John
console.log(person.lastName);  // 输出: Doe
console.log(person.fullName); // 输出: John Doe

person.firstName = 'Jane';
console.log(person.fullName); // 输出: Jane Doe

person.lastName = 'Smith'; // 尝试修改，但没效果 (writable 为 false)
console.log(person.lastName); // 输出: Doe
console.log(person.fullName); // 输出: Jane Doe

for (let key in person) {
  console.log(key); // 输出: firstName, fullName (lastName 不可枚举)
}

在这个例子中，我们一次性定义了 firstName、lastName 和 fullName 三个属性。lastName 设置为不可写且不可枚举，fullName 使用 get 访问器属性，它的值是动态计算出来的。

第四站：Getter 和 Setter – 属性的“智能代理”

除了 value 之外，属性描述符还可以使用 get 和 set 来定义“访问器属性”。

get: 一个函数，当读取属性值时被调用。它的返回值就是属性的值。
set: 一个函数，当设置属性值时被调用。它接收一个参数，就是设置的新值。

访问器属性不直接存储值，而是通过 get 和 set 函数来控制值的读取和设置。这为我们提供了一种更灵活的方式来管理属性。

const person = {
  _age: 30 //  约定：以下划线开头的属性表示私有属性
};

Object.defineProperty(person, 'age', {
  get: function() {
    console.log('正在读取 age...');
    return this._age;
  },
  set: function(value) {
    console.log('正在设置 age...');
    if (value < 0) {
      console.warn('年龄不能为负数！');
      return;
    }
    this._age = value;
  },
  enumerable: true,
  configurable: true
});

console.log(person.age); // 输出: 正在读取 age... n 30

person.age = 40; // 输出: 正在设置 age...
console.log(person.age); // 输出: 正在读取 age... n 40

person.age = -10; // 输出: 正在设置 age... n 年龄不能为负数！
console.log(person.age); // 输出: 正在读取 age... n 40

在这个例子中，age 属性使用了 get 和 set 访问器。当我们读取 age 时，会调用 get 函数，打印 "正在读取 age…"，并返回 _age 的值。当我们设置 age 时，会调用 set 函数，打印 "正在设置 age…"，并进行一些验证（比如年龄不能为负数），然后更新 _age 的值。注意 _age 前面的下划线，这是一种约定，表示 _age 是一个私有属性，不应该直接访问。虽然JavaScript没有真正的私有属性，但这是一个良好的编程习惯。

第五站：数据描述符 vs. 访问器描述符

一个属性描述符只能是以下两种形式之一：

数据描述符: 包含 value 和可选的 writable 特性。
访问器描述符: 包含 get 和 set 特性。

注意： 一个描述符不能同时拥有 value 和 get/set。如果你尝试这样做，JavaScript 引擎会抛出一个 TypeError 异常。

const obj = {};
try {
    Object.defineProperty(obj, "prop", {
        value: 10,
        get: function() { return 20; }
    });
} catch (e) {
    console.error(e); // TypeError: Invalid property descriptor. Cannot both specify accessors and a value or writable attribute
}

第六站：应用场景 – 让你的代码更健壮、更灵活

Object.defineProperty() 和 Object.defineProperties() 在实际开发中有很多用途：

数据验证和格式化： 使用 set 访问器可以对属性值进行验证和格式化，确保数据的有效性和一致性。就像上面的 age 例子。
创建只读属性： 通过设置 writable: false 可以创建只读属性，防止意外修改。
隐藏内部状态： 通过设置 enumerable: false 可以隐藏属性，使其不被枚举，从而保护内部状态。
实现计算属性： 使用 get 访问器可以创建计算属性，它的值是动态计算出来的，而不是直接存储的。就像上面的 fullName 例子。
响应式编程： 在一些框架中（比如 Vue.js），Object.defineProperty() 被用来实现数据绑定，当数据发生变化时，自动更新 UI。

第七站：注意事项 – 小心驶得万年船

configurable: false 是单行道： 一旦设置了 configurable: false，就无法再改回 true 了。这意味着你不能删除该属性，也不能修改它的特性（除了 writable 在 configurable 为 false 且 writable 为 true 的情况下可以改为 false）。
严格模式下的陷阱： 在严格模式下，尝试修改一个 writable: false 的属性会抛出一个 TypeError 异常。在非严格模式下，修改会静默失败（不会报错，但也不会生效）。
性能考虑： 过度使用 Object.defineProperty() 可能会影响性能，尤其是在大量属性上使用时。不过，现代 JavaScript 引擎对这些操作进行了优化，所以通常情况下不用过于担心。

总结：

Object.defineProperty() 和 Object.defineProperties() 是 JavaScript 中强大的属性控制工具，它们允许我们精确地定义和修改对象的属性特性，从而创建更健壮、更灵活的代码。熟练掌握它们，你就能更好地控制对象的行为，编写出更优雅、更易于维护的程序。

特性	描述
`value`	属性的实际值。
`writable`	布尔值，决定属性的值是否可以被修改。`true` 表示可以修改，`false` 表示只读。
`enumerable`	布尔值，决定属性是否可以通过 `for...in` 循环或 `Object.keys()` 等方法枚举出来。`true` 表示可以枚举，`false` 表示不可枚举（隐藏属性）。
`configurable`	布尔值，决定属性是否可以被删除，以及属性的特性是否可以被修改。`true` 表示可以配置，`false` 表示不可配置（一旦设置为 `false`，就无法再改回 `true` 了！）。
`get`	一个函数，当读取属性值时被调用。它的返回值就是属性的值（访问器属性）。
`set`	一个函数，当设置属性值时被调用。它接收一个参数，就是设置的新值（访问器属性）。

好了，今天的旅程就到这里。希望你已经掌握了 Object.defineProperty() 和 Object.defineProperties() 的精髓，能够在你的代码中灵活运用它们。下次再见！

发表回复 取消回复

发表回复取消回复