使用 Object.defineProperty 方法在对象上定义一个新属性或修改现有属性。

const def = (obj, key, value, writable = false) => {
Object.defineProperty(obj, key, {
configurable: true,
enumerable: false,
writable,
value
});
};
// 示例对象
const person = {};
// 使用 def 函数定义属性
def(person, 'name', 'John', true);
def(person, 'age', 30);
// 访问属性
console.log(person.name); // 输出: John
console.log(person.age); // 输出: 30
// 尝试枚举属性
for (let key in person) {
console.log(key); // 不会输出 'name' 和 'age'，因为 enumerable: false
}
// 修改属性
person.name = 'Jane';
console.log(person.name); // 输出: Jane
// 尝试删除属性
delete person.name;
console.log(person.name); // 输出: undefined，因为 configurable: true

• 定义属性：使用 Object.defineProperty 方法在对象 person 上定义了 name 和 age 属性。
• 属性描述符：configurable: true 允许属性被删除或修改，enumerable: false 使属性在枚举时不可见，writable 决定属性是否可写，value 设置属性的值。
• 访问和修改属性：可以访问和修改属性 name，因为 writable 为 true。
• 枚举属性：由于 enumerable: false，属性 name 和 age 不会出现在枚举中。
• 删除属性：由于 configurable: true，属性 name 可以被删除。

Object.defineProperty 可以用于 HTML 元素（如 div）来定义或修改属性。以下是一个示例，展示如何使用 Object.defineProperty 给 div 元素定义一个新属性：

// 创建一个 div 元素
const div = document.createElement('div');
// 使用 Object.defineProperty 定义一个新属性
Object.defineProperty(div, 'customProperty', {
value: 'Hello, World!',
writable: true,
enumerable: true,
configurable: true
});
// 访问新定义的属性
console.log(div.customProperty); // 输出: Hello, World!
// 修改新定义的属性
div.customProperty = 'Hello, JavaScript!';
console.log(div.customProperty); // 输出: Hello, JavaScript!
// 枚举属性
for (let key in div) {
if (div.hasOwnProperty(key)) {
console.log(key); // 输出: customProperty
}
}
// 删除属性
delete div.customProperty;
console.log(div.customProperty); // 输出: undefined

1. 创建元素：使用 document.createElement('div') 创建一个 div 元素。
2. 定义属性：使用 Object.defineProperty 方法在 div 元素上定义一个名为 customProperty 的新属性，并设置其值为 'Hello, World!'。属性描述符设置为 writable: true、enumerable: true 和 configurable: true。
3. 访问和修改属性：可以访问和修改新定义的属性 customProperty。
4. 枚举属性：由于 enumerable: true，属性 customProperty 会出现在 for...in 循环中。
5. 删除属性：由于 configurable: true，属性 customProperty 可以被删除。

那么Object.defineProperty定义的属性，与div.customProperty赋值的属性，有什么区别？

属性描述符

• 直接赋值：
• 默认情况下，属性是可枚举的（enumerable: true）、可配置的（configurable: true）和可写的（writable: true）。

const div = document.createElement('div');
div.customProperty = 'Hello, World!';
console.log(div.customProperty); // 输出: Hello, World!

Object.defineProperty：

• 允许你精确控制属性的行为，包括是否可枚举、可配置和可写。
• 示例：

const div = document.createElement('div');
Object.defineProperty(div, 'customProperty', {
value: 'Hello, World!',
writable: false,
enumerable: false,
configurable: false
});
console.log(div.customProperty); // 输出: Hello, World!

可枚举性

• 直接赋值：
• 属性是可枚举的，可以在 for...in 循环和 Object.keys 中看到。
• 示例：

const div = document.createElement('div');
div.customProperty = 'Hello, World!';
for (let key in div) {
console.log(key); // 输出: customProperty
}

Object.defineProperty：

• 你可以控制属性是否可枚举。

const div = document.createElement('div');
Object.defineProperty(div, 'customProperty', {
value: 'Hello, World!',
enumerable: false
});
for (let key in div) {
console.log(key); // 不会输出 customProperty
}

可写性

• 直接赋值：
• 属性默认是可写的。

const div = document.createElement('div');
div.customProperty = 'Hello, World!';
div.customProperty = 'New Value';
console.log(div.customProperty); // 输出: New Value

Object.defineProperty：

• 你可以控制属性是否可写。

const div = document.createElement('div');
Object.defineProperty(div, 'customProperty', {
value: 'Hello, World!',
writable: false
});
div.customProperty = 'New Value';
console.log(div.customProperty); // 输出: Hello,

说白了，直接赋值属性，就是Object.defineProperty定义属性的简化版本。