JavaScript 对象描述符

在JavaScript中，对象是最基础也是最重要的数据类型之一。我们经常创建对象并添加、修改或删除其属性，但很少思考这些属性本身的特性。这就引出了一个重要概念：对象描述符（Object Descriptors）。

什么是对象描述符？

对象描述符是JavaScript为对象的属性提供的元数据，用来控制这些属性的行为特征。简单来说，描述符让我们能够精确地定义一个属性应该如何表现，比如它是否可以被修改、是否可以被删除、是否会在循环中显示等。

每个属性都有一个属性描述符对象，包含以下特性：

1. 数据描述符特性：

   • value：属性的值
   • writable：属性值是否可以被修改

2. 访问器描述符特性：

   • get：获取属性值的函数
   • set：设置属性值的函数

3. 共有特性：

   • configurable：属性是否可以被删除或再次配置
   • enumerable：属性是否在循环中显示

获取属性描述符

要查看一个对象属性的描述符，我们可以使用Object.getOwnPropertyDescriptor方法：

javascript

const person = {
  name: "小明",
  age: 25
};

const nameDescriptor = Object.getOwnPropertyDescriptor(person, "name");
console.log(nameDescriptor);

输出结果：

{
  value: "小明",
  writable: true,
  enumerable: true,
  configurable: true
}

这告诉我们，name属性有一个值"小明"，可以被修改(writable: true)，在循环中可见(enumerable: true)，并且可以被删除或重新配置(configurable: true)。

定义属性描述符

使用Object.defineProperty

我们可以使用Object.defineProperty方法来定义或修改一个对象属性的描述符：

javascript

const user = {};

Object.defineProperty(user, "name", {
  value: "小红",
  writable: true,
  enumerable: true,
  configurable: true
});

console.log(user.name); // 输出: 小红

特别注意：如果在使用Object.defineProperty时不指定特性，那么它们会默认为false：

javascript

const product = {};

Object.defineProperty(product, "id", {
  value: 12345
});

console.log(product.id); // 输出: 12345
product.id = 54321;      // 尝试修改id
console.log(product.id); // 输出依然是: 12345，因为writable默认为false

使用Object.defineProperties定义多个属性

如果需要同时定义多个属性，可以使用Object.defineProperties：

javascript

const book = {};

Object.defineProperties(book, {
  title: {
    value: "JavaScript入门",
    writable: true,
    enumerable: true,
    configurable: true
  },
  author: {
    value: "佚名",
    writable: false, // 作者名不可修改
    enumerable: true,
    configurable: false // 不能删除此属性
  },
  price: {
    value: 59.9,
    writable: true,
    enumerable: false, // price不会在for...in循环中出现
    configurable: true
  }
});

// 尝试遍历属性
for (let key in book) {
  console.log(key); // 输出: title, author (不会显示price，因为它不可枚举)
}

深入理解属性特性

writable - 可写性

当writable设为false时，属性值不能被修改：

javascript

const config = {};

Object.defineProperty(config, "API_KEY", {
  value: "abc123xyz",
  writable: false // 不可修改
});

console.log(config.API_KEY); // 输出: abc123xyz

// 尝试修改
config.API_KEY = "新密钥";
console.log(config.API_KEY); // 输出依然是: abc123xyz

// 注意：在严格模式下，尝试修改不可写属性会抛出TypeError

enumerable - 可枚举性

enumerable控制属性是否在对象的可枚举属性中出现：

javascript

const user = {};

Object.defineProperties(user, {
  name: {
    value: "小明",
    enumerable: true
  },
  password: {
    value: "123456",
    enumerable: false // 密码不可枚举
  }
});

// 使用for...in循环
for (let key in user) {
  console.log(key); // 只输出: name
}

// Object.keys()也只返回可枚举属性
console.log(Object.keys(user)); // 输出: ["name"]

// 但Object.getOwnPropertyNames()会返回所有属性
console.log(Object.getOwnPropertyNames(user)); // 输出: ["name", "password"]

configurable - 可配置性

当configurable设为false时，属性不能被删除，且除了writable外的描述符不能被修改：

javascript

const settings = {};

Object.defineProperty(settings, "theme", {
  value: "light",
  configurable: false // 不可配置
});

// 尝试删除属性
delete settings.theme;
console.log(settings.theme); // 输出: light，删除失败

// 尝试重新配置属性会抛出错误
try {
  Object.defineProperty(settings, "theme", {
    enumerable: true // 尝试修改描述符
  });
} catch (error) {
  console.log("错误：无法重新配置属性"); // 会执行到这里
}

警告

当configurable为false时，即使writable初始为true，也可以将其修改为false，但不能从false改为true！

