Why are certain function calls termed “illegal invocations” in JavaScript?

by

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);
}

More Related Contents:

  1. Uncaught TypeError: Illegal invocation in JavaScript
  2. The invocation context (this) of the forEach function call
  3. I want to change texts which have same color without use any class/id etc. via JS [closed]
  4. What does ‘:’ (colon) do in JavaScript?
  5. JavaScript: Class.method vs. Class.prototype.method
  6. What do {curly braces} around javascript variable name mean [duplicate]
  7. Getting “TypeError: Failed to fetch” when the request hasn’t actually failed
  8. How to add/subtract dates with JavaScript?
  9. Restricting character length in a regular expression
  10. HTML5 Audio Looping
  11. Call JavaScript function from native code in WKWebView
  12. Why is the variable `closed` being logged as `false`, if I define it globally as `0`?
  13. Angular js – route-ui add default parmeter
  14. JSON object undefined in Internet Explorer 8
  15. How to set a file name using window.open
  16. Generate random password string with requirements in javascript
  17. How can I detect Internet Explorer (IE) and Microsoft Edge using JavaScript?
  18. How to store objects in HTML5 localStorage/sessionStorage
  19. How can I access the value of a promise?
  20. Get the filename of a fileupload in a document through JavaScript
  21. JavaScript – string regex backreferences
  22. Rock, Paper, Scissors, Lizard, Spock in JavaScript
  23. What does the Array method `reduce` do?
  24. JavaScript replace \n with [duplicate]
  25. Jquery Ajax beforeSend and success,error & complete
  26. Javascript: setAttribute() v.s. element.attribute = value to set “name” attribute
  27. Does the attr() in jQuery force lowercase?
  28. Memoization of promise-based function
  29. Is it possible to wait until all javascript files are loaded before executing javascript code?
  30. How to decode a JSFuck script?

Leave a Comment