I was looking around online and I saw someone do something similar, Array.prototype.push was proxied and every push was handled, I want to do something like this:
new Proxy(Array.prototype.push, handler);
const array = [];
array.push("e"); // logs "e" to the console somehow from the handler
How can this be achieved?
This will work:
const handler = {
apply(target, thisArg, argumentsList) {
console.log(`called push with argument:', ${argumentsList}`);
return Reflect.apply(target, thisArg, argumentsList)
}
};
Array.prototype.push = new Proxy(Array.prototype.push, handler);
const a = []
a.push(1)More info:
But it can break things so be careful
const old = Array.prototype.push; Array.prototype.push = function (...args) { console.log(...args); old.call(this, ...args);}
You need to proxy the array and call methods from the proxy.
// Based on:
// - https://stackoverflow.com/a/35610685/1762224
// - https://stackoverflow.com/a/47911346/1762224
const
arr = [],
traceMethods = ['push', 'unshift'],
proxiedArr = new Proxy(arr, {
get(target, prop, receiver) {
if (traceMethods.includes(prop)) {
return function(item) {
console.log(`${prop}ing ${item}`);
return target[prop](...arguments);
}
}
return target[prop];
},
});
proxiedArr.push('e'); // logs 'pushing e' to the console
proxiedArr.unshift('f'); // logs 'unshifting f' to the console
console.log(arr); // ["f", "e"].as-console-wrapper { top: 0; max-height: 100% !important; }
apply() and Reflect.Capturing push method on all arrays on a webpage can easily be done by overriding the prototype method.
But, a big warning, doing this could potentially cause side effect. In fact a long time ago in Javascript land they used to be a lib called prototype that actually did this, and got a lot of flack for doing it.
Saying that, there is one area were overriding built-in is recommended, and that's pollyfilling new ES features.
If all your wanting to do is log into the console, maybe for debugging purposes, then your maybe OK.
So with all the warnings out the way, here is an example.
//keep a reference to the old push method
const oldPush = Array.prototype.push;
//now implement our replacement.
Array.prototype.push = function (...args) {
console.log(...args);
return oldPush.call(this, ...args);
}
//lets test.
const a = []
a.push(1)
a.push(1,2,3);
a.push('hello','there');
contains method to arrays by defining a contains itself. The method was then renamed to includes() (and the string one to match) which meant the library literally changed the web. Not necessarily for the better.Of course, you could also do this without the Proxy for a solution that doesn't change how Arrays work for the rest of the code (which can produce the kind of issue that is hard to troubleshoot):
function push (arr, ...args) {
console.log('Pushed called with', ...args)
arr.push(...args)
}
const arr = []
push(arr, 1)
console.log('arr', arr)