Question Que fait le point d'exclamation avant la fonction?


!function () {}();

1020
2017-09-20 21:21


origine


Réponses:


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

function foo() {}

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

Maintenant, quand nous ajoutons le point d'exclamation apparemment anodin: !function foo() {} il le transforme en un 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 plus de priorité que ! et appelle instantanément la fonction.

Donc, ce que fait l'auteur est de sauvegarder une octet par expression de fonction; une manière plus lisible de l'écrire serait la suivante:

(function(){})();

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


1737
2018-04-13 20:02



La fonction:

function () {}

ne renvoie rien (ou indéfini).

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

function () {}()

mais il en résulte un SyntaxError.

En utilisant le ! opérateur avant que la fonction le fasse traiter comme une expression, nous pouvons donc l'appeler:

!function () {}()

Cela retournera également l'opposé 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 de la façon suivante:

(function () {})()

327
2017-09-20 21:28



Il y a un bon point à utiliser ! pour l'invocation de fonction 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 plus tard concaténés. Attention ici sont les fichiers censés être concaténés par des outils qui mettent un nouveau fichier à la nouvelle ligne (ce qui est de toute façon un comportement commun pour la plupart des outils de concat). Dans ce cas, en utilisant ! aidera à éviter l'erreur si le module précédé d'un point-virgule a manqué le point-virgule, et cela donnera la flexibilité de les mettre dans n'importe quel ordre sans souci.

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

Va travailler comme

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

mais enregistre deux caractères et l'apparence arbitraire mieux.

Et à propos de tout +,-,~,void les opérateurs ont le même effet, en termes de fonction d'invocation, à coup sûr si vous avez utilisé 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 une séparation de code de module et en utilisant l'outil concat pour l'optimisation (ce qui rend une ligne un travail d'un fichier), que la construction

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

Fera l'exécution sûre de code, même comme un premier échantillon de code.

Celui-ci va lancer 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'utilisent pas dans le premier module. Donc, ils ne sont 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*/}()

46
2017-10-01 18:10



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 forcer une valeur à boolean:

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

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

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

Modifier: 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 qui manque le identifiant (ou nom de la fonction):

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

26
2017-09-20 21:25



Et voici quelque chose de plus que j'ai compris de la console. Comme mentionné précédemment, le point d'exclamation rend la fonction retourne un booléen.

Pour le dernier de la syntaxe:

( function my_function() {} )()

Nous pouvons faire quelque chose comme:

(function add_them(a,b) { return a+b;} )(9,4)

Comme une définition de fonction et un appel simultanés.

Modifier:
Maintenant, vous demandez quelle est l'utilisation de '!' définition de la fonction de type. Considérons ce qui suit:

!function a_would_be_function() { alert("Do some junk but inside a function"); }()

vous voudriez exécuter une fonction comme ci-dessus, mais sans '!' générerait une erreur. J'espère que je suis clair.


5
2018-05-06 14:49



! est une logique NE PAS opérateur, c'est un opérateur booléen qui va inverser quelque chose à son contraire.

Bien que vous puissiez ignorer les parenthèses de la fonction invoquée en utilisant COUP (!) avant la fonction, il inversera toujours le retour, ce qui pourrait ne pas être ce que vous vouliez. Comme dans le cas d'un IEFE, il reviendrait indéfini, qui, lorsqu'il est inversé devient le vrai booléen.

Au lieu de cela, utilisez la parenthèse fermante et le BANG (!) si besoin.

// 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

D'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

3
2017-07-31 16:36



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

Son autre façon d'écrire -

(function( args ) {})()

pareil que

!function ( args ) {}();

2
2018-03-06 09:56



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

considérer la fonction anonyme ci-dessous

function (){}

Pour rendre la fonction auto-invoquée ci-dessus, nous allons généralement changer le code ci-dessus

(function (){}())

Maintenant, nous avons ajouté deux caractères supplémentaires (,) en dehors de l'ajout () à la fin de la fonction 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. Donc, nous pouvons également écrire la fonction ci-dessus

!function (){}()

Les deux sont des fonctions auto-invocatrices et nous sauvegardons également un octet. Au lieu de 2 caractères (,) nous avons juste utilisé un personnage !


2
2017-09-05 10:05



! annulera (vis-à-vis) tout ce que vous attendez, c'est-à-dire si vous avez

var boy = true;
undefined
boy
true
!boy
false

quand vous appelez boy, votre résultat sera true, mais au moment où vous ajoutez le ! en appelant boy, c'est à dire !boy, votre résultat sera false. En d'autres termes, vous voulez dire NotBoy, mais cette fois c'est fondamentalement un résultat booléen, soit true ou false.

C'est la même chose qui arrive à la !function () {}(); expression, en cours d'exécution seulement function () {}(); vous signaler une erreur, mais ajouter ! juste en face de votre function () {}(); l'expression, fait le contraire de la function () {}(); qui devrait vous renvoyer true. Exemple peut être vu ci-dessous:

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

1
2018-01-13 15:55



Sauvons quelques autres octets!

(() => {})()

Exemple:

(() => {return "yeah"})()

0
2018-06-23 06:24