JS函数元编程技巧有哪些，如何操作函数自身属性与行为实现高级功能

JS函数本质上也是一种对象，除了可以执行调用逻辑之外，也拥有对象的所有特性，这就为我们操作函数自身属性和行为提供了基础，通过元编程的方式可以让我们在不修改函数核心逻辑的前提下，动态扩展函数的能力。

操作函数自有属性实现元数据挂载

函数作为对象，可以直接添加自定义属性，我们可以利用这个特性给函数挂载元数据，比如函数的描述信息、版本号、依赖配置等，这些属性不会影响函数的正常执行逻辑。

下面是一个给函数添加自定义属性记录调用次数的示例：

// 定义一个业务处理函数
function fetchUserData(userId) {
  // 每次调用时更新调用次数属性
  fetchUserData.callCount = (fetchUserData.callCount || 0) + 1;
  console.log(`获取用户${userId}的数据，累计调用${fetchUserData.callCount}次`);
}

// 给函数添加初始属性
fetchUserData.callCount = 0;
fetchUserData.version = '1.0.0';
fetchUserData.description = '获取用户数据的函数';

// 调用函数
fetchUserData(1);
fetchUserData(2);

// 读取函数自有属性
console.log(fetchUserData.version); // 输出 1.0.0
console.log(fetchUserData.description); // 输出 获取用户数据的函数

修改函数行为实现逻辑拦截

我们可以通过重写函数的调用逻辑，实现函数执行前后的拦截处理，比如添加日志、参数校验、性能统计等功能，这种方式不需要修改函数原来的代码逻辑。

下面是一个给函数添加执行前后日志的示例：

// 原始的业务函数
function calculateSum(a, b) {
  return a + b;
}

// 保存原始函数引用
const originalCalculateSum = calculateSum;

// 重写函数，添加拦截逻辑
calculateSum = function(...args) {
  console.log(`函数开始执行，参数：${args.join(',')}`);
  const startTime = Date.now();
  // 调用原始函数
  const result = originalCalculateSum.apply(this, args);
  const endTime = Date.now();
  console.log(`函数执行结束，结果：${result}，耗时：${endTime - startTime}ms`);
  return result;
};

// 调用重写后的函数
calculateSum(1, 2);
calculateSum(3, 4);

操作函数原型扩展通用能力

所有函数都继承自Function.prototype，我们可以给Function.prototype添加自定义方法，让所有函数都具备这个能力，这是一种更通用的函数行为扩展方式。

下面是一个给所有函数添加延迟执行能力的示例：

// 给Function的原型添加delay方法
Function.prototype.delay = function(ms) {
  // 保存当前函数的引用
  const originalFunc = this;
  // 返回一个新的函数，延迟执行原函数
  return function(...args) {
    setTimeout(() => {
      originalFunc.apply(this, args);
    }, ms);
  };
};

// 定义一个普通函数
function printMessage(msg) {
  console.log(msg);
}

// 使用delay方法生成延迟执行的函数
const delayedPrint = printMessage.delay(2000);
delayedPrint('这条消息会在2秒后输出');

// 也可以直接链式调用
printMessage.delay(1000)('这条消息会在1秒后输出');

利用函数属性实现缓存机制

我们可以结合函数的自有属性和闭包特性，实现函数的缓存能力，对于相同参数的调用直接返回缓存结果，避免重复计算，提升性能。

下面是一个带缓存的计算函数示例：

// 定义一个需要缓存结果的函数
function computeExpensiveValue(n) {
  // 如果缓存中已经有结果，直接返回
  if (computeExpensiveValue.cache[n] !== undefined) {
    console.log(`从缓存获取${n}的结果`);
    return computeExpensiveValue.cache[n];
  }
  // 模拟耗时计算
  console.log(`开始计算${n}的结果`);
  let result = 0;
  for (let i = 0; i <= n; i++) {
    result += i;
  }
  // 将结果存入缓存
  computeExpensiveValue.cache[n] = result;
  return result;
}

// 初始化缓存对象
computeExpensiveValue.cache = {};

// 调用函数
console.log(computeExpensiveValue(10)); // 输出 开始计算10的结果 55
console.log(computeExpensiveValue(10)); // 输出 从缓存获取10的结果 55
console.log(computeExpensiveValue(5)); // 输出 开始计算5的结果 15

注意事项

• 修改Function.prototype可能会影响所有函数，包括第三方库的函数，因此添加原型方法时需要确认命名不会冲突，避免造成意外的副作用。
• 重写函数时务必保存原始函数的引用，否则可能导致原始逻辑丢失，无法恢复。
• 函数的自有属性不会出现在函数的参数列表中，也不会影响函数的length属性（表示函数形参个数），可以放心使用。
• 操作函数行为时需要注意this的指向问题，尽量使用apply或call来明确绑定this上下文。

JavaScript元编程函数属性函数行为prototype修改时间：2026-07-23 03:00:29