Que fait le point d'exclamation avant la fonction?

!function () {}();

Syntaxe JavaScript 101. Voici une déclaration de fonction :

function foo() {}

Notez qu'il n'y a pas de point-virgule: c'est juste une déclaration de fonction . Vous auriez besoin d'une invocation foo()pour exécuter la fonction.

Maintenant, lorsque nous ajoutons le point d'exclamation apparemment inoffensif: !function foo() {}il le transforme en une expression . C'est maintenant une expression de fonction .

Le !seul n'invoque pas la fonction, bien sûr, mais nous pouvons maintenant mettre ()à la fin: !function foo() {}()qui a une priorité plus élevée que !et appelle instantanément la fonction.

Donc, ce que l'auteur fait, c'est enregistrer un octet par expression de fonction; une façon d'écrire plus lisible serait la suivante:

(function(){})();

Enfin, !rend l'expression return true. C'est parce que par défaut tous les retours IIFE undefined, ce qui nous laisse ce !undefinedqui est true. Pas particulièrement utile.

La fonction:

function () {}

ne renvoie rien (ou non défini).

Parfois, nous voulons appeler une fonction dès que nous la créons. Vous pourriez être tenté d'essayer ceci:

function () {}()

mais il en résulte un SyntaxError.

L'utilisation de l' !opérateur avant la fonction la traite comme une expression, nous pouvons donc l'appeler:

!function () {}()

Cela renverra également l'opposé booléen de la valeur de retour de la fonction, dans ce cas true, car !undefinedis true. Si vous souhaitez que la valeur de retour réelle soit le résultat de l'appel, essayez de le faire de cette façon:

(function () {})()

Il y a un bon point à utiliser !pour l'invocation de fonctions marqué sur le guide JavaScript airbnb

Idée générale pour utiliser cette technique sur des fichiers séparés (aka modules) qui seront ensuite concaténés. La mise en garde ici est que les fichiers sont censés être concaténés par des outils qui placent le nouveau fichier à la nouvelle ligne (ce qui est de toute façon un comportement courant pour la plupart des outils de concaténation). Dans ce cas, l'utilisation !aidera à éviter les erreurs dans le cas où le module précédemment concaténé manquerait un point-virgule de fin, et pourtant cela donnera la flexibilité de les mettre dans n'importe quel ordre sans souci.

!function abc(){}();
!function bca(){}();

Fonctionnera de la même manière que

!function abc(){}();
(function bca(){})();

mais enregistre un caractère et arbitraire semble mieux.

Et par la manière que ce soit +, -, ~, les voidopérateurs ont le même effet, en termes d'invoquer la fonction, bien sûr si vous devez utiliser quelque chose pour revenir de cette fonction , ils agiraient différemment.

abcval = !function abc(){return true;}() // abcval equals false
bcaval = +function bca(){return true;}() // bcaval equals 1
zyxval = -function zyx(){return true;}() // zyxval equals -1
xyzval = ~function xyz(){return true;}() // your guess?

mais si vous utilisez des modèles IIFE pour la séparation de code d'un module et d'un fichier et utilisez l'outil de concaturation pour l'optimisation (ce qui fait une tâche sur un seul fichier), alors la construction

!function abc(/*no returns*/) {}()
+function bca() {/*no returns*/}()

Réalisera l'exécution de code en toute sécurité, comme un tout premier exemple de code.

Celui-ci générera une erreur car JavaScript ASI ne pourra pas faire son travail.

!function abc(/*no returns*/) {}()
(function bca() {/*no returns*/})()

Une remarque concernant les opérateurs unaires, ils feraient un travail similaire, mais seulement au cas où, ils ne l'auraient pas utilisé dans le premier module. Ils ne sont donc pas si sûrs si vous n'avez pas un contrôle total sur l'ordre de concaténation.

Cela marche:

!function abc(/*no returns*/) {}()
^function bca() {/*no returns*/}()

Ce n'est pas:

^function abc(/*no returns*/) {}()
!function bca() {/*no returns*/}()

Il retourne si l'instruction peut évaluer false. par exemple:

