覆盖 JavaScript 函数并引用原始函数

169

我有一个函数a(),我想要覆盖它,但也希望根据上下文顺序执行原始的a()。例如,有时候在生成页面时,我想这样覆盖:

function a() {
    new_code();
    original_a();
}

有时候是这样的:

function a() {
    original_a();
    other_new_code();
}

在重载的a()函数中,如何获取original_a()函数?这个是否可能?

请不要建议其他覆盖方式,我知道很多种。我只是特别想了解这种方法。

12个回答

0

我创建了一个小助手,用于类似的场景,因为我经常需要覆盖来自多个库的函数。这个助手接受一个“命名空间”(函数容器)、函数名称和覆盖函数。它将使用新函数替换所引用命名空间中的原始函数。

新函数将原始函数作为第一个参数,并将原始函数的参数作为其余参数。它将保留上下文。它也支持无返回值和有返回值的函数。

function overrideFunction(namespace, baseFuncName, func) {
    var originalFn = namespace[baseFuncName];
    namespace[baseFuncName] = function () {
        return func.apply(this, [originalFn.bind(this)].concat(Array.prototype.slice.call(arguments, 0)));
    };
}

例如在Bootstrap中的使用:

overrideFunction($.fn.popover.Constructor.prototype, 'leave', function(baseFn, obj) {
    // ... do stuff before base call
    baseFn(obj);
    // ... do stuff after base call
});

虽然我没有创建任何性能测试,但这可能会增加一些不必要的开销,具体情况取决于场景。


0

不确定它是否适用于所有情况,但在我们的情况下,我们尝试覆盖 Jest 中的 describe 函数,以便我们可以解析名称并跳过整个 describe 块,如果满足某些条件。

以下是对我们有效的内容:

function describe( name, callback ) {
  if ( name.includes( "skip" ) )
    return this.describe.skip( name, callback );
  else
    return this.describe( name, callback );
}

这里有两个关键点:

  1. 我们不使用箭头函数 () =>

    箭头函数会改变对于 this 的引用,但我们需要它指向文件的 this

  2. 使用 this.describethis.describe.skip 而不是仅使用 describedescribe.skip

再次强调,不确定这对任何人是否有价值,但我们最初尝试过 Matthew Crumley的 优秀答案,但需要将我们的方法转换为函数并接受参数以便在条件语句中解析它们。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接