解释 JavaScript 的 Property Descriptors (属性描述符) 中的 configurable, enumerable, writable, value, get, set 及其作用。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

JavaScript 属性描述符：解锁对象的隐藏力量 (讲座)

大家好！我是你们今天的导游，将带大家深入探索 JavaScript 对象中那些看似神秘，实则掌控着对象行为的关键——属性描述符。准备好了吗？让我们一起揭开它们的面纱！

什么是属性描述符？

想象一下，你有一个宝箱（JavaScript 对象）。这个宝箱里装着各种各样的宝贝（属性）。每个宝贝都有自己的标签，描述着它的特性，比如“能不能被拿走？”、“能不能被看到？”、“能不能被修改？”。这些标签，就是属性描述符。

简单来说，属性描述符就是用来描述对象属性特征的对象。它们告诉 JavaScript 引擎如何对待对象的属性，控制着属性的可配置性、可枚举性、可写性，以及属性的值是如何被获取和设置的。

属性描述符的构成：六大金刚

JavaScript 中，属性描述符包含六个关键属性，它们分别是：

configurable
enumerable
writable
value
get
set

这六个属性就像六个金刚，各自掌管着对象属性的不同方面。下面我们逐一击破，彻底理解它们的作用。

1. `configurable`：生死大权，一锤定音

configurable 决定了属性是否可以被删除以及属性描述符是否可以被修改。如果 configurable 为 false，那就意味着：

你不能使用 delete 操作符删除这个属性。
你不能再次使用 Object.defineProperty() 修改这个属性的描述符（configurable 除外，某些情况下）。

换句话说，configurable: false 给属性盖上了一道不可逆的“封印”，一旦设定，几乎无法改变。

代码示例：

let person = {
  name: "Alice"
};

Object.defineProperty(person, "age", {
  value: 30,
  configurable: false
});

console.log(person); // {name: 'Alice', age: 30}

delete person.age; // 无法删除，严格模式下会报错

console.log(person); // {name: 'Alice', age: 30}  仍然存在

// 尝试修改描述符（会报错，严格模式下）：
try {
  Object.defineProperty(person, "age", {
    configurable: true // 尝试修改为 true
  });
} catch (error) {
  console.error(error); // TypeError: Cannot redefine property: age
}

console.log(person); // {name: 'Alice', age: 30}  描述符保持不变

注意事项：

configurable: false 是一个单向阀。一旦设置为 false，就很难再改回 true。设计时要谨慎！
在非严格模式下，删除 configurable: false 的属性会静默失败，不会报错，但属性仍然存在。建议开启严格模式 ("use strict";)，以便及时发现这种错误。

2. `enumerable`：可见性，决定是否在迭代中出现

enumerable 决定了属性是否可以通过 for...in 循环或者 Object.keys() 等方法枚举出来。如果 enumerable 为 true，那么属性就会出现在这些迭代结果中；反之，则会被忽略。

你可以把 enumerable: false 的属性想象成对象的“隐藏属性”，它们仍然存在，可以通过直接访问 (object.property) 获取，但不会出现在迭代结果中。

代码示例：

let person = {
  name: "Bob",
  age: 25
};

Object.defineProperty(person, "secret", {
  value: "I love JavaScript!",
  enumerable: false
});

console.log(person); // {name: 'Bob', age: 25, secret: 'I love JavaScript!'}

console.log(Object.keys(person)); // ['name', 'age']  'secret' 被忽略

for (let key in person) {
  console.log(key); // 输出 'name' 和 'age'，'secret' 不会输出
}

应用场景：

隐藏内部使用的属性，避免暴露给外部代码。
过滤掉不希望在序列化（例如 JSON.stringify()）时出现的属性。

3. `writable`：可写性，决定属性值是否可以修改

writable 决定了属性的值是否可以被修改。如果 writable 为 true，那么你可以随意修改属性的值；反之，如果 writable 为 false，那么对属性的赋值操作将会被忽略（非严格模式下）或者抛出 TypeError 异常（严格模式下）。

代码示例：

let book = {
  title: "The Hitchhiker's Guide to the Galaxy"
};

Object.defineProperty(book, "author", {
  value: "Douglas Adams",
  writable: false
});