!false      // true
!true       // false
!isValid()  // is not valid

Vous pouvez l'utiliser deux fois pour contraindre une valeur à booléenne:

!!1    // true
!!0    // false

Donc, pour répondre plus directement à votre question:

var myVar = !function(){ return false; }();  // myVar contains true

Edit: Cela a pour effet secondaire de changer la déclaration de fonction en une expression de fonction. Par exemple, le code suivant n'est pas valide car il est interprété comme une déclaration de fonction à laquelle il manque l' identifiant (ou nom de fonction ) requis :

function () { return false; }();  // syntax error

C'est juste pour enregistrer un octet de données lorsque nous effectuons une minification javascript.

considérer la fonction anonyme ci-dessous

function (){}

Pour faire de ce qui précède une fonction auto-invoquante, nous changerons généralement le code ci-dessus comme

(function (){}())

Maintenant, nous avons ajouté deux caractères supplémentaires en (,)plus d'ajouter ()à la fin de la fonction ce qui était nécessaire pour appeler la fonction. Dans le processus de minification, nous nous concentrons généralement sur la réduction de la taille du fichier. Nous pouvons donc également écrire la fonction ci-dessus comme

!function (){}()

Les deux sont toujours des fonctions auto-appelantes et nous économisons également un octet. Au lieu de 2 caractères, (,)nous avons utilisé un seul caractère!

! est un opérateur NOT logique , c'est un opérateur booléen qui inversera quelque chose à son opposé.

Bien que vous puissiez contourner les parenthèses de la fonction invoquée en utilisant le BANG (!) Avant la fonction, il inversera toujours le retour, ce qui n'est peut-être pas ce que vous vouliez. Comme dans le cas d'un IEFE, il retournerait indéfini , qui, lorsqu'il est inversé, devient le booléen true.

Utilisez plutôt la parenthèse fermante et le BANG ( ! ) Si nécessaire.

// I'm going to leave the closing () in all examples as invoking the function with just ! and () takes away from what's happening.

(function(){ return false; }());
=> false

!(function(){ return false; }());
=> true

!!(function(){ return false; }());
=> false

!!!(function(){ return false; }());
=> true

Autres opérateurs qui fonctionnent ...

+(function(){ return false; }());
=> 0

-(function(){ return false; }());
=> -0

~(function(){ return false; }());
=> -1

Opérateurs combinés ...

+!(function(){ return false; }());
=> 1

-!(function(){ return false; }());
=> -1

!+(function(){ return false; }());
=> true

!-(function(){ return false; }());
=> true

~!(function(){ return false; }());
=> -2

~!!(function(){ return false; }());
=> -1

+~(function(){ return false; }());
+> -1

Le point d'exclamation fait que toute fonction retourne toujours un booléen.
La valeur finale est la négation de la valeur retournée par la fonction.

!function bool() { return false; }() // true
!function bool() { return true; }() // false

Omettre !dans les exemples ci-dessus serait une SyntaxError .

function bool() { return true; }() // SyntaxError

Cependant, une meilleure façon d'y parvenir serait:

(function bool() { return true; })() // true

C'est une autre façon d'écrire IIFE (expression de fonction immédiatement invoquée).

Son autre façon d'écrire -

(function( args ) {})()

pareil que

!function ( args ) {}();

! annulera (en face) tout ce que vous attendez en conséquence, c'est-à-dire si vous avez

var boy = true;
undefined
boy
true
!boy
false

lorsque vous appelez boy, votre résultat sera true, mais au moment où vous ajoutez le !lors de l'appel boy, c'est !boy-à- dire , votre résultat sera false. En d'autres termes, vous voulez dire NotBoy , mais cette fois, c'est essentiellement un résultat booléen, soit trueou false.

C'est la même chose qui arrive à l' !function () {}();expression, exécuter uniquement function () {}();vous signalera une erreur, mais ajouter !juste en face de votre function () {}();expression, en fait l'opposé de ce function () {}();qui devrait vous renvoyer true. Un exemple peut être vu ci-dessous:

function () {}();
SyntaxError: function statement requires a name
!function () {}();
true