使用 Object.defineProperty() 在 JavaScript 中定义和控制对象属性

2023-11-11 17:32:18

Object.defineProperty() 介绍

在 JavaScript 中，Object.defineProperty() 方法用于定义或修改对象的属性，是 ES5 中引入的一个非常有用的方法。它允许我们为对象添加新属性或修改现有属性的行为，并提供了对属性进行详细控制的选项。

语法

Object.defineProperty(obj, prop, descriptor)

obj：要修改或定义属性的对象。
prop：要定义或修改的属性名称。
descriptor：一个对象，用于指定属性的行为和特性。

参数

descriptor 对象可以包含以下属性：

value：要赋给属性的初始值。
writable：布尔值，指示属性是否可写。默认值为 false。
enumerable：布尔值，指示属性是否可枚举。默认值为 false。
configurable：布尔值，指示属性是否可配置。默认值为 false。
get：一个函数，当访问属性时被调用。
set：一个函数，当设置属性值时被调用。

用法示例

1. 定义新属性

const person = {};

Object.defineProperty(person, 'name', {
  value: 'John Doe',
  writable: true,
  enumerable: true,
  configurable: true
});

console.log(person.name); // "John Doe"

在这个示例中，我们使用 Object.defineProperty() 方法为 person 对象定义了一个名为 name 的新属性。我们指定了属性的初始值、可写性、可枚举性和可配置性。

2. 修改现有属性

const person = {
  name: 'John Doe'
};

Object.defineProperty(person, 'name', {
  writable: false
});

person.name = 'Jane Doe';

console.log(person.name); // "John Doe"

在这个示例中，我们修改了 person 对象的 name 属性的可写性，使其变为 false。这将阻止我们以后修改 name 属性的值。

3. 使用 getter 和 setter

const person = {};

Object.defineProperty(person, 'age', {
  get: function() {
    return this._age;
  },
  set: function(value) {
    if (value < 0) {
      throw new Error('Age cannot be negative');
    }

    this._age = value;
  }
});

person.age = 25;

console.log(person.age); // 25

在这个示例中，我们使用 Object.defineProperty() 方法为 person 对象定义了一个名为 age 的新属性，并指定了 get 和 set 方法。get 方法用于获取属性值，set 方法用于设置属性值。我们还可以使用 _age 作为私有变量来存储实际的年龄值。