如何用高阶函数实现自定义函数初始化器（装饰器模式）-js教程-PHP中文网

JavaScript 不支持语法层面的自定义函数初始化器（如 customFunction fn() {…}），但可通过高阶函数轻松模拟该行为：将目标函数作为参数传入装饰器，返回一个自动包裹前置/后置逻辑的新函数。

javascript 不支持语法层面的自定义函数初始化器（如 `customfunction fn() {…}`），但可通过高阶函数轻松模拟该行为：将目标函数作为参数传入装饰器，返回一个自动包裹前置/后置逻辑的新函数。

在 JavaScript 中，虽然无法像某些语言（如 Python 的 @decorator 语法或 C++ 的构造函数）那样定义原生的“自定义函数初始化器”语法（例如 customFunction newFunction() { ... }），但我们可以借助高阶函数（Higher-Order Function） 实现完全等效的功能——即为任意函数自动注入统一的前置（before）、执行主体、后置（after）逻辑。这种模式本质上就是函数式编程中经典的装饰器（Decorator）模式。

下面是一个简洁、健壮的 customFunction 装饰器实现：

function customFunction(fn) {
  return function(...args) {
    // ✅ 前置逻辑：每次调用前执行
    console.log("Starting customFunction");

    // ✅ 执行原始函数，正确绑定 this 并透传所有参数
    const result = fn.apply(this, args);

    // ✅ 后置逻辑：每次调用后执行
    console.log("Ending customFunction");

    return result;
  };
}

使用示例如下：

Reachout.ai

一款面向销售团队的 AI 视频触达与营销工具，通过个性化视频内容辅助企业开展客户开发和销售沟通，提高潜在客户触达效率。

下载

// 创建被装饰的函数
const newFunction = customFunction(function() {
  console.log("running newFunction()");
});

newFunction();
// 输出：
// Starting customFunction
// running newFunction()
// Ending customFunction

console.log("---------");

// 支持对象方法 + this 绑定
const obj = {
  a: 40,
  giveMeTheAnswer: customFunction(function(b) {
    return `the answer is: ${this.a + b}`;
  })
};

console.log(obj.giveMeTheAnswer(2)); 
// 输出：
// Starting customFunction
// Ending customFunction
// "the answer is: 42"

✅ 关键设计要点说明：