JavaScript Object.defineProperty()

let obj = {};

// define a single property of obj object
Object.defineProperty(obj, "property1", {
  value: 789,
  writable: true,
  enumerable: true,
  configurable: true,
});

console.log(obj.property1); 

// Output: 789

defineProperty() 语法

defineProperty() 方法的语法是：

Object.defineProperty(obj, prop, descriptor)

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

defineProperty() 参数

defineProperty() 方法接受以下参数：

• obj - 要定义属性的对象。
• prop - 要定义或修改的属性的名称或 Symbol。
• descriptor - 要定义或修改的属性的描述符。

defineProperty() 返回值

defineProperty() 方法返回传递给函数的对象，即 obj。

示例 1：JavaScript Object.defineProperty()

// create an object named user
let user = {};

// define the name property of the user object 
Object.defineProperty(user, "name", {
  value: "John",
  writable: false
});

// attempt to change the name property
// change will fail silently
user.name = "John Doe";
console.log(user.name)

// Output: John

在此示例中，Object.defineProperty() 用于将 name 属性添加到 user 对象。该属性使用特定值（"John"）定义，并将其 writable 属性设置为 false。

然后，我们尝试将 name 属性的值更改为 "John Doe"。

user.name = "John Doe";
console.log(user.name)

从输出中可以看出，我们未能更改 name 的值。这是因为我们将 writable 属性设置为 false。

defineProperties() 属性和描述符值

在进一步讨论之前，让我们先讨论 prop 和 descriptor 参数可能的值。

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

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

数据描述符还可以包含：

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

访问描述符还可以包含：

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

示例 2：使用数据描述符的 defineProperty()

let obj = {};

// define object's property with data descriptors
Object.defineProperty(obj, "id", {
  value: 711,
  writable: true,
  enumerable: true,
  configurable: true,
});

console.log(obj.id); 

// Output: 711

在此示例中，Object.defineProperty() 用于将 id 属性添加到 obj 对象。

该属性使用特定值（711）定义，并将其 writable、enumerable 和 configurable 属性设置为 true。

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

let obj = {};

// define object's property  with access descriptors
Object.defineProperty(obj, "name", {
  get() {
    console.log("Getting Value...");
    return val;
  },
  set(newVal) {
    console.log("Setting Value...");
    val = newVal;
  },
  enumerable: true,
  configurable: true,
});

obj.name = 'Bart'; 

console.log(obj.name); 

输出

Setting Value...
Getting Value...
Bart

在上面的示例中，我们使用 Object.defineProperty() 在 obj 上定义了 name 属性，并使用了以下访问描述符：

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

另请阅读

• JavaScript Object.defineProperties()