Object.defineProperty 深入浅出——属性、描述符与可修改属性

前端

2023-09-13 03:30:44

Object.defineProperty 简介

Object.defineProperty 方法是 JavaScript 中用于定义和修改对象属性的内置方法。它允许我们以更细粒度的控制方式操作对象的属性，包括设置属性的值、属性的可写性、可枚举性和可配置性。

数据属性与访问器属性

在 JavaScript 中，属性可以分为两大类：数据属性和访问器属性。

数据属性 ：数据属性包含一个简单的值，例如字符串、数字或布尔值。
访问器属性 ：访问器属性没有值，而是包含一对 getter 和 setter 方法，分别用于获取和设置属性的值。

Object.defineProperty 方法可以用来定义和修改这两种类型的属性。

可修改属性

除了数据属性和访问器属性之外，Object.defineProperty 方法还可以用来定义可修改属性。可修改属性是数据属性的一种特殊类型，它允许我们修改属性的特性，例如可写性、可枚举性和可配置性。

使用 Object.defineProperty 方法

Object.defineProperty 方法的语法如下：

Object.defineProperty(obj, prop, descriptor);

其中：

obj：要定义或修改属性的对象。
prop：属性的名称。
descriptor：属性的符对象，用于指定属性的特性。

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

value：属性的值。
writable：布尔值，表示属性是否可写。
enumerable：布尔值，表示属性是否可枚举。
configurable：布尔值，表示属性是否可配置。

实例

以下是一个使用 Object.defineProperty 方法定义数据属性的示例：

const obj = {};

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

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

以下是一个使用 Object.defineProperty 方法定义访问器属性的示例：

const obj = {};

Object.defineProperty(obj, 'age', {
  get: function() {
    return this._age;
  },
  set: function(value) {
    this._age = value;
  },
  enumerable: true,
  configurable: true
});

obj.age = 30;

console.log(obj.age); // 30

以下是一个使用 Object.defineProperty 方法定义可修改属性的示例：

const obj = {};

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

obj.name = 'Jane Doe';

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