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 fonction déclaration. Vous aurez besoin d'un appel, foo(), pour exécuter la fonction.
Maintenant, lorsque nous ajoutons le point d'exclamation apparemment inoffensif: !function foo() {}, il le transforme en expression. C'est maintenant un 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 immédiatement le une fonction.
Donc, ce que fait l'auteur, c'est sauvegarder un octet par expression de fonction; une manière plus lisible d’écrire serait la suivante:
(function(){})();
Enfin, ! rend l'expression vraie. En effet, par défaut, tous les IIFE renvoient undefined, ce qui nous laisse avec !undefined qui est true. Pas particulièrement utile.
La fonction:
function () {}
ne renvoie rien (ou indéfini).
Parfois, nous voulons appeler une fonction comme nous la créons. Vous pourriez être tenté d'essayer ceci:
function () {}()
mais il en résulte une SyntaxError.
Utiliser l'opérateur ! avant que la fonction ne la traite comme une expression, nous pouvons donc l'appeler:
!function () {}()
Cela renverra également le contraire booléen de la valeur de retour de la fonction, dans ce cas true, car !undefined est true. Si vous voulez que la valeur de retour réelle soit le résultat de l'appel, essayez de le faire comme suit:
(function () {})()
Il est bon d’utiliser ! pour l’invocation de fonctions marquée sur guide JavaScript airbnb
Généralement idée d’utiliser cette technique sur des fichiers séparés (alias modules) qui seront ensuite concaténés. La mise en garde ici est que les fichiers sont supposé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 commun à la plupart des outils de concat). Dans ce cas, utiliser ! contribuera à éviter les erreurs si le module concaténé manquait un point-virgule final, ce qui vous offrira toutefois la possibilité de les placer dans n'importe quel ordre sans souci.
!function abc(){}();
!function bca(){}();
Travaillera le même que
!function abc(){}();
(function bca(){})();
mais enregistre un caractère et arbitraire semble mieux.
Et en passant, les opérateurs +, -, ~, void ont le même effet, en termes d’appel de 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 un fichier, séparez le code d'un module et utilisez l'outil concat pour l'optimisation (qui crée un travail de fichier d'une ligne), puis construction
!function abc(/*no returns*/) {}()
+function bca() {/*no returns*/}()
Exécuteront du code en toute sécurité, comme un tout premier exemple de code.
Celui-ci jettera une erreur car JavaScript ASI ne pourra pas faire son travail.
!function abc(/*no returns*/) {}()
(function bca() {/*no returns*/})()
Une note concernant les opérateurs unaires, ils feraient un travail similaire, mais seulement dans le cas où ils ne l'utilisaient pas dans le premier module. Ils ne sont donc pas si sûrs si vous ne contrôlez pas totalement 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 être évaluée à false. par exemple:
!false // true
!true // false
!isValid() // is not valid
Vous pouvez l'utiliser deux fois pour contraindre une valeur à être 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 expression de fonction. Par exemple. le code suivant n'est pas valide car il est interprété comme une déclaration de fonction qui ne contient pas l'identifiant requis (ou nom ):
function () { return false; }(); // syntax error
Le point d'exclamation fait que toute fonction retourne toujours un booléen. La valeur finale est la négation de la valeur renvoyée par la fonction.
!function bool() { return false; }() // true
!function bool() { return true; }() // false
Omettre ! dans les exemples ci-dessus constituerait une SyntaxError.
function bool() { return true; }() // SyntaxError
Cependant, un meilleur moyen d'y parvenir serait:
(function bool() { return true; })() // true
! est un opérateur logique NOT, il s'agit d'un opérateur booléen qui inversera quelque chose en son contraire.
Bien que vous puissiez contourner les parenthèses de la fonction invoquée en utilisant BANG (!) Avant la fonction, le retour sera toujours inversé, ce qui pourrait ne pas être ce que vous vouliez. Comme dans le cas d'une IEFE, elle renverrait undefined , qui, lorsqu'elle est inversée, devient le booléen vrai.
Au lieu de cela, utilisez 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 travaillent ...
+(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
C'est juste pour sauvegarder un octet de données quand on fait la minification javascript.
considérer la fonction anonyme ci-dessous
function (){}
Pour faire de ce qui précède une fonction invoquant automatiquement, nous allons généralement modifier le code ci-dessus de la manière suivante:
(function (){}())
Maintenant, nous avons ajouté deux caractères supplémentaires (,) en plus d'ajouter () à la fin de la fonction, ce qui est nécessaire pour l'appeler. Dans le processus de minification, nous nous concentrons généralement sur la réduction de la taille du fichier. Nous pouvons donc aussi écrire la fonction ci-dessus comme
!function (){}()
Néanmoins, les deux fonctions invoquent automatiquement et nous sauvegardons également un octet. Au lieu de 2 caractères (,) nous avons simplement utilisé un caractère !
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 ) {}();
Économisons quelques autres octets!
(() => {})()
exemple:
(() => {return "yeah"})()
_!_ annulera (ci-contre) tout ce à quoi vous vous attendez, c'est-à-dire si vous avez
_var boy = true;
undefined
boy
true
!boy
false
_lorsque vous appelez boy, votre résultat sera true, mais dès que vous ajouterez le _!_ lors de l'appel de boy, i.e _!boy_, votre résultat sera false. En d'autres termes, vous voulez dire NotBoy, mais cette fois, il s'agit essentiellement d'un résultat booléen, soit true ou false.
C'est la même chose qui se produit avec l'expression !function () {}();. Si vous exécutez uniquement function () {}();, vous marquez une erreur, mais ajoutez _!_ juste devant votre expression function () {}();, en fait le contraire de function () {}(); qui devrait vous renvoyer true. Exemple peut être vu ci-dessous:
_function () {}();
SyntaxError: function statement requires a name
!function () {}();
true
_