105 lines
3.0 KiB
Markdown
105 lines
3.0 KiB
Markdown
|
# JavaScript 数据代理实现文档
|
|||
|
|
|
|||
|
|
## 一、基本概念
|
|||
|
|
|
|||
|
|
数据代理是指通过一个对象（代理对象）间接访问和操作另一个对象（目标对象）的属性。本示例展示了如何使用 `Object.defineProperty` 实现简单的数据代理。
|
|||
|
|
|
|||
|
|
## 二、代码实现解析
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
let obj1 = { x: 100 }; // 目标对象（被代理对象）
|
|||
|
|
let obj2 = { y: 200 }; // 代理对象
|
|||
|
|
|
|||
|
|
// 在obj2上定义x属性的代理
|
|||
|
|
Object.defineProperty(obj2, "x", {
|
|||
|
|
get() {
|
|||
|
|
return obj1.x; // 读取时返回obj1的x属性
|
|||
|
|
},
|
|||
|
|
set(value) {
|
|||
|
|
obj1.x = value; // 设置时修改obj1的x属性
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 三、核心机制说明
|
|||
|
|
|
|||
|
|
1. **代理原理**：
|
|||
|
|
- 通过 `Object.defineProperty` 在代理对象（obj2）上定义新属性
|
|||
|
|
- 使用 getter/setter 方法实现对目标对象（obj1）属性的间接访问
|
|||
|
|
|
|||
|
|
2. **访问流程**：
|
|||
|
|
- 读取 `obj2.x` → 触发 getter → 返回 `obj1.x` 的值
|
|||
|
|
- 设置 `obj2.x` → 触发 setter → 将值赋给 `obj1.x`
|
|||
|
|
|
|||
|
|
3. **特性**：
|
|||
|
|
- 透明的属性访问（使用者无需知道代理存在）
|
|||
|
|
- 可以在访问前后执行额外逻辑（如验证、日志等）
|
|||
|
|
|
|||
|
|
## 四、应用场景
|
|||
|
|
|
|||
|
|
| 场景 | 说明 | 示例 |
|
|||
|
|
| -------- | -------------------- | ------------------------------ |
|
|||
|
|
| 属性转发 | 跨对象访问属性 | 本示例实现 |
|
|||
|
|
| 数据验证 | 设置属性前检查有效性 | setter中添加验证逻辑 |
|
|||
|
|
| 访问控制 | 限制某些属性的访问 | getter中添加权限检查 |
|
|||
|
|
| 日志记录 | 跟踪属性访问 | getter/setter中添加console.log |
|
|||
|
|
|
|||
|
|
## 五、扩展实现
|
|||
|
|
|
|||
|
|
### 1. 多属性代理
|
|||
|
|
```javascript
|
|||
|
|
function proxyProperties(target, source, props) {
|
|||
|
|
props.forEach(prop => {
|
|||
|
|
Object.defineProperty(target, prop, {
|
|||
|
|
get() {
|
|||
|
|
return source[prop];
|
|||
|
|
},
|
|||
|
|
set(value) {
|
|||
|
|
source[prop] = value;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 使用示例
|
|||
|
|
proxyProperties(obj2, obj1, ['x', 'a', 'b']);
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 2. Vue2 风格的数据代理
|
|||
|
|
```javascript
|
|||
|
|
function observe(obj) {
|
|||
|
|
const handler = {
|
|||
|
|
get(target, prop) {
|
|||
|
|
console.log(`读取 ${prop}`);
|
|||
|
|
return target[prop];
|
|||
|
|
},
|
|||
|
|
set(target, prop, value) {
|
|||
|
|
console.log(`设置 ${prop} 为 ${value}`);
|
|||
|
|
target[prop] = value;
|
|||
|
|
return true;
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
return new Proxy(obj, handler);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const observed = observe(obj1);
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 六、注意事项
|
|||
|
|
|
|||
|
|
1. **性能考虑**：
|
|||
|
|
- 每个代理属性都会增加访问开销
|
|||
|
|
- 避免在性能关键路径上过度使用
|
|||
|
|
|
|||
|
|
2. **引用关系**：
|
|||
|
|
- 代理对象和目标对象保持独立
|
|||
|
|
- 修改代理属性会影响原始对象
|
|||
|
|
|
|||
|
|
3. **枚举特性**：
|
|||
|
|
- 默认情况下代理属性不可枚举
|
|||
|
|
- 需要显式设置 `enumerable: true`
|
|||
|
|
|
|||
|
|
4. **兼容性**：
|
|||
|
|
- `Object.defineProperty` 是 ES5 特性
|
|||
|
|
- 现代开发可考虑使用 ES6 Proxy
|