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()
,开发者可以更加灵活地控制对象的行为和属性特性,满足更复杂的编程需求。