Pourquoi certains appels de fonction sont-ils appelés «invocations illégales» en JavaScript?

Par exemple, si je fais ceci:

var q = document.querySelectorAll;

q('body');

J'obtiens une erreur "Invocation illégale" dans Chrome. Je ne vois aucune raison pour laquelle cela est nécessaire. D'une part, ce n'est pas le cas avec toutes les fonctions de code natif. En fait, je peux faire ceci:

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

var x = new o();

Et tout fonctionne très bien. En particulier, j'ai découvert ce problème en traitant le document et la console. Des pensées?

C'est parce que vous avez perdu le «contexte» de la fonction.

Quand vous appelez:

document.querySelectorAll()

le contexte de la fonction est document, et sera accessible comme thispar la mise en œuvre de cette méthode.

Lorsque vous appelez simplement, qil n'y a plus de contexte - c'est l' windowobjet "global" à la place.

L'implémentation de querySelectorAllessaie d'utiliser thismais ce n'est plus un élément DOM, c'est un Windowobjet. L'implémentation essaie d'appeler une méthode d'un élément DOM qui n'existe pas sur un Windowobjet et l'interpréteur appelle sans surprise faute.

Pour résoudre ce problème, utilisez .binddans les versions plus récentes de Javascript:

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

qui garantira que toutes les invocations ultérieures de qont le bon contexte. Si vous ne l'avez pas .bind, utilisez ceci:

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

Dans mon cas, une invocation illégale s'est produite en raison du passage d'une variable non déclarée à une fonction en tant qu'argument. Assurez-vous de déclarer la variable avant de passer à la fonction.

vous pouvez utiliser comme ceci:

let qsa = document.querySelectorAll;
qsa.apply(document,['body']);

Encore une solution concise:

const q=s=>document.querySelectorAll(s);
q('body');