如何在不覆盖原有逻辑的前提下扩展JavaScript函数JsFunction

嘿，这个需求太常见啦！咱们可以用**函数劫持（也就是包装原函数）**的方法来搞定——不用重复框架里的已有代码，还能完美保留原函数名，让调用方完全感知不到变化。下面给你一步步拆解实现：

核心思路 #

先把框架提供的原函数存到一个临时变量里“备份”，然后重新定义同名函数，在新函数里先执行原函数的逻辑，再加上你的自定义代码（或者反过来，根据你需要的执行顺序调整）。

代码示例 #

// 第一步：先把框架的原函数备份到临时变量里，防止被覆盖后丢失
const originalJsFunction = JsFunction;

// 第二步：重新定义同名的JsFunction
JsFunction = function() {
    // 先执行框架原有的逻辑——用apply保证原函数的this上下文和原来一致
    const originalResult = originalJsFunction.apply(this, arguments);
    
    // 再执行你的自定义逻辑，比如这里做个日志上报
    console.log("执行了自定义的额外逻辑");
    // 你还可以根据原函数的返回值做后续处理
    if (originalResult) {
        console.log("原函数返回了结果：", originalResult);
    }
    
    // 如果需要，也可以把原函数的返回值返回出去，保持原函数的行为
    return originalResult;
};

关键细节提醒 #

• 为什么用apply(this, arguments)？直接调用originalJsFunction()会导致原函数的this指向错误，用apply或者call可以把当前函数的this和参数完整传递给原函数，确保原逻辑的执行环境和原来一模一样。
• 如果需要自定义逻辑先执行，只需要调换顺序：先写你的代码，再调用原函数就行。
• 要是原函数是箭头函数，那this的绑定是固定的，这时候直接调用原函数就行，不用特意传this。

这样一来，不管是你自己调用JsFunction()，还是框架内部调用，都会同时执行原逻辑和你的自定义代码，完全满足需求～

内容的提问来源于stack exchange，提问作者Uttam Ughareja