你可能每天都在写JavaScript代码，但有没有想过让代码自己管理自己？这就是元编程要做的事。
简单说，普通编程是代码操作数据，元编程是代码操作代码。听起来有点绕，但看完例子就明白了。
什么是元编程？
先看两个对比：
普通编程：代码处理数据
function add(a, b) { return a + b;}const result = add(2, 3);
元编程：代码处理代码
function createLogger(fn) { return function(...args) { console.log(`调用 ${fn.name}，参数:`, args); const result = fn(...args); console.log(`结果:`, result); return result; };}
const loggedAdd = createLogger(add);loggedAdd(2, 3);
看到区别了吗？普通编程直接计算数据，元编程改变了函数的行为，给它加上了日志功能。
反射：让代码认识自己
反射是元编程的基础。它让代码能在运行时查看和修改自己的结构。 就像人有镜子可以看到自己，反射让代码也能“看到”自己。
Object的反射方法
JavaScript提供了一些方法来操作对象：
const person = { name: '张三', age: 25, sayHello() { console.log('你好'); }};
console.log(Object.keys(person));
const ageDesc = Object.getOwnPropertyDescriptor(person, 'age');console.log(ageDesc);
console.log(Object.getPrototypeOf(person));
const student = Object.create(person, { grade: { value: '三年级', writable: true }});
Reflect api：更统一的反射方法
ES6引入了Reflect对象，提供更规范的反射方法：
const book = { title: 'JavaScript编程', price: 99};
console.log(Reflect.get(book, 'title'));
Reflect.set(book, 'price', 88); console.log(book.price);
console.log(Reflect.has(book, 'author'));
Reflect.deleteProperty(book, 'price'); console.log('price' in book);
function greet(name) { return `你好，${name}`;}console.log(Reflect.apply(greet, null, ['李四']));
Reflect方法总是返回布尔值表示操作是否成功，这让错误处理更容易。
代理：给对象加个“管家”
代理是ES6的强大功能。你可以给对象创建一个代理，然后拦截对对象的所有操作。
就像给房子请了个管家，所有访客都要先通过管家。
基本代理示例
const piggyBank = { money: 100, owner: '小明'};
const smartBank = new Proxy(piggyBank, { get(target, property) { console.log(`有人查看了${property}`); if (property === 'money') { console.log('当前余额：' + target[property] + '元'); } return target[property]; },
set(target, property, value) { console.log(`修改${property}，新值：${value}`);
if (property === 'money' && value < 0) { console.log('错误：余额不能为负！'); return false; }
target[property] = value; return true; },
deleteProperty(target, property) { if (property === 'money') { console.log('不能删除余额！'); return false; } delete target[property]; return true; }});
console.log(smartBank.money);
smartBank.money = 150;
smartBank.money = -50;
更多代理拦截器
代理可以拦截很多操作：
const user = { name: '王五', age: 30 };
const userProxy = new Proxy(user, { has(target, property) { console.log(`检查是否存在属性：${property}`); return property in target; },
ownKeys(target) { console.log('获取对象所有键'); return Reflect.ownKeys(target); },
getOwnPropertyDescriptor(target, property) { console.log(`获取属性${property}的描述符`); return Reflect.getOwnPropertyDescriptor(target, property); }});
console.log('name' in userProxy);
Object.keys(userProxy);
Symbol：唯一的属性键
Symbol是ES6引入的新数据类型，每个Symbol值都是唯一的。
基本用法
const id = Symbol('id');const userId = Symbol('userId');
const user = { name: '赵六', age: 28, [id]: 123456, [userId]: 'user_001'};
console.log(user[id]);
console.log(Object.keys(user)); console.log(Object.getOwnPropertyNames(user));
console.log(Object.getOwnPropertySymbols(user));
console.log(Reflect.ownKeys(user));
内置Symbol
JavaScript有一些内置的Symbol，可以改变对象的行为：
const myArray = [1, 2, 3];
myArray[Symbol.iterator] = function() { let index = this.length - 1; const arr = this;
return { next() { if (index >= 0) { return { value: arr[index--], done: false }; } return { done: true }; } };};
for (const num of myArray) { console.log(num); }
实际应用场景
1. 数据验证
function createValidator(target) { return new Proxy(target, { set(obj, prop, value) { const rules = { name: (v) => typeof v === 'string' && v.length > 0, age: (v) => Number.isInteger(v) && v >= 0 && v <= 150, email: (v) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v) };
if (rules[prop]) { if (!rules[prop](value)) { throw new Error(`属性 ${prop} 的值无效: ${value}`); } }
obj[prop] = value; return true; } });}
const user = createValidator({});user.name = '张三'; user.age = 25;
2. 自动日志
function withLogging(obj) { const handler = { get(target, prop) { const value = target[prop];
if (typeof value === 'function') { return function(...args) { console.log(`调用 ${prop}，参数:`, args); const result = value.apply(target, args); console.log(`结果:`, result); return result; }; }
console.log(`读取 ${prop}:`, value); return value; },
set(target, prop, value) { console.log(`设置 ${prop}:`, value); target[prop] = value; return true; } };
return new Proxy(obj, handler);}
const calculator = withLogging({ add(a, b) { return a + b; },
multiply(a, b) { return a * b; },
value: 10});
calculator.add(2, 3);
calculator.value = 20;
3. 属性访问控制
function createPrivateProperties(obj, privateProps) { const privateValues = new Map();
for (const prop of privateProps) { if (prop in obj) { privateValues.set(prop, obj[prop]); delete obj[prop]; } }
return new Proxy(obj, { get(target, prop) { if (privateValues.has(prop)) { console.log(`警告：${prop} 是私有属性`); return undefined; } return target[prop]; },
set(target, prop, value) { if (privateValues.has(prop)) { console.log(`警告：不能直接设置私有属性 ${prop}`); return false; } target[prop] = value; return true; },
has(target, prop) { if (privateValues.has(prop)) { return false; } return prop in target; } });}
const person = { name: '张三', age: 30, salary: 10000, bankAccount: '123456' };
const securePerson = createPrivateProperties(person, ['salary', 'bankAccount']);
console.log(securePerson.name); console.log(securePerson.salary); console.log('salary' in securePerson);
注意事项
使用元编程时要注意：
性能：代理和反射比直接操作对象慢，在性能关键的地方要小心使用。
调试：代理会改变对象行为，调试时可能不太直观。
兼容性：Symbol和Proxy是ES6特性，如果需要支持老浏览器，要检查兼容性。
可读性：过度使用元编程会让代码难以理解。只在确实需要时使用。
学习建议
如果你想学习元编程：
从简单开始：先理解反射的基本概念，再学习代理。
实际练习：写一些小例子，比如给对象加验证、加日志。
查看源码：看看流行的JavaScript库（如vue、MobX）是如何使用元编程的。
理解原理：不要只记语法，要理解为什么需要这些功能。
元编程让JavaScript更强大。它让代码可以自我检查、自我修改、自我扩展。虽然开始可能觉得复杂，但掌握后能写出更灵活、更智能的代码。这在构建框架、库或复杂应用时特别有用。
阅读原文：原文链接
该文章在 2025/12/29 9:40:02 编辑过
400 186 1886
