各位观众老爷，晚上好！ 今天咱不聊八卦，咱聊点硬核的，聊聊 JavaScript 的 Reflect 对象，顺便再用它和 Proxy 搞个事情，搞个自定义 ORM 框架出来。 别害怕，听起来唬人，其实没那么难。
一、Reflect 对象：JavaScript 的幕后英雄
首先，咱们得认识一下今天的主角——Reflect对象。 顾名思义， Reflect 就像一面镜子，它反映了 JavaScript 语言本身的一些行为。 它是一个内置对象，不能被 new 调用， 它的所有属性和方法都是静态的。
Reflect 出现的主要目的是：
- 统一对象操作方式： 以前很多对象操作散落在各处，比如
delete property，in操作符，obj.method.call(this, ...args)等。Reflect将这些操作统一到对象身上，提供了一套更加规范和可预测的 API。 - 更好的错误处理： 某些操作，如
Object.defineProperty在失败时会抛出错误。 而Reflect对应的方法在失败时会返回false，这让我们可以更优雅地处理错误，避免程序崩溃。 - 与 Proxy 协同工作：
Reflect对象的方法与Proxy对象 handler 的方法一一对应，这使得我们可以方便地在Proxy中拦截并修改对象的行为。
Reflect 对象的方法：一览众山小
| 方法 | 描述 | 对应 Proxy 陷阱 |
|---|---|---|
Reflect.apply(target, thisArgument, argumentsList) |
调用一个目标函数，并传入给定的 this 值和参数列表。 |
apply |
Reflect.construct(target, argumentsList, newTarget) |
使用 new 操作符调用一个构造函数。 newTarget 可选，指定原型对象。 |
construct |
Reflect.defineProperty(target, propertyKey, attributes) |
类似于 Object.defineProperty，但返回一个布尔值表示成功或失败。 |
defineProperty |
Reflect.deleteProperty(target, propertyKey) |
类似于 delete target[propertyKey]，但返回一个布尔值表示成功或失败。 |
deleteProperty |
Reflect.get(target, propertyKey, receiver) |
获取对象指定属性的值。 receiver 可选，如果目标属性是 getter， receiver 将作为 this 值传递给 getter。 |
get |
Reflect.getOwnPropertyDescriptor(target, propertyKey) |
类似于 Object.getOwnPropertyDescriptor，返回指定属性的属性描述符。 |
getOwnPropertyDescriptor |
Reflect.getPrototypeOf(target) |
类似于 Object.getPrototypeOf，返回对象的原型。 |
getPrototypeOf |
Reflect.has(target, propertyKey) |
类似于 propertyKey in target，检查对象是否具有指定的属性。 |
has |
Reflect.isExtensible(target) |
类似于 Object.isExtensible，检查对象是否可扩展。 |
isExtensible |
Reflect.ownKeys(target) |
类似于 Object.getOwnPropertyNames(target).concat(Object.getOwnPropertySymbols(target))，返回对象自身的所有属性键（包括字符串和 Symbol）。 |
ownKeys |
Reflect.preventExtensions(target) |
类似于 Object.preventExtensions，阻止对象扩展。 |
preventExtensions |
Reflect.set(target, propertyKey, value, receiver) |
设置对象指定属性的值。 receiver 可选，如果目标属性是 setter， receiver 将作为 this 值传递给 setter。 |
set |
Reflect.setPrototypeOf(target, prototype) |
类似于 Object.setPrototypeOf，设置对象的原型。 |
setPrototypeOf |
二、Proxy 对象：拦截你的对象
说完 Reflect，再来说说它的好基友——Proxy。 Proxy 对象允许你创建一个对象的代理，你可以拦截并自定义对该对象的基本操作（如属性查找、赋值、枚举、函数调用等）。
Proxy 的语法很简单：
const proxy = new Proxy(target, handler);target: 你想要代理的目标对象。handler: 一个对象，包含一组“陷阱”（traps）函数，用于拦截对目标对象的操作。
handler 对象中的每个陷阱方法都对应着对目标对象的某种操作。 比如， get 陷阱拦截属性读取， set 陷阱拦截属性赋值。
三、用 Reflect 和 Proxy 打造一个自定义 ORM
好了，理论知识铺垫完毕，现在开始进入正题：用 Reflect 和 Proxy 打造一个自定义 ORM 框架。
ORM 框架的需求分析：
一个简单的 ORM 框架，至少应该具备以下功能：
- 模型定义： 定义数据表对应的模型类。
- 数据映射： 将模型类的属性映射到数据表的字段。
- 查询构建： 提供 API 构建 SQL 查询语句。
- 数据持久化： 将模型对象保存到数据库，或从数据库加载数据到模型对象。
- 简单关系映射: 能够简单的关联到不同的表
框架设计：
我们将使用 Proxy 拦截对模型对象的属性访问，并将这些属性访问转换为 SQL 查询语句。 Reflect 用于执行实际的对象操作，确保行为的一致性。
代码实现：
- 数据库连接（简易版）：
// 简易数据库连接（实际项目中需要使用成熟的数据库驱动）
const fakeDatabase = {
users: [
{ id: 1, name: '张三', age: 25 },
{ id: 2, name: '李四', age: 30 },
],
posts: [
{ id: 1, userId: 1, title: 'Hello World' },
{ id: 2, userId: 2, title: '你好世界' },
],
};
const queryDatabase = (tableName, condition) => {
console.log(`执行查询: SELECT * FROM ${tableName} WHERE ${JSON.stringify(condition)}`); // 模拟 SQL 语句
return fakeDatabase[tableName].filter(item => {
for (let key in condition) {
if (item[key] !== condition[key]) {
return false;
}
}
return true;
});
};
const insertDatabase = (tableName, data) => {
console.log(`执行插入: INSERT INTO ${tableName} VALUES ${JSON.stringify(data)}`); // 模拟 SQL 语句
fakeDatabase[tableName].push(data);
return data.id
};- 模型定义：
class Model {
constructor(data = {}) {
Object.assign(this, data);
}
static table() {
throw new Error('请在子类中实现 table() 方法，返回表名');
}
static primaryKey() {
return 'id';
}
static async find(id) {
const tableName = this.table();
const primaryKey = this.primaryKey();
const results = queryDatabase(tableName, { [primaryKey]: id });
if (results.length === 0) {
return null;
}
return new this(results[0]);
}
static async where(condition) {
const tableName = this.table();
const results = queryDatabase(tableName, condition);
return results.map(data => new this(data));
}
async save() {
const tableName = this.constructor.table();
const primaryKey = this.constructor.primaryKey();
// 模拟自增ID
this[primaryKey] = insertDatabase(tableName, this);
return this;
}
}- User 模型：
class User extends Model {
static table() {
return 'users';
}
}- Post 模型：
class Post extends Model {
static table() {
return 'posts';
}
}- 定义关系映射
const relations = {
User: {
posts: {
model: 'Post',
type: 'hasMany',
foreignKey: 'userId'
}
}
};- Proxy Handler：
const modelProxyHandler = {
get: function(target, property, receiver) {
// 1. 优先查找模型自身的属性
if (Reflect.has(target, property)) {
return Reflect.get(target, property, receiver);
}
// 2. 处理关联关系
const modelName = target.constructor.name;
if (relations[modelName] && relations[modelName][property]) {
const relation = relations[modelName][property];
const relatedModelName = relation.model;
const RelatedModel = global[relatedModelName]; // 假设模型类已定义在全局作用域
if (relation.type === 'hasMany') {
const foreignKey = relation.foreignKey;
const primaryKey = target.constructor.primaryKey();
const targetId = target[primaryKey];
return RelatedModel.where({ [foreignKey]: targetId }); // 返回 Promise
}
// 其他关系类型可以继续扩展，如 belongsTo, hasOne 等
}
// 3. 属性不存在，返回 undefined
return undefined;
},
set: function(target, property, value, receiver) {
console.log(`设置属性 ${property} 的值为 ${value}`);
return Reflect.set(target, property, value, receiver);
},
};- 应用 Proxy:
const createModelProxy = (model) => {
return new Proxy(model, modelProxyHandler);
};
// 重写构造函数，应用 Proxy
const proxify = (ModelClass) => {
return new Proxy(ModelClass, {
construct(target, args) {
const instance = Reflect.construct(target, args);
return createModelProxy(instance);
}
});
};
User = proxify(User);
Post = proxify(Post);使用示例：
(async () => {
// 查询用户
const user = await User.find(1);
console.log('查询到的用户:', user); // 输出: 查询到的用户: User { id: 1, name: '张三', age: 25 }
// 创建新用户
const newUser = new User({ name: '王五', age: 35 });
await newUser.save();
console.log('保存后的用户:', newUser); // 输出: 保存后的用户: User { name: '王五', age: 35, id: 3 }
// 查询所有年龄大于 28 岁的用户
const users = await User.where({ age: { $gt: 28 } });
console.log('年龄大于 28 岁的用户:', users); // 输出: 年龄大于 28 岁的用户: [ User { id: 2, name: '李四', age: 30 }, User { name: '王五', age: 35, id: 3 } ]
// 访问关联数据
const userWithPosts = await User.find(1);
const posts = await userWithPosts.posts;
console.log("用户的帖子:", await posts); // 输出：用户的帖子: [ Post { id: 1, userId: 1, title: 'Hello World' } ]
})();代码解释：
fakeDatabase和queryDatabase: 模拟一个简单的数据库和查询函数，实际项目中需要替换为真正的数据库连接和查询语句。Model类： 定义了模型类的基本行为，如find（根据 ID 查询）、where（根据条件查询）和save（保存）。User类： 继承自Model，并指定了对应的数据表名为 "users"。modelProxyHandler:Proxy的 handler 对象，拦截属性访问。get陷阱：当访问模型对象的属性时，会先检查模型自身是否拥有该属性。如果没有，则会尝试从数据库中加载数据。set陷阱：当设置模型对象的属性时，会输出一条日志。
createModelProxy: 创建Proxy实例proxify: 重写构造函数，使得每次new Model时，都会返回一个Proxy对象- 关系映射: 通过
relations对象定义模型之间的关系。在get陷阱中，如果访问的属性是一个关系，则会根据关系类型执行相应的查询。
总结：
我们利用 Reflect 和 Proxy 成功实现了一个简单的 ORM 框架。 这个框架可以自动将模型类的属性映射到数据表的字段，并提供了基本的查询和保存功能。
Reflect 的作用：
在这个 ORM 框架中， Reflect 主要用于以下方面：
- 属性访问：
Reflect.get(target, property, receiver)用于安全地获取目标对象的属性值，并正确处理 getter 函数。 - 属性设置：
Reflect.set(target, property, value, receiver)用于安全地设置目标对象的属性值，并正确处理 setter 函数。 - 对象操作： 通过
Reflect提供的方法，可以更规范和统一地操作对象，避免使用一些不常用的语法。
Proxy 的作用：
- 拦截属性访问：
Proxy拦截了对模型对象的属性访问，使得我们可以在属性访问时执行额外的逻辑，比如从数据库加载数据。 - 实现延迟加载： 只有在真正访问属性时，才会从数据库加载数据，这可以提高性能。
- 提供更灵活的 API： 我们可以通过
Proxy来提供更灵活的 API，比如支持链式调用、条件查询等。
扩展方向：
这个 ORM 框架还很简陋，可以从以下几个方面进行扩展：
- 更完善的查询构建： 支持更复杂的查询条件，如
AND、OR、LIKE等。 - 事务支持： 支持事务操作，保证数据的完整性。
- 更丰富的关系映射： 支持更多类型的关系映射，如
belongsTo、hasOne、ManyToMany等。 - 数据库适配器： 支持不同的数据库，如 MySQL、 PostgreSQL、 MongoDB 等。
- 数据验证： 在保存数据之前，对数据进行验证，确保数据的有效性。
- 缓存机制： 增加缓存机制，减少数据库查询次数，提高性能。
希望今天的分享能帮助大家更好地理解 Reflect 和 Proxy，并能启发大家在实际项目中灵活运用它们。 谢谢大家！