Why does this proxy handler cause infinite recursion?

Question

I built a hook for the toString method using ES6 Proxy. While debugging some issues I noticed the console.log of handler getting called for no reason.

class Hook {
    constructor(object) {
        this.object = object;
    }

    toStringProperty() {
        const handler = {
            apply: (target, thisArg, args) => {

                console.log(target, thisArg, args);

                if (thisArg === Function.prototype.toString) {
                    return 'function toString() { [native code] }'
                }

                if (thisArg === this.object) {
                    return "Hooked String"
                }

                return target.apply(thisArg, args)
            }
        }

        Function.prototype.toString = new Proxy(Function.prototype.toString, handler)
    }
}

let hook = new Hook(HTMLAudioElement);
hook.toStringProperty()
HTMLAudioElement.toString();

I spent a lot of time trying to find what causes this recursion but I'm afraid that I can't find anything.

Note: this behavior also happens after typing HTMLAudioElement or ooo in console and of course you have to do this after running the above code. My browser is Chrome. I tested with Devtools Console.

The snippet in your question does not appear to have an infinite loop. Run it, and execution finishes normally. — CertainPerformance, Jun 14 '21 at 05:17
"*I built a hook for the `toString` method using ES6 Proxy.*" - don't do that. If you have to overwrite `Function.prototype.toString` (and you really shouldn't), overwrite it with a normal function not with an unnecessary proxy! — Bergi, Jun 14 '21 at 05:31
Been running the snippet for 15 minutes and I haven't seen anything logged. I don't think the function will just randomly call its own `toString` — CertainPerformance, Jun 14 '21 at 05:36
@CertainPerformance Did you wait for sometime or maybe it trigger when you paste `HTMLAudioElement` like I did in screenshot? — jeffbRTC, Jun 14 '21 at 05:38
I waited for 15 minutes with the snippet running and didn't see anything — CertainPerformance, Jun 14 '21 at 05:38
@CertainPerformance Did you paste `HTMLAudioElement` on console? — jeffbRTC, Jun 14 '21 at 05:39
@CertainPerformance I noted that it trigger that way, even if you type `ooo` it trigger. — jeffbRTC, Jun 14 '21 at 05:41
@CertainPerformance Looks like it also trigger if you invoke `HTMLAudioElement .toString()` so you don't have to wait.. Instant result.. — jeffbRTC, Jun 14 '21 at 05:51
@jeffbRTC Don't use proxies mainly because of unnecessary complexity. YAGNI! — Bergi, Jun 14 '21 at 06:07

Bergi · Accepted Answer · 2021-06-14T07:24:05.090

3

Inside the handler, you call console.log(target, thisArg, args); where target and thisArg are functions. The devtools console appears to use .toString() to get the name of the function to display it.

edited Jun 14 '21 at 07:24

answered Jun 14 '21 at 06:13

Bergi

630,263
148
957
1,375

1

Also, the target causing that as-well. – jeffbRTC Jun 14 '21 at 06:50

Why does this proxy handler cause infinite recursion?

1 Answers1