属性描述符操作

Kpsmart2025年3月7日大约 8 分钟

属性描述符操作

JavaScript提供了一系列方法来操作属性描述符。本文将详细介绍Object.defineProperty()、Object.getOwnPropertyDescriptor()等方法的使用，以及如何通过这些方法精确控制对象属性的行为。

属性描述符基础

在JavaScript中，每个对象属性都由一个"属性描述符"(Property Descriptor)对象来描述其特性。属性描述符分为两类：

数据属性描述符：描述一个具有值的属性
访问器属性描述符：描述一个由getter/setter函数对表示的属性

数据属性描述符的特性

数据属性描述符包含以下特性：

value：属性的值，默认为undefined
writable：属性值是否可以被修改，默认为true
enumerable：属性是否可枚举（是否出现在for...in循环中），默认为true
configurable：属性描述符是否可以被修改、属性是否可以被删除，默认为true

访问器属性描述符的特性

访问器属性描述符包含以下特性：

get：获取属性值的函数，默认为undefined
set：设置属性值的函数，默认为undefined
enumerable：属性是否可枚举，默认为true
configurable：属性描述符是否可以被修改、属性是否可以被删除，默认为true

需要注意的是，数据属性描述符和访问器属性描述符是互斥的，一个属性不能同时拥有value或writable特性和get或set特性。

获取属性描述符

Object.getOwnPropertyDescriptor()

Object.getOwnPropertyDescriptor()方法返回指定对象上一个自有属性对应的属性描述符。

语法：

Object.getOwnPropertyDescriptor(obj, prop)

参数：

obj：需要查找的目标对象
prop：目标对象内属性名称

返回值：

如果指定的属性存在于对象上，则返回其属性描述符对象
如果属性不存在或不是对象的自有属性，则返回undefined

示例：

const person = {
  name: 'Alice',
  age: 30
};

// 获取name属性的描述符
const nameDescriptor = Object.getOwnPropertyDescriptor(person, 'name');
console.log(nameDescriptor);
// 输出: {value: "Alice", writable: true, enumerable: true, configurable: true}

// 获取不存在的属性的描述符
console.log(Object.getOwnPropertyDescriptor(person, 'height')); // undefined

// 获取原型链上属性的描述符
console.log(Object.getOwnPropertyDescriptor(person, 'toString')); // undefined

Object.getOwnPropertyDescriptors()

Object.getOwnPropertyDescriptors()方法返回指定对象所有自有属性的属性描述符。

语法：

Object.getOwnPropertyDescriptors(obj)

参数：

obj：需要获取所有属性描述符的目标对象

返回值：

包含目标对象所有自有属性的属性描述符的对象

示例：

const person = {
  name: 'Alice',
  age: 30,
  get info() {
    return `${this.name}, ${this.age}`;
  }
};

const descriptors = Object.getOwnPropertyDescriptors(person);
console.log(descriptors);
/* 输出:
{
  name: {value: "Alice", writable: true, enumerable: true, configurable: true},
  age: {value: 30, writable: true, enumerable: true, configurable: true},
  info: {get: ƒ, set: undefined, enumerable: true, configurable: true}
}
*/

定义和修改属性

Object.defineProperty()

Object.defineProperty()方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。

语法：

Object.defineProperty(obj, prop, descriptor)

参数：

obj：要定义属性的对象
prop：要定义或修改的属性名称或Symbol
descriptor：要定义或修改的属性描述符

返回值：

被传递给函数的对象

示例：

const person = {};

// 定义一个数据属性
Object.defineProperty(person, 'name', {
  value: 'Alice',
  writable: true,
  enumerable: true,
  configurable: true
});

// 定义一个只读属性
Object.defineProperty(person, 'id', {
  value: '12345',
  writable: false, // 不可写
  enumerable: true,
  configurable: false // 不可配置
});

// 尝试修改只读属性
person.id = '67890'; // 在严格模式下会抛出错误，非严格模式下静默失败
console.log(person.id); // 仍然是 "12345"

// 定义一个访问器属性
Object.defineProperty(person, 'fullName', {
  get: function() {
    return `${this.name} Smith`;
  },
  set: function(value) {
    const parts = value.split(' ');
    this.name = parts[0];
  },
  enumerable: true,
  configurable: true
});

console.log(person.fullName); // "Alice Smith"
person.fullName = 'Bob Smith';
console.log(person.name); // "Bob"

Object.defineProperties()

Object.defineProperties()方法可以一次定义多个属性。

