JavaScript的Object.defineProperty详解

什么是Object.defineProperty？

Object.defineProperty() 是 JavaScript 中用于定义对象属性的一个函数。这个函数允许我们定义一个新属性或者修改一个已有属性，实现更高度的灵活性。

语法

Object.defineProperty(obj, prop, descriptor)

参数:

obj — 要在其上定义属性的对象。
prop — 要定义或修改的属性的名称。
descriptor — 将被定义或修改的属性的描述符。

描述符属性

descriptor 参数接受一个对象，该对象包含要定义的属性的各个描述符属性，例如：

configurable — 如果是 true，则该属性可以被删除，属性描述符可以被修改。默认是 false。
enumerable — 如果是 true，则该属性可以出现在对象枚举中。默认是 false。
value — 该属性对应的值。可以是任何JavaScript类型。默认是 undefined。
writable — 如果是 true，则该属性可以被改变。默认是 false。
get — 与属性关联的获取函数。
set — 与属性关联的设置函数。

注意：如果使用 get 或 set，则不应同时指定 value 和 writable。

实例说明

实例1：使用 `Object.defineProperty()` 定义一个只读属性

const person = {};
Object.defineProperty(person, 'name', {
    value: 'Bob',
    writable: false, // 将writable设置为false，使其变成只读属性
    enumerable: true,
    configurable: true
});

console.log(person.name); // Bob
person.name = 'Alice';
console.log(person.name); // Bob，不能被改变

在上面的示例中，我们使用 Object.defineProperty() 将 person 对象中的 name 属性设置为只读属性，如下所示：

writable: false,

这意味着我们不能更改 name 属性的值。下面的代码将输出 Bob 和 Bob，因为我们试图将 name 属性更改为一个新值但失败了：

console.log(person.name); // Bob
person.name = 'Alice';
console.log(person.name); // Bob，不能被改变

实例2：使用 `get` 和 `set` 定义一个计算属性

const person = {
    firstName: 'Alice',
    lastName: 'Green'
};

Object.defineProperty(person, 'fullName', {
    get() {
        return this.firstName + ' ' + this.lastName;
    },
    set(value) {
        const arr = value.split(' ');
        this.firstName = arr[0];
        this.lastName = arr[1];
    }
});

console.log(person.fullName); // Alice Green

person.fullName = 'Bob Brown';
console.log(person.firstName); // Bob
console.log(person.lastName); // Brown
console.log(person.fullName); // Bob Brown

在上面的示例中，我们定义了一个叫做 fullName 的计算属性。这个属性没有实际值，但是当你使用 person.fullName 时，它会返回由 firstName 和 lastName 组成的字符串。我们还通过 set 函数定义了设置函数，以便我们可以在设置 fullName 时自动更新 firstName 和 lastName。

下面的代码将输出 Alice Green 和 Bob Brown：

console.log(person.fullName); // Alice Green

person.fullName = 'Bob Brown';
console.log(person.firstName); // Bob
console.log(person.lastName); // Brown
console.log(person.fullName); // Bob Brown