object.defineProperty用法

Object.defineProperty 是 JavaScript 中一个用于定义对象属性的静态方法。它允许你精确控制对象的属性，包括属性的值、可写性、可枚举性和可配置性等特性。这个方法在需要定义特殊的属性行为时非常有用，例如，在 Vue.js 中，它常用于实现数据的响应式系统。

基本语法

Object.defineProperty(obj, prop, descriptor)

• obj：要定义属性的对象。
• prop：要定义的属性名。
• descriptor：一个描述符对象，指定属性的特性。

属性描述符（descriptor）

描述符对象可以包含以下属性：

1. value：属性的值。默认是 undefined。
2. writable：布尔值，表示属性是否可以被修改。默认是 false。
3. enumerable：布尔值，表示属性是否会出现在 for...in 循环中以及 Object.keys 方法中。默认是 false。
4. configurable：布尔值，表示属性是否可以被删除或修改其特性。默认是 false。
5. get：一个函数，表示当访问属性值时要执行的函数。默认是 undefined。
6. set：一个函数，表示当设置属性值时要执行的函数。默认是 undefined。

示例

1. 定义一个基本属性

let obj = {};
Object.defineProperty(obj, 'name', {
    value: 'John',
    writable: true,
    enumerable: true,
    configurable: true
});

console.log(obj.name); // John
obj.name = 'Doe';
console.log(obj.name); // Doe

在这个例子中，我们创建了一个属性 name，它的值是 'John'，并且可以被修改（writable: true）、可以被枚举（enumerable: true），并且可以被重新定义或删除（configurable: true）。

2. 只读属性

let obj = {};
Object.defineProperty(obj, 'age', {
    value: 30,
    writable: false,
    enumerable: true,
    configurable: true
});

console.log(obj.age); // 30
obj.age = 35;
console.log(obj.age); // 30 (无法修改)

在这个例子中，属性 age 的值是 30，但由于 writable 设置为 false，它的值无法被修改。

3. 使用 get 和 set 方法

let obj = {
    internalValue: 0
};

Object.defineProperty(obj, 'value', {
    get() {
        return this.internalValue;
    },
    set(newValue) {
        this.internalValue = newValue;
    }
});

console.log(obj.value); // 0
obj.value = 10;
console.log(obj.value); // 10

在这个例子中，value 属性使用了 get 和 set 方法。访问 value 属性时会调用 get 方法，设置 value 属性时会调用 set 方法。

4. 定义不可枚举属性

let obj = {};
Object.defineProperty(obj, 'hidden', {
    value: 'secret',
    enumerable: false,
    configurable: true
});

console.log(Object.keys(obj)); // []
console.log(obj.hidden); // secret

在这个例子中，属性 hidden 是不可枚举的，因此它不会出现在 Object.keys() 的结果中，但它仍然可以通过 obj.hidden 访问。

总结

Object.defineProperty 允许你以非常细粒度的方式定义对象的属性及其行为。通过使用属性描述符，你可以控制属性的读写、枚举和配置行为，这对于创建复杂的对象和实现自定义行为非常有用。