语法：

Object.defineProperties(obj, props)

参数：

obj：要定义属性的对象
props：包含要定义的属性的对象，其中每个键是属性名，值是属性描述符

返回值：

被传递给函数的对象

示例：

const product = {};

Object.defineProperties(product, {
  name: {
    value: 'Laptop',
    writable: true,
    enumerable: true,
    configurable: true
  },
  price: {
    value: 1000,
    writable: true,
    enumerable: true,
    configurable: true
  },
  discount: {
    get: function() {
      return this.price * 0.1;
    },
    enumerable: true,
    configurable: true
  },
  netPrice: {
    get: function() {
      return this.price - this.discount;
    },
    enumerable: true,
    configurable: true
  }
});

console.log(product.name); // "Laptop"
console.log(product.price); // 1000
console.log(product.discount); // 100
console.log(product.netPrice); // 900

属性描述符的默认值

当使用Object.defineProperty()或Object.defineProperties()定义属性时，如果没有指定某些特性，它们会使用默认值：

const obj = {};

// 完整定义
Object.defineProperty(obj, 'prop1', {
  value: 42,
  writable: true,
  enumerable: true,
  configurable: true
});

// 省略部分特性，使用默认值
Object.defineProperty(obj, 'prop2', {
  value: 42
  // writable默认为false
  // enumerable默认为false
  // configurable默认为false
});

console.log(Object.getOwnPropertyDescriptor(obj, 'prop2'));
// 输出: {value: 42, writable: false, enumerable: false, configurable: false}

属性描述符的限制

属性描述符的configurable特性对其他特性的修改有一定的限制：

如果configurable为false：
- 不能删除该属性
- 不能将configurable从false改为true
- 不能修改enumerable特性
- 不能将数据属性修改为访问器属性，反之亦然
- 但可以将writable从true改为false（单向操作）

const obj = {};

Object.defineProperty(obj, 'prop', {
  value: 42,
  writable: true,
  enumerable: true,
  configurable: false // 不可配置
});

// 尝试删除属性
delete obj.prop; // 在严格模式下会抛出错误，非严格模式下静默失败
console.log(obj.prop); // 仍然是42

// 尝试修改为不可枚举
Object.defineProperty(obj, 'prop', {
  enumerable: false
}); // 抛出TypeError

// 可以将writable从true改为false
Object.defineProperty(obj, 'prop', {
  writable: false
}); // 成功

// 但不能将writable从false改回true
Object.defineProperty(obj, 'prop', {
  writable: true
}); // 抛出TypeError

实际应用场景

1. 创建常量属性

const settings = {};

Object.defineProperty(settings, 'API_KEY', {
  value: 'abc123xyz',
  writable: false,
  enumerable: false,
  configurable: false
});

// 尝试修改常量
settings.API_KEY = 'new_key'; // 失败
console.log(settings.API_KEY); // 仍然是 "abc123xyz"

2. 数据验证

const user = {};

Object.defineProperty(user, 'age', {
  value: 0,
  writable: true,
  enumerable: true,
  configurable: true
});

// 重新定义age属性，添加验证逻辑
Object.defineProperty(user, 'age', {
  get: function() {
    return this._age;
  },
  set: function(value) {
    if (typeof value !== 'number') {
      throw new TypeError('Age must be a number');
    }
    if (value < 0 || value > 120) {
      throw new RangeError('Age must be between 0 and 120');
    }
    this._age = value;
  },
  enumerable: true,
  configurable: true
});

user.age = 30; // 正常设置
console.log(user.age); // 30

try {
  user.age = -5; // 抛出RangeError
} catch (e) {
  console.error(e.message); // "Age must be between 0 and 120"
}

try {
  user.age = '30'; // 抛出TypeError
} catch (e) {
  console.error(e.message); // "Age must be a number"
}

3. 计算属性

const circle = {
  radius: 5
};

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

Object.defineProperty(circle, 'circumference', {
  get: function() {
    return 2 * Math.PI * this.radius;
  },
  enumerable: true,
  configurable: true
});

console.log(circle.area); // 约78.54
console.log(circle.circumference); // 约31.42

circle.radius = 10;
console.log(circle.area); // 约314.16 (自动更新)

4. 私有属性模拟

