关于 Object.defineProperty()
2024-09-03 05:14:01
通常，定义或者修改一个JS对象，有以下方式：
// 1. 字面量
let obj = {
name: 'cedric',
age: 18
}
// 2. new Object()
let obj = new Object()
obj.name = 'cedric'
obj.age = 18
// 3. Object.create()
// 4. 工厂模式
// 5. 构造函数
// 6. ...
上面当对象创建一个属性后，如：obj.name = 'cedric', 其中 name 就是一个 【普通属性】，ta的值允许修改或删除，也可以通过for..in 或 Object,keys 枚举遍历。
如果要更精准的控制对象属性，可以使用 Object.defineProperty() 方法。
语法
Object.defineProperty(obj, prop, descriptor)
// obj： 需要定义属性的当前对象
// prop： 当前需要定义或修改的属性名
// descriptor： 属性描述符
例如：
let obj = {}; // 创建一个新对象
// 在对象中添加一个属性与数据描述符的示例
Object.defineProperty(obj, "name", {
value : 'cedric', // 属性 value 的初始化值 cedric
writable : true, // 可修改值内容, 默认值 false
enumerable : true, // 可枚举，默认 false
configurable : true // 可枚举，默认 false
});
属性描述符 - descriptor
| 属性 | 说明 | 默认值 |
|---|---|---|
| configurable | 该属性为true时才可以被删除 | false |
| enumerable | 为true时，可以被for...in或Object.keys枚举 | false |
| value | 该属性对应的值 | undefined |
| writable | 为true时，value才能被赋值运算符改变 | false |
| get | 取值的时候，触发 | undefined |
| set | 修改属性的时候，触发 | undefined |
set 和 get
设置set或者get，就不能在设置value和wriable，否则会报错。
let obj = {
__age: 18
};
Object.defineProperty(obj, 'age', {
enumerable: true,
configurable: true,
get: function () {
console.log('get------------age');
return 'My age is ' + this.__age;
},
set: function (newVal) {
console.log('set------------age', newVal);
this.__age = newVal;
}
});
console.log(obj.__age); // 18, __age为普通属性
console.log(obj.age); // My age is 18 ， 触发 get()
obj.age = 22; // 触发 set()
console.log(obj.__age); // 22
console.log(obj.age); // My age is 22， 触发 get()
obj.__age = 33; // 既不触发 set() , 也不触发 get()
console.log(obj.__age); // 33
console.log(obj.age); // My age is 33 , 触发 get()