Devtools console: Function was resolved from bound function

Question

Browsers have a window.stop() function which I have overwritten for my own purposes:

window.stop = (s,t,o,p=window) => { ... };

I'm trying to troubleshoot why calling my stop() function does not work in some contexts, such as inside a function called from an anonymous function that is itself called via setTimeout(). In one part of my project where the code malfunctions I have inserted the following:

console.log('calling console.log(stop) on the next line');
console.log(stop);

Then, I opened the browser console and typed console.log(stop) which yielded the expected output.

This is all exhibited in the following screenshot:

Note the little blue 'i' icon, which I hovered the mouse over.

What does 'Function was resolved from bound function' mean? I could not find any information anywhere about this message. How can I prevent that, such that my stop() function is called instead of the native one?

Answer 1

Potential Issues with Overriding window.stop():

• Asynchronous Contexts: Functions called within setTimeout() or other asynchronous operations may explicitly reference the original window.stop() if they were bound to it before your override.

• Third-Party Libraries: External scripts or libraries might bind window.stop() to their own contexts, leading to conflicts.

• Browser Implementations: Some browsers might implement window.stop() in a way that doesn't allow it to be fully overridden, or they might restore the original function under certain conditions.

You would have to ensure your override preceedes any other code to avoid things like this:

// some code somewhere defines this (before)
setTimeout((originalStop) => {
    console.log("timed window.stop()");
    originalStop();
}, 1000, window.stop.bind(window));

// your own override (later)
window.stop = () => console.log("my overidden stop");