当前位置：首页 > JavaScript

js实现before

2026-04-06 07:14:40JavaScript

实现 `before` 方法

在 JavaScript 中，可以通过扩展原型链实现类似 before 的功能，即在目标函数执行前插入自定义逻辑。以下是具体实现方式：

Function.prototype.before = function(beforeFn) {
    const originalFn = this;
    return function() {
        beforeFn.apply(this, arguments);
        return originalFn.apply(this, arguments);
    };
};

使用示例

function log() {
    console.log('原始函数执行');
}

const wrappedLog = log.before(() => {
    console.log('前置逻辑执行');
});

wrappedLog();
// 输出:
// 前置逻辑执行
// 原始函数执行

实现原理

扩展 Function.prototype
通过修改 Function 的原型链，所有函数实例均可调用 before 方法。
闭包保存原函数
使用闭包保存原始函数引用 (originalFn)，确保在包装函数中能正确调用原逻辑。
参数传递
apply 方法确保 arguments 能正确传递给前置函数和原函数，保持上下文 (this) 一致。

注意事项

链式调用
多次调用 before 会按调用顺序反向执行前置逻辑（后添加的先执行）。
异步场景
若前置逻辑包含异步操作，需改用 Promise 或 async/await 实现。
性能影响
频繁扩展原型链可能引发维护问题，建议在明确需求场景下使用。

替代方案（ES6+）

使用高阶函数避免污染原型链：

js实现before

const before = (beforeFn, originalFn) => (...args) => {
    beforeFn(...args);
    return originalFn(...args);
};

const enhancedFn = before(
    () => console.log('前置逻辑'),
    () => console.log('原始逻辑')
);