访问器属性

除了数据属性外，JavaScript对象还可以定义访问器属性，即通过getter和setter方法访问的属性：

javascript

const person = {
  firstName: "张",
  lastName: "三"
};

Object.defineProperty(person, "fullName", {
  get: function() {
    return this.firstName + this.lastName;
  },
  set: function(newValue) {
    const parts = newValue.split(" ");
    this.firstName = parts[0];
    this.lastName = parts[1] || "";
  },
  enumerable: true,
  configurable: true
});

console.log(person.fullName); // 输出: 张三

person.fullName = "李 四";
console.log(person.firstName); // 输出: 李
console.log(person.lastName);  // 输出: 四

访问器属性提供了一种强大的方式来封装对象的内部状态，并在属性被读取或设置时执行自定义逻辑。

实际应用场景

1. 创建常量对象

javascript

function createConstant(obj) {
  // 遍历对象的所有属性
  Object.keys(obj).forEach(key => {
    Object.defineProperty(obj, key, {
      writable: false,
      configurable: false
    });
  });
  
  // 防止添加新属性
  Object.preventExtensions(obj);
  
  return obj;
}

const CONFIG = createConstant({
  MAX_USERS: 100,
  API_ENDPOINT: "https://api.example.com",
  TIMEOUT: 5000
});

// 尝试修改会失败
CONFIG.MAX_USERS = 200;
console.log(CONFIG.MAX_USERS); // 仍然是100

2. 数据验证

javascript

const bankAccount = {
  _balance: 1000 // 约定：下划线开头表示"私有"属性
};

Object.defineProperty(bankAccount, "balance", {
  get: function() {
    return this._balance;
  },
  set: function(newBalance) {
    if (typeof newBalance !== "number") {
      throw new Error("余额必须是数字");
    }
    
    if (newBalance < 0) {
      throw new Error("余额不能为负数");
    }
    
    this._balance = newBalance;
  },
  enumerable: true,
  configurable: true
});

bankAccount.balance = 2000;
console.log(bankAccount.balance); // 输出: 2000

try {
  bankAccount.balance = -500; // 抛出错误
} catch (error) {
  console.log(error.message); // 输出: 余额不能为负数
}

3. 监听属性变化

javascript

function observeProperty(obj, prop, callback) {
  let value = obj[prop];
  
  Object.defineProperty(obj, prop, {
    get: function() {
      return value;
    },
    set: function(newValue) {
      const oldValue = value;
      value = newValue;
      callback(prop, oldValue, newValue); // 通知变化
    },
    enumerable: true,
    configurable: true
  });
}

const user = { name: "小明", age: 25 };

observeProperty(user, "name", (property, oldValue, newValue) => {
  console.log(`${property}从"${oldValue}"变成了"${newValue}"`);
});

user.name = "小红"; // 输出: name从"小明"变成了"小红"

对象描述符方法总结

以下是与对象描述符相关的主要方法：

1. Object.defineProperty(obj, prop, descriptor) - 在对象上定义一个新属性或修改现有属性
2. Object.defineProperties(obj, props) - 在对象上定义多个新属性或修改现有属性
3. Object.getOwnPropertyDescriptor(obj, prop) - 返回指定对象上一个自有属性的属性描述符
4. Object.getOwnPropertyDescriptors(obj) - 返回指定对象的所有自有属性的属性描述符

与对象保护相关的补充方法：

1. Object.preventExtensions(obj) - 防止向对象添加新属性
2. Object.seal(obj) - 防止添加或删除属性，并将所有现有属性标记为不可配置
3. Object.freeze(obj) - 完全冻结对象，防止任何修改

总结

JavaScript对象描述符是一种强大的机制，使我们能够精细控制对象属性的行为。通过描述符，我们可以：

• 控制属性是否可修改、可枚举或可配置
• 定义getter和setter方法以封装属性访问
• 创建真正的常量和只读属性
• 实现属性验证和监听

理解这些概念可以帮助你写出更加健壮的代码，并减少意外行为和副作用。

练习题

1. 创建一个具有只读属性id和可写属性name的用户对象。
2. 使用访问器属性实现一个温度转换器，可以在摄氏度和华氏度之间转换。
3. 创建一个函数，让对象的所有属性都变为不可枚举。
4. 实现一个简单的响应式系统，当对象属性变化时通知订阅者。

延伸阅读

• MDN: Object.defineProperty()
• MDN: 属性描述符和属性特性
• 探索JavaScript中不常见但有用的API系列：对象描述符

掌握对象描述符将帮助你深入理解JavaScript对象系统，为成为高级开发者打下基础。