console.log(book.author); // Douglas Adams

book.author = "Someone Else"; // 尝试修改

console.log(book.author); // Douglas Adams  修改失败（非严格模式）

// 严格模式下会报错：
// "use strict";
// book.author = "Someone Else"; // TypeError: Cannot assign to read only property 'author' of object '#<Object>'

注意事项：

writable: false 并不意味着属性的值是“常量”。如果属性的值是一个对象，那么你仍然可以修改这个对象内部的属性，只是不能修改属性本身的值（即不能让它指向另一个对象）。

4. `value`：属性的灵魂，存储实际的值

value 属性存储着属性的实际值。这可能是任何 JavaScript 数据类型：数字、字符串、布尔值、对象、数组、函数等等。

当访问一个属性时，JavaScript 引擎会读取 value 属性的值并返回。

代码示例：

let car = {};

Object.defineProperty(car, "model", {
  value: "Tesla Model 3"
});

console.log(car.model); // Tesla Model 3

5. `get`：Getter 方法，拦截属性读取

get 是一个函数，用于拦截属性的读取操作。当你尝试读取一个具有 get 属性的属性时，JavaScript 引擎不会直接返回 value 属性的值，而是会调用 get 函数，并将 get 函数的返回值作为属性的值返回。

get 函数可以用来实现计算属性、数据验证、延迟加载等高级功能。

代码示例：

let circle = {
  radius: 5
};

Object.defineProperty(circle, "area", {
  get: function() {
    return Math.PI * this.radius * this.radius;
  }
});

console.log(circle.area); // 78.53981633974483  (计算而来，而不是存储的值)

circle.radius = 10; // 修改 radius

console.log(circle.area); // 314.1592653589793  area 自动更新

应用场景：

计算属性： 属性的值依赖于其他属性，并且需要动态计算。
数据验证： 在读取属性之前，对数据进行验证或转换。
延迟加载： 在第一次读取属性时才进行初始化，提高性能。

6. `set`：Setter 方法，拦截属性赋值

set 是一个函数，用于拦截属性的赋值操作。当你尝试给一个具有 set 属性的属性赋值时，JavaScript 引擎不会直接修改 value 属性的值，而是会调用 set 函数，并将要赋的值作为参数传递给 set 函数。

set 函数可以用来实现数据验证、数据绑定、通知机制等高级功能。

代码示例：

let person = {
  firstName: "John",
  lastName: "Doe"
};

Object.defineProperty(person, "fullName", {
  get: function() {
    return this.firstName + " " + this.lastName;
  },
  set: function(value) {
    let parts = value.split(" ");
    this.firstName = parts[0];
    this.lastName = parts[1];
  }
});

console.log(person.fullName); // John Doe

person.fullName = "Jane Smith"; // 调用 set 函数

console.log(person.firstName); // Jane
console.log(person.lastName); // Smith
console.log(person.fullName); // Jane Smith

应用场景：

数据验证： 在设置属性值之前，对数据进行验证。
数据绑定： 当属性值发生变化时，自动更新其他相关数据。
通知机制： 当属性值发生变化时，触发事件或调用回调函数。

数据属性 vs. 访问器属性

根据属性描述符的类型，我们可以将属性分为两种：

数据属性 (Data Properties): 使用 value 和 writable 来描述属性的值和可写性。
访问器属性 (Accessor Properties): 使用 get 和 set 来描述属性的读取和赋值行为。

数据属性和访问器属性是互斥的。也就是说，一个属性要么是数据属性，要么是访问器属性，不能同时拥有 value 和 get/set。

总结对比：

属性描述符	数据属性	访问器属性
`configurable`	控制属性的可配置性	控制属性的可配置性
`enumerable`	控制属性的可枚举性	控制属性的可枚举性
`value`	存储属性的实际值
`writable`	控制属性的可写性
`get`		Getter 函数，拦截属性读取
`set`		Setter 函数，拦截属性赋值

如何获取和设置属性描述符？

JavaScript 提供了以下方法来获取和设置属性描述符：

