Why are certain function calls termed "illegal invocations" in JavaScript?

javascript invocation
user1152187 picture user1152187 · May 24, 2012 · Viewed 52.6k times · Source

For example, if I do this:

var q = document.querySelectorAll;

q('body');

I get an "Illegal invocation" error in Chrome. I can't think of any reason why this is necessary. For one, it's not the case with all native code functions. In fact I can do this:

var o = Object; // which is a native code function

var x = new o();

And everything works just fine. In particular I've discovered this problem when dealing with document and console. Any thoughts?

Answer

Alnitak picture Alnitak · May 24, 2012

It's because you've lost the "context" of the function.

When you call:

document.querySelectorAll()

the context of the function is document, and will be accessible as this by the implementation of that method.

When you just call q there's no longer a context - it's the "global" window object instead.

The implementation of querySelectorAll tries to use this but it's no longer a DOM element, it's a Window object. The implementation tries to call some method of a DOM element that doesn't exist on a Window object and the interpreter unsurprisingly calls foul.

To resolve this, use .bind in newer versions of Javascript:

var q = document.querySelectorAll.bind(document);

which will ensure that all subsequent invocations of q have the right context. If you haven't got .bind, use this:

function q() {
    return document.querySelectorAll.apply(document, arguments);
}

Related questions

The invocation context (this) of the forEach function call

I was wondering what the 'this' value (or invocation context) is of the forEach callback function. This code doesn't seem to work: var jow = [5, 10, 45, 67]; jow.forEach(function(v, i, a){ this[i] = v + 1; }); alert(jow); Thx for explaining it to …

Read More
Uncaught TypeError: Illegal invocation in javascript

I'm creating a lambda function that executes a second function with a concrete params.This code works in Firefox but not in Chrome, its inspector shows a weird error, Uncaught TypeError: Illegal invocation. What's wrong of my code? var make = …

Read More
How can I remove a specific item from an array?

I have an array of numbers and I'm using the .push() method to add elements to it. Is there a simple way to remove a specific element from an array? I'm looking for the equivalent of something like: array.remove(…

Read More