ES6中Object.defineProperty的详细用法和使用场景以及例子

ES6 Object.defineProperty() 用法总结

Object.defineProperty() 是 ES5 引入的一个方法，ES6 继续强化了该方法的使用，它允许我们为对象的属性定义或修改 属性描述符。它能够控制对象属性的行为，如读写权限、可枚举性和可配置性。

1. Object.defineProperty() 的语法 Object.defineProperty(obj, prop, descriptor); obj：目标对象，想要在该对象上定义或修改属性。prop：要定义或修改的属性的名称。descriptor：属性描述符，描述属性的特性。描述符是一个对象，包含以下常见属性： 属性描述符的常用字段 value：属性的值，默认为 undefined。writable：布尔值，表示属性值是否可写（默认为 false）。enumerable：布尔值，表示属性是否能被 for...in 循环和 Object.keys() 迭代（默认为 false）。configurable：布尔值，表示属性是否能被删除或者修改属性的特性（默认为 false）。get：一个函数，作为该属性的 getter，读取属性值时调用（默认为 undefined）。set：一个函数，作为该属性的 setter，写入属性值时调用（默认为 undefined）。 2. 用法和例子 2.1 定义一个属性并设置其值 const obj = {}; Object.defineProperty(obj, 'name', { value: 'Alice', writable: true, // 属性值可写 enumerable: true, // 属性可枚举 configurable: true // 属性可配置 }); console.log(obj.name); // "Alice"

在这个例子中，我们定义了一个 name 属性，给它设置了值 'Alice'，并且该属性是可写、可枚举和可配置的。

2.2 设置只读属性 const obj = {}; Object.defineProperty(obj, 'name', { value: 'Alice', writable: false // 属性值不可修改 }); console.log(obj.name); // "Alice" obj.name = 'Bob'; // 尝试修改 console.log(obj.name); // "Alice" (未修改)

通过将 writable 设置为 false，name 属性变成了只读属性，不能修改。

2.3 定义 getter 和 setter

Object.defineProperty() 可以为属性定义 getter 和 setter，使得可以通过函数的方式来获取和设置属性值。

const obj = {}; Object.defineProperty(obj, 'name', { get() { return 'Hello, ' + this._name; }, set(value) { this._name = value; }, enumerable: true, configurable: true }); obj.name = 'Alice'; console.log(obj.name); // "Hello, Alice"

在这个例子中，我们为 name 属性定义了一个 getter 和 setter。在设置属性时，set 会被调用，而在获取属性时，get 会被调用。

2.4 定义不可枚举的属性 const obj = {}; Object.defineProperty(obj, 'hidden', { value: 'secret', enumerable: false // 属性不可枚举 }); for (let key in obj) { console.log(key); // 不会输出 'hidden' } console.log(Object.keys(obj)); // []，'hidden' 也不会出现在 Object.keys() 中

在这个例子中，hidden 属性被定义为不可枚举，因此它不会出现在 for...in 循环或者 Object.keys() 的结果中。

2.5 定义不可配置的属性 const obj = {}; Object.defineProperty(obj, 'name', { value: 'Alice', configurable: false // 不可删除或修改 }); delete obj.name; // 尝试删除 console.log(obj.name); // "Alice" (未删除) Object.defineProperty(obj, 'name', { value: 'Bob' // 尝试修改 }); // TypeError: Cannot redefine property: name

通过将 configurable 设置为 false，我们使 name 属性不能被删除或重新定义。

2.6 定义一个访问器属性 const obj = { _age: 25 }; Object.defineProperty(obj, 'age', { get() { return this._age; }, set(value) { this._age = value >= 0 ? value : 0; // 确保年龄不能为负 }, enumerable: true, configurable: true }); console.log(obj.age); // 25 obj.age = -5; // 设置一个负数 console.log(obj.age); // 0，年龄不允许为负

这个例子演示了通过 get 和 set 来定义访问器属性。当试图设置一个负数时，setter 将其转化为 0，确保属性值始终有效。

3. 使用场景 3.1 实现封装

Object.defineProperty() 常用于 JavaScript 中模拟封装，隐藏对象的内部数据，并通过 getter 和 setter 来控制访问。

const person = {}; let _age = 25; Object.defineProperty(person, 'age', { get() { return _age; }, set(value) { if (value < 0) { throw new Error("Age cannot be negative"); } _age = value; } }); person.age = 30; // 正常设置 console.log(person.age); // 30 person.age = -5; // 错误：抛出异常

在这个例子中，age 属性的值被封装在内部变量 _age 中，并且设置了限制条件，避免年龄为负数。

3.2 创建常量属性

如果你想创建一个常量属性，可以通过 Object.defineProperty() 配置 writable 和 configurable 为 false，使得该属性不可更改或删除。

const obj = {}; Object.defineProperty(obj, 'PI', { value: 3.14159, writable: false, configurable: false }); console.log(obj.PI); // 3.14159 obj.PI = 3.14; // 无效，不会修改 console.log(obj.PI); // 3.14159

通过这种方式，你可以模拟常量，使属性的值不能被修改。

3.3 定义计算属性

Object.defineProperty() 可以用来动态创建和计算属性，结合 getter 和 setter 实现灵活的计算。

const obj = { _width: 100, _height: 50 }; Object.defineProperty(obj, 'area', { get() { return this._width * this._height; }, set(value) { console.log('Area is calculated automatically'); }, enumerable: true }); console.log(obj.area); // 5000 obj.area = 1000; // 触发 set()，但不会修改值

在这个例子中，area 是计算属性，它返回 width 和 height 的乘积，而 set 只是被触发，但不做实际的修改。

4. 总结 Object.defineProperty() 使你能够对对象属性的行为进行精确控制，如定义 getter、setter，控制是否可写、是否可枚举、是否可配置等。它常用于实现对象的封装、属性校验、计算属性和常量属性等。它允许创建不直接操作对象的内部数据，增加灵活性和安全性。

通过 Object.defineProperty()，开发者可以更加灵活地控制对象的行为和属性特性，满足更复杂的编程需求。