javascript - 如何动态改变一个函数

Question

我有一个已经分配的功能，我想附加一些额外的脚本。当我显示如下功能时:

var func = obj.when_clicked;
alert(func);

显示如下:

function object_123(){
    object_123_Action();
}

类型是一个“函数”，函数在我无法更改的其他地方执行，代码是:

this.when_clicked();

我需要通过附加我自己的代码来修改函数，使其变为:

function object_123(){
   object_123_Action();
   my_clicked(obj);
}

然后将其添加回去并覆盖 when_clicked 函数。

如果我手动添加如下代码，它确实有效:

obj.when_clicked = function object_123(){object_123_Action();my_clicked(obj);};

但是，我最初不知道函数中有什么，我只想附加:

my_clicked(obj);

我确实需要 obj 成为感兴趣的实际对象，即 obj。

Answer 1

你可以包装它:

var f = this.when_clicked;
this.when_clicked = function() {
    // Call the original
    var rv = f.apply(this, arguments);

    // your code here

    // Return the original function's return value
    return rv;
};

Function#apply 使用指定的 this 标志调用原始函数。 arguments 由 JavaScript 引擎提供:它是调用函数时使用的参数的伪数组，因此上面只是传递所有参数。

请务必考虑如果您的函数抛出异常意味着什么，如果您想抑制它们，请捕获它们。

如果你经常这样做，你可以给自己一个效用函数:

function wrapFunction(f, wrapper) {
    return function() {
        var rv = f.apply(this, arguments);
        wrapper.apply(this, arguments);
        return rv;
    };
}

然后

this.when_clicked = wrapFunction(this.when_clicked, function() {
    // Your code here
});

或者如果您想访问原始的返回值，可能会更改它:

function wrapFunction(f, wrapper) {
    return function() {
        var rv = f.apply(this, arguments);
        rv = wrapper.call(this, rv, arguments);
        return rv;
    };
}

然后

this.when_clicked = wrapFunction(this.when_clicked, function(rv, args) {
    // Your code here, using `rv` and `args`, which is a pseudo-array

    // Potentially update `rv`

    return rv;
});