Object.getOwnPropertyDescriptor(object, propertyName): 获取指定对象自身属性（不包括继承的属性）的属性描述符。
Object.defineProperty(object, propertyName, descriptor): 在指定对象上定义或修改一个属性的属性描述符。
Object.defineProperties(object, descriptors): 在指定对象上同时定义或修改多个属性的属性描述符。
Object.getOwnPropertyDescriptors(object): 获取指定对象自身所有属性的属性描述符。

代码示例：

let myObject = {
  name: "Example"
};

// 获取属性描述符
let descriptor = Object.getOwnPropertyDescriptor(myObject, "name");
console.log(descriptor);
// {value: 'Example', writable: true, enumerable: true, configurable: true}

// 设置属性描述符
Object.defineProperty(myObject, "age", {
  value: 30,
  writable: false,
  enumerable: true,
  configurable: false
});

console.log(Object.getOwnPropertyDescriptor(myObject, "age"));
// {value: 30, writable: false, enumerable: true, configurable: false}

//批量设置属性描述符
Object.defineProperties(myObject, {
    address: {
        value: 'Some Address',
        writable: true,
        enumerable: false,
        configurable: true
    },
    city: {
        value: 'Some City',
        writable: false,
        enumerable: true,
        configurable: false
    }
});

console.log(Object.getOwnPropertyDescriptors(myObject));
// {
//   name: {value: 'Example', writable: true, enumerable: true, configurable: true},
//   age: {value: 30, writable: false, enumerable: true, configurable: false},
//   address: {value: 'Some Address', writable: true, enumerable: false, configurable: true},
//   city: {value: 'Some City', writable: false, enumerable: true, configurable: false}
// }

默认的属性描述符

当我们直接在对象上定义属性时（例如 object.propertyName = value），JavaScript 引擎会为该属性创建一个默认的属性描述符，其值为：

{
  value: value,
  writable: true,
  enumerable: true,
  configurable: true
}

也就是说，默认情况下，属性是可写的、可枚举的、可配置的。

属性描述符的应用场景：打造更健壮、更灵活的对象

理解属性描述符，可以帮助我们更好地控制对象的行为，实现更健壮、更灵活的代码。以下是一些常见的应用场景：

封装数据： 使用 writable: false 和 configurable: false 来保护对象内部的数据，防止被意外修改或删除。
创建只读属性： 使用 writable: false 来创建只读属性，例如常量。
实现计算属性： 使用 get 函数来创建计算属性，动态计算属性的值。
数据验证： 使用 set 函数来验证用户输入的数据，确保数据的有效性。
实现观察者模式： 使用 set 函数来监听属性的变化，并在属性值发生改变时通知其他对象。
元编程： 属性描述符是元编程的基础，可以用来动态地修改对象的结构和行为。

总结：掌握属性描述符，成为对象大师

属性描述符是 JavaScript 对象模型中一个非常重要的概念。它们赋予我们对对象属性更精细的控制能力，让我们能够编写出更健壮、更灵活、更易于维护的代码。

通过理解 configurable、enumerable、writable、value、get 和 set 这六个属性的含义和作用，以及掌握 Object.getOwnPropertyDescriptor() 和 Object.defineProperty() 等 API，你就可以成为真正的 JavaScript 对象大师！

希望今天的讲座对你有所帮助。感谢大家的参与！现在，尽情去探索属性描述符的奇妙世界吧！

JavaScript 属性描述符：解锁对象的隐藏力量 (讲座)

什么是属性描述符？

属性描述符的构成：六大金刚

1. configurable：生死大权，一锤定音

2. enumerable：可见性，决定是否在迭代中出现

3. writable：可写性，决定属性值是否可以修改

4. value：属性的灵魂，存储实际的值

5. get：Getter 方法，拦截属性读取

6. set：Setter 方法，拦截属性赋值

数据属性 vs. 访问器属性

如何获取和设置属性描述符？

默认的属性描述符

属性描述符的应用场景：打造更健壮、更灵活的对象

总结：掌握属性描述符，成为对象大师

发表回复 取消回复

1. `configurable`：生死大权，一锤定音

2. `enumerable`：可见性，决定是否在迭代中出现

3. `writable`：可写性，决定属性值是否可以修改

4. `value`：属性的灵魂，存储实际的值

5. `get`：Getter 方法，拦截属性读取

6. `set`：Setter 方法，拦截属性赋值

发表回复取消回复