77 lines
2.3 KiB
Markdown
77 lines
2.3 KiB
Markdown
|
# `Object.defineProperty` 方法
|
|||
|
|
|
|||
|
|
## 一、基本概念
|
|||
|
|
|
|||
|
|
`Object.defineProperty()` 是 JavaScript 中用于直接在一个对象上定义一个新属性，或者修改一个对象的现有属性的方法。它允许精确控制属性的行为特性。
|
|||
|
|
|
|||
|
|
## 属性描述符详解
|
|||
|
|
|
|||
|
|
### 1. 数据描述符（已注释部分）
|
|||
|
|
```javascript
|
|||
|
|
{
|
|||
|
|
value: 18, // 属性值
|
|||
|
|
enumerable: true, // 是否可枚举（for...in或Object.keys()）
|
|||
|
|
writable: true, // 是否可修改
|
|||
|
|
configurable: true // 是否可删除或修改特性
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 2. 存取描述符（实际使用部分）
|
|||
|
|
```javascript
|
|||
|
|
{
|
|||
|
|
get() {
|
|||
|
|
// 读取属性时调用
|
|||
|
|
return age;
|
|||
|
|
},
|
|||
|
|
set(value) {
|
|||
|
|
// 设置属性时调用
|
|||
|
|
age = value;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 特性说明
|
|||
|
|
|
|||
|
|
| 特性 | 类型 | 默认值 | 描述 |
|
|||
|
|
| ------------ | ---- | --------- | ------------------------ |
|
|||
|
|
| configurable | 布尔 | false | 是否可删除属性或修改特性 |
|
|||
|
|
| enumerable | 布尔 | false | 是否出现在枚举属性中 |
|
|||
|
|
| value | 任意 | undefined | 属性值 |
|
|||
|
|
| writable | 布尔 | false | 是否可被赋值运算符改变 |
|
|||
|
|
| get | 函数 | undefined | 读取属性时调用的函数 |
|
|||
|
|
| set | 函数 | undefined | 设置属性时调用的函数 |
|
|||
|
|
|
|||
|
|
## 使用场景
|
|||
|
|
|
|||
|
|
1. **实现数据响应式**（如Vue2的核心实现）
|
|||
|
|
2. **创建私有属性**（通过getter/setter控制访问）
|
|||
|
|
3. **属性访问拦截**（在读取或设置时执行额外操作）
|
|||
|
|
4. **定义不可枚举属性**（如内置对象的一些方法）
|
|||
|
|
|
|||
|
|
## 注意事项
|
|||
|
|
|
|||
|
|
1. 数据描述符（value, writable）和存取描述符（get, set）不能同时使用
|
|||
|
|
2. 默认情况下，通过defineProperty添加的属性不可枚举、不可写、不可配置
|
|||
|
|
3. 在严格模式下，setter必须设置一个参数，否则会抛出错误
|
|||
|
|
4. getter不应有副作用（如修改其他属性值）
|
|||
|
|
|
|||
|
|
**实现简单响应式**
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
function defineReactive(obj, key, val) {
|
|||
|
|
Object.defineProperty(obj, key, {
|
|||
|
|
get() {
|
|||
|
|
console.log(`读取 ${key}: ${val}`);
|
|||
|
|
return val;
|
|||
|
|
},
|
|||
|
|
set(newVal) {
|
|||
|
|
console.log(`设置 ${key}: ${newVal}`);
|
|||
|
|
val = newVal;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const data = {};
|
|||
|
|
defineReactive(data, 'message', 'Hello');
|
|||
|
|
```
|