function Person(name, age) {
  // 创建不可枚举的"私有"属性
  Object.defineProperties(this, {
    _name: {
      value: name,
      writable: true,
      enumerable: false,
      configurable: true
    },
    _age: {
      value: age,
      writable: true,
      enumerable: false,
      configurable: true
    }
  });
  
  // 创建公共访问器
  Object.defineProperties(this, {
    name: {
      get: function() { return this._name; },
      set: function(value) { this._name = value; },
      enumerable: true,
      configurable: true
    },
    age: {
      get: function() { return this._age; },
      set: function(value) {
        if (value < 0) throw new Error('Age cannot be negative');
        this._age = value;
      },
      enumerable: true,
      configurable: true
    }
  });
}

const alice = new Person('Alice', 30);
console.log(alice.name); // "Alice"
console.log(alice.age); // 30

// 私有属性不会出现在for...in循环中
for (const key in alice) {
  console.log(key); // 只输出 "name" 和 "age"
}

// 但仍然可以直接访问
console.log(alice._name); // "Alice" (不是真正的私有)

属性描述符与对象复制

Object.create()

Object.create()方法可以使用指定的原型对象和属性创建一个新对象。

const personProto = {
  greet() {
    return `Hello, my name is ${this.name}`;
  }
};

const alice = Object.create(personProto, {
  name: {
    value: 'Alice',
    writable: true,
    enumerable: true,
    configurable: true
  },
  age: {
    value: 30,
    writable: true,
    enumerable: true,
    configurable: true
  }
});

console.log(alice.name); // "Alice"
console.log(alice.greet()); // "Hello, my name is Alice"

深度复制对象及其所有属性描述符

function deepCloneWithDescriptors(obj) {
  const clone = Object.create(Object.getPrototypeOf(obj));
  
  const descriptors = Object.getOwnPropertyDescriptors(obj);
  Object.defineProperties(clone, descriptors);
  
  return clone;
}

// 使用示例
const original = {
  name: 'Original',
  get greeting() {
    return `Hello, I'm ${this.name}`;
  }
};

// 添加一个不可枚举的属性
Object.defineProperty(original, 'id', {
  value: 12345,
  enumerable: false,
  writable: true,
  configurable: true
});

const cloned = deepCloneWithDescriptors(original);
console.log(cloned.name); // "Original"
console.log(cloned.greeting); // "Hello, I'm Original"
console.log(cloned.id); // 12345

// 验证描述符是否也被复制
console.log(Object.getOwnPropertyDescriptor(cloned, 'id').enumerable); // false

属性描述符与原型链

属性描述符只影响对象自身的属性，不影响原型链上的属性：

const proto = {};
Object.defineProperty(proto, 'shared', {
  value: 'I am shared',
  writable: false,
  enumerable: true,
  configurable: false
});

const obj = Object.create(proto);

// 无法修改原型上的只读属性
obj.shared = 'Trying to override'; // 失败
console.log(obj.shared); // 仍然是 "I am shared"

// 但可以在对象自身添加同名属性来遮蔽原型属性
Object.defineProperty(obj, 'shared', {
  value: 'I am not shared',
  writable: true,
  enumerable: true,
  configurable: true
});

console.log(obj.shared); // "I am not shared"
console.log(proto.shared); // "I am shared"（原型属性未被修改）

属性描述符与反射API

ES6引入的Reflect API提供了与Object对象上的方法相对应的方法，但有更一致的行为：

const obj = {};

// 使用Object API
try {
  Object.defineProperty(obj, 'prop', {
    value: 42,
    writable: false
  });
  console.log('Property defined successfully');
} catch (error) {
  console.error('Failed to define property');
}

// 使用Reflect API
if (Reflect.defineProperty(obj, 'anotherProp', {
  value: 100,
  writable: false
})) {
  console.log('Property defined successfully');
} else {
  console.error('Failed to define property');
}

Reflect API的优势在于它返回布尔值表示操作是否成功，而不是抛出异常，这在某些情况下更方便处理。

总结

属性描述符是JavaScript中一个强大的特性，它允许我们精确控制对象属性的行为。通过本文介绍的方法，我们可以：

获取属性的描述符（Object.getOwnPropertyDescriptor()和Object.getOwnPropertyDescriptors()）
定义和修改属性（Object.defineProperty()和Object.defineProperties()）
控制属性的可写性、可枚举性和可配置性
创建访问器属性，实现计算属性和数据验证
模拟私有属性和常量
使用属性描述符进行对象复制

掌握属性描述符操作，可以帮助我们编写更健壮、更灵活的JavaScript代码，特别是在开发库和框架时，这些技术尤为重要。