JavaScript对象操作属性描述符有哪些高级用法

JavaScript中的属性描述符是定义对象属性行为的重要机制，通过Object.defineProperty或者Object.defineProperties方法可以配置属性的各类特性，除了基础的value、writable配置外，还有很多高级用法可以应对复杂的开发场景。

属性描述符的基础配置回顾

属性描述符分为数据描述符和访问器描述符两类，数据描述符可以配置value、writable、enumerable、configurable四个特性，访问器描述符通过get和set函数来控制属性的读取和赋值，同样可以配置enumerable和configurable。基础的配置示例如下：

const obj = {};
// 定义数据描述符属性
Object.defineProperty(obj, 'name', {
  value: '张三',
  writable: false, // 属性不可写
  enumerable: true, // 属性可枚举
  configurable: false // 属性不可删除、不可重新配置
});

// 定义访问器描述符属性
let ageValue = 18;
Object.defineProperty(obj, 'age', {
  get() {
    return ageValue;
  },
  set(newVal) {
    if (typeof newVal !== 'number') {
      throw new TypeError('年龄必须是数字');
    }
    ageValue = newVal;
  },
  enumerable: true,
  configurable: true
});

高级用法一：实现常量属性

通过将属性的writable和configurable都设置为false，可以创建不可修改、不可删除的常量属性，这种方式比使用const定义的变量更灵活，因为它是对象层面的常量，不会影响其他作用域的变量。

function defineConstant(obj, key, value) {
  Object.defineProperty(obj, key, {
    value: value,
    writable: false,
    configurable: false,
    enumerable: true
  });
}

const config = {};
defineConstant(config, 'API_BASE_URL', 'https://ipipp.com/api');
// 尝试修改会失败，严格模式下会抛出错误
config.API_BASE_URL = 'https://ipipp.com/v2/api';
console.log(config.API_BASE_URL); // 输出 https://ipipp.com/api

高级用法二：隐藏内部属性

将属性的enumerable设置为false，可以让属性在for...in循环、Object.keys等枚举操作中不被遍历到，适合用来存放对象的内部状态，避免被外部代码意外访问或修改。

function createUser(name) {
  const user = {
    name: name
  };
  // 隐藏内部ID属性
  Object.defineProperty(user, '_id', {
    value: Math.random().toString(36).slice(2),
    enumerable: false, // 不可枚举
    configurable: false,
    writable: false
  });
  return user;
}

const user = createUser('李四');
console.log(Object.keys(user)); // 输出 ['name']，_id不会出现在枚举结果中
console.log(user._id); // 仍然可以直接访问属性值

高级用法三：属性赋值拦截与数据校验

利用访问器描述符的set函数，可以在属性赋值时进行拦截，实现数据格式校验、赋值范围限制等功能，这是很多前端框架中实现数据响应式的基础逻辑之一。

function createValidateObj() {
  const data = {};
  // 定义分数属性，限制分数在0-100之间
  let scoreValue = 0;
  Object.defineProperty(data, 'score', {
    get() {
      return scoreValue;
    },
    set(newVal) {
      if (typeof newVal !== 'number') {
        throw new TypeError('分数必须是数字');
      }
      if (newVal < 0 || newVal > 100) {
        throw new RangeError('分数必须在0到100之间');
      }
      scoreValue = newVal;
    },
    enumerable: true,
    configurable: false
  });
  return data;
}

const student = createValidateObj();
student.score = 90; // 赋值成功
console.log(student.score); // 输出90
// student.score = 101; // 抛出RangeError错误
// student.score = '九十'; // 抛出TypeError错误

高级用法四：批量配置属性描述符

当需要对多个属性应用相同的描述符配置时，可以使用Object.defineProperties方法批量操作，减少重复代码，提升开发效率。

const product = {};
Object.defineProperties(product, {
  'id': {
    value: 1001,
    writable: false,
    configurable: false,
    enumerable: true
  },
  'price': {
    value: 99.9,
    writable: true,
    configurable: false,
    enumerable: true
  },
  'createTime': {
    value: new Date().toISOString(),
    writable: false,
    configurable: false,
    enumerable: false
  }
});

console.log(Object.keys(product)); // 输出 ['id', 'price']，createTime不可枚举

注意事项

• configurable设置为false之后，除了writable可以从true改为false之外，其他特性都无法再修改，也无法删除该属性。
• 访问器描述符和数据描述符不能同时存在，也就是说一个属性不能同时设置value和get/set。
• 在严格模式下，修改writable为false的属性或者删除configurable为false的属性，都会直接抛出错误，非严格模式下操作会静默失败。

属性描述符是JavaScript对象底层的重要特性，合理运用可以让我们更精准地控制对象的行为，在封装工具库、实现数据响应式、开发框架等场景中都有广泛的应用价值。

JavaScript对象操作属性描述符defineProperty修改时间：2026-06-14 11:00:15