感受Object.defineProperty()魔法魅力无限自定义对象属性

2023-10-07 23:08:07

Object.defineProperty()的定义和作用

在JavaScript中，Object.defineProperty()是一个非常强大的方法，它允许你对对象的属性进行定义和修改。通过使用Object.defineProperty()，你可以设置属性的可写性、可枚举性、可配置性和默认值，并能够自定义属性的getter和setter方法。

Object.defineProperty()的语法格式如下：

Object.defineProperty(obj, prop, descriptor)

其中：

obj是要操作的对象
prop是要定义或修改的属性名称
descriptor是要设置的属性符对象

属性符对象

属性描述符对象是一个包含属性属性的对象。它可以包含以下属性：

value：属性的初始值
writable：一个布尔值，表示属性是否可写
enumerable：一个布尔值，表示属性是否可枚举
configurable：一个布尔值，表示属性是否可配置
get：一个函数，表示属性的getter方法
set：一个函数，表示属性的setter方法

使用Object.defineProperty()定义属性

以下是如何使用Object.defineProperty()定义属性的示例：

const obj = {};

// 使用Object.defineProperty()方法为obj对象添加一个名为"name"的属性
Object.defineProperty(obj, "name", {
  value: "John Doe",
  writable: true,
  enumerable: true,
  configurable: true
});

// 使用点号表示法访问属性
console.log(obj.name); // 输出："John Doe"

// 使用方括号表示法访问属性
console.log(obj["name"]); // 输出："John Doe"

// 使用for-in循环访问属性
for (const prop in obj) {
  console.log(prop); // 输出："name"
}

使用Object.defineProperty()修改属性

以下是如何使用Object.defineProperty()修改属性的示例：

const obj = {
  name: "John Doe",
  age: 30
};

// 修改name属性的值
Object.defineProperty(obj, "name", {
  value: "Jane Doe"
});

// 修改age属性的可写性
Object.defineProperty(obj, "age", {
  writable: false
});

// 尝试修改age属性的值
obj.age = 31;

console.log(obj.name); // 输出："Jane Doe"
console.log(obj.age); // 输出：30

// 使用Object.getOwnPropertyDescriptor()方法获取属性描述符
const descriptor = Object.getOwnPropertyDescriptor(obj, "age");

console.log(descriptor);
/*
输出：
{
  value: 30,
  writable: false,
  enumerable: true,
  configurable: true
}
*/

使用Object.defineProperty()实现响应式属性

Vue框架内部大量使用了Object.defineProperty()方法来实现响应式属性。响应式属性是指当属性值发生变化时，会自动触发相关操作的属性。

以下是如何使用Object.defineProperty()实现响应式属性的示例：

const obj = {};

// 使用Object.defineProperty()方法为obj对象添加一个名为"name"的响应式属性
Object.defineProperty(obj, "name", {
  value: "John Doe",
  writable: true,
  enumerable: true,
  configurable: true,
  get() {
    return this._name;
  },
  set(newName) {
    this._name = newName;

    // 当name属性的值发生变化时，触发相关操作
    console.log(`Name changed to ${newName}`);
  }
});

// 访问name属性
console.log(obj.name); // 输出："John Doe"

// 修改name属性的值
obj.name = "Jane Doe";

// 输出："Name changed to Jane Doe"