深入浅出 Object.defineProperty

前端

2023-11-03 03:13:33

JavaScript中的属性符

在JavaScript中，属性符是一个对象，用于描述一个属性的特性。它包含了四个属性：

configurable： 布尔值，表示该属性是否可以被删除或重新定义。
enumerable： 布尔值，表示该属性是否可以在对象的for-in循环中被枚举。
writable： 布尔值，表示该属性的值是否可以被修改。
value： 该属性对应的值。可以是任何有效的JavaScript值（数值，对象，函数等）。读取属性的时候就是通过这里开始读，默认值为undefined。

数据属性和访问器属性

JavaScript中的属性可以分为两种类型：数据属性和访问器属性。数据属性是一个具有值和类型（字符串、数字、布尔值等）的属性。访问器属性是一个没有值和类型的属性，而是通过getter和setter函数来访问和修改该属性的值。

使用Object.defineProperty创建属性

可以通过Object.defineProperty方法来创建属性。该方法的语法如下：

Object.defineProperty(obj, prop, descriptor)

其中：

obj： 要创建属性的对象。
prop： 要创建的属性的名称。
descriptor： 属性描述符对象。

configurable、enumerable和writable属性

configurable、enumerable和writable属性是属性描述符对象的三个布尔属性。它们分别表示该属性是否可以被删除或重新定义、是否可以在对象的for-in循环中被枚举、以及该属性的值是否可以被修改。

示例

以下示例展示了如何使用Object.defineProperty来创建一个数据属性和一个访问器属性：

const obj = {};

// 创建一个数据属性
Object.defineProperty(obj, "name", {
  value: "John Doe",
  writable: true,
  enumerable: true,
  configurable: true
});

// 创建一个访问器属性
Object.defineProperty(obj, "age", {
  get: function() {
    return this._age;
  },
  set: function(value) {
    if (value < 0) {
      throw new Error("Age cannot be negative");
    }
    this._age = value;
  },
  configurable: true,
  enumerable: true
});

// 使用数据属性
console.log(obj.name); // "John Doe"

// 使用访问器属性
console.log(obj.age); // undefined
obj.age = 30;
console.log(obj.age); // 30