JavaScript Object.defineProperties()

// create an object obj
let obj = {};

// define multiple properties of the obj object
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 = {};

// define two properties for obj1
Object.defineProperties(obj1, {
  'name': {
    value: 'Clint',
    writable: true
  },

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

// print name property of obj1
console.log(obj1.name)

// print age of obj1
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 = {};

// define the object's properties using
// data descriptors value and writable
Object.defineProperties(obj, {
  "id": {
    value: 711,
    writable: false
  },
  "email": {
    value: "[email protected]",
    writable: true
  }
});

// print the original properties of obj
console.log("Original Properties:");
console.log("id: " + obj.id);
console.log("email: " + obj.email); 

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

// attempt to change unwritable property id
// change will fail silently
obj.id = 358;

// print id property again
console.log("id: " + obj.id); 

// try to change the writable property email
// email value gets changed
obj.email = "[email protected]";

// print email property again
console.log("email: " + obj.email);

输出

Original Properties:
id: 711
email: [email protected]

Changed Properties:
id: 711
email: [email protected]

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

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

之后，我们尝试查看 writable 数据描述符的工作方式。

// attempt to rewrite unwritable property id
obj.id = 358;
console.log(obj.id); // 711

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

然后我们尝试修改 email 属性。

// attempt to rewrite writable property email
obj.email = "[email protected]";
console.log(obj.email);

由于 email 属性的 writable 数据描述符设置为 true，因此我们能够重写它。

示例 3：使用访问描述符的 defineProperties()

const obj = {};

// define object properties using
// access descriptors get and 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
  }
});

// set the value of prop1 and print it
obj.prop1 = "Hello";
console.log(obj.prop1); 

// Output: Hello

// set the value of prop2 and print it
obj.prop2 = "World";
console.log(obj.prop2); 

// Output: World

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

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

另请阅读

• JavaScript Object.defineProperty()
• JavaScript Getter 和 Setter
• JavaScript Object.defineProperty()