跳到主要内容

Javascript 对象 defineProperties() 方法

Object.defineProperties() 方法在对象上添加或修改属性，并返回该对象。

示例​

// 创建一个对象 obj
let obj = {};

// 定义 obj 对象的多个属性
Object.defineProperties(obj, {
  property1: {
    value: true,
    writable: true,
  },
  property2: {
    value: "Hello",
    writable: false,
  },
});

console.log(obj.property1); // true
console.log(obj.property2); // Hello

defineProperties() 语法​

defineProperties() 方法的语法是：

Object.defineProperties(obj, props);

这里，defineProperties() 是一个静态方法。因此，我们需要使用类名 Object 来访问这个方法。

defineProperties() 参数​

defineProperties() 方法接受：

  • obj - 要在其上定义或修改属性的对象。
  • props - 其键代表要定义或修改的属性名称，其值是描述这些属性的对象。

defineProperties() 返回值​

defineProperties() 方法返回作为参数传递的对象，即 obj。

注意： 如果描述符不包含 value、writable、get 和 set 中的任何一个键，那么它被视为数据描述符。如果描述符同时具有 value 或 writable 和 get 或 set 键，则会抛出异常。

示例 1：JavaScript 对象的 Object.defineProperties()​

let obj1 = {};

// 为 obj1 定义两个属性
Object.defineProperties(obj1, {
  name: {
    value: "Clint",
    writable: true,
  },

  age: {
    value: 36,
    writable: true,
  },
});

// 打印 obj1 的 name 属性
console.log(obj1.name);

// 打印 obj1 的 age
console.log(obj1.age);

输出

Clint
36

在这个示例中，我们使用 Object.defineProperties() 为 obj1 添加了 name 和 age 属性。这些属性被定义为具有特定值，并且它们的 writable 属性被设置为 true。

输出表明 name 和 age 已成功添加到 obj1。

defineProperties() Props 值​

在进一步讨论之前，让我们首先讨论 props 参数可能具有的值。

每个属性值必须是数据描述符或访问器描述符。它们可以具有以下可选属性：

  • configurable - 更改或删除属性的属性的能力
  • enumerable - 在 for...in 循环中和 Object.keys() 时可见的属性。

数据描述符还可以具有：

  • value - 存储在属性中的实际数据，通过其键访问。
  • writable - 更改属性值的能力。如果为 false，则不能更改属性的值。

访问器描述符还可以具有：

  • get - 返回属性值的函数。
  • set - 设置属性值的函数。

示例 2：带有数据描述符的 defineProperties()​

let obj = {};

// 使用数据描述符 value 和 writable
// 定义对象的属性
Object.defineProperties(obj, {
  id: {
    value: 711,
    writable: false,
  },
  email: {
    value: "hello@test.com",
    writable: true,
  },
});

// 打印 obj 的原始属性
console.log("Original Properties:");
console.log("id: " + obj.id);
console.log("email: " + obj.email);

console.log("\nChanged Properties:");

// 尝试更改不可写的属性 id
// 更改将静默失败
obj.id = 358;

// 再次打印 id 属性
console.log("id: " + obj.id);

// 尝试更改可写属性 email
// email 值被更改
obj.email = "world@test.com";

// 再次打印 email 属性
console.log("email: " + obj.email);

输出

原始属性：
id: 711
email: hello@test.com

更改后的属性：
id: 711
email: world@test.com

在上述示例中，我们首先创建了一个空对象 obj。

然后，我们使用 Object.defineProperties 为 obj 添加了两个属性：id 和 email。对于每个属性，我们定义了它的值以及它是否可写。

接着，我们尝试了解 writable 数据描述符是如何工作的。

// 尝试重写不可写的属性 id
obj.id = 358;
console.log(obj.id); // 711

然而，id 的 writable 数据描述符被设置为 false。因此，我们无法重写 id 属性。

接下来我们尝试修改 email 属性。

// 尝试重写可写的属性 email
obj.email = "world@test.com";
console.log(obj.email);

我们可以重写 email 属性，因为它的数据描述符 writable 被设置为 true。

示例 3：带有访问描述符的 defineProperties()​

const obj = {};

// 使用访问描述符 get 和 set
// 定义对象属性
Object.defineProperties(obj, {
  prop1: {
    get: function () {
      return this._prop1;
    },
    set: function (val) {
      this._prop1 = val;
    },
    enumerable: true,
    configurable: true,
  },
  prop2: {
    get: function () {
      return this._prop2;
    },
    set: function (val) {
      this._prop2 = val;
    },
    enumerable: true,
    configurable: false,
  },
});

// 设置 prop1 的值并打印
obj.prop1 = "Hello";
console.log(obj.prop1);

// 输出：Hello

// 设置 prop2 的值并打印
obj.prop2 = "World";
console.log(obj.prop2);

// 输出：World

在上述示例中，我们使用 Object.defineProperties() 在 obj 对象上定义了两个属性，prop1 和 prop2。这两个属性都具有以下访问描述符：

  • set - 允许我们设置属性的值的方法
  • get - 允许我们检索属性的值的方法

推荐阅读：

最后于 更新