Having a low level C/assembly programming background, one thing I was wondering is whether it is possible in Javascript to detour a function, meaning, replacing it with a function that I defined and then call the original one, to add additional code or hook that function.
I already found examples, but all of them are not what I would qualify clean, involve creating additional variables, etc

Having a low level C/assembly programming background, one thing I was wondering is whether it is possible in Javascript to detour a function, meaning, replacing it with a function that I defined and then call the original one, to add additional code or hook that function.
I already found examples, but all of them are not what I would qualify clean, involve creating additional variables, etc

• javascript

1 Answer 1

Monkey patching in Javascript is used heavily by many frameworks jusk like zone.js patch async operations (For angular).

Solution 1: Simplest way monkey patching can be used is as follows.

var orig_setTimeout = window.setTimeout;

window.setTimeout = function setTimeout(fn, ms) {
    // your patching code goes here
    return orig_setTimeout(fn, ms);
}

Solution 2: Using IIFE.

Credit @Annihil link

function originalFn(arg){
    return console.log("originalFn is invoked with argument: " + arg);
}

var patchedFn = (function(originalFunction) {

    return function(){
        console.log("patched function is invoked with arguments: " + arguments)
        return originalFunction.apply(this, arguments);
    }
}(originalFn))


patchedFn("Hello");

// Above invocation will results in 
patched function is invoked with arguments: Hello
originalFn is invoked with argument: Hello

Solution 3: You can use apply trap of ES6 Proxies

var patchedFn = {
  apply (target, ctx, args) {
    console.log("patched function is invoked with arguments: " + args)
    return Reflect.apply(...arguments)
  }
}
function originalFn (arg) {
    return console.log("originalFn is invoked with argument: " + arg);
}
var proxyFn = new Proxy(originalFn, patchedFn);

// Now proxy function can be invoked as following

proxyFn("Hello");
proxyFn(...["Hello"]);
proxyFn.call(null, "Hello");
proxyFn.apply(null, ["Hello"]);

// All the above invocation will print the below output

patched function is invoked with arguments: Hello
originalFn is invoked with argument: Hello

Solution 4: You can also look into ES6 decorators. They might also suits your purpose. For a introduction to ES6 decorators you can follow the sitepoint

Case Study: If you wanted to understand how zone.js patched async operations please go through the blog post monkey patching in zone.js