跳到主要内容

Javascript 对象 defineProperty() 方法

Object.defineProperty()方法在对象上添加一个属性或修改现有属性，并返回该对象。

示例​

let obj = {};

// 定义obj对象的单个属性
Object.defineProperty(obj, "property1", {
  value: 789,
  writable: true,
  enumerable: true,
  configurable: true,
});

console.log(obj.property1);

// 输出: 789

defineProperty()语法​

defineProperty()方法的语法是：

Object.defineProperty(obj, prop, descriptor);

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

defineProperty()参数​

defineProperty()方法接受：

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

defineProperty()返回值​

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

注意：

  • 默认情况下，使用Object.defineProperty()添加的值是不可变且不可枚举的。
  • 如果描述符没有包含value、writable、get和set键中的任何一个，则视为数据描述符。如果描述符同时具有value或writable和get或set键，则会抛出异常。

示例1：JavaScript Object.defineProperty()​

// 创建名为user的对象
let user = {};

// 定义user对象的name属性
Object.defineProperty(user, "name", {
  value: "John",
  writable: false,
});

// 尝试更改name属性
// 更改将静默失败
user.name = "John Doe";
console.log(user.name);

// 输出: John

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

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

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

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

defineProperties()的Prop和Descriptor值​

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

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

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

数据描述符还可以有：

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

访问器描述符还可以有：

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

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

let obj = {};

// 使用数据描述符定义对象的属性
Object.defineProperty(obj, "id", {
  value: 711,
  writable: true,
  enumerable: true,
  configurable: true,
});

console.log(obj.id);

// 输出: 711

在这个示例中，Object.defineProperty()用于向obj对象添加id属性。

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

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

let obj = {};

// 使用访问描述符定义对象的属性
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 - 允许我们检索属性值的方法

推荐阅读：

最后于 更新