La fonction JavaScript simple avec invocation immédiate ne fonctionne pas ... pourquoi?

Question

Quelqu'un peut-il expliquer pourquoi cela fonctionne:

var sayHello = function (name) { 
    alert("Hello there " + name + "!"); 
}("Mike"); 

Bien que cela ne fait pas:

function sayHello (name) { 
    alert("Hello there " + name + "!"); 
}("Mike"); 

Mike Peat

Answer 1

Edité parce que ma réponse avait mal lu le message original:

Comme votre fonction n'est plus assignée comme une fonction lambda à une valeur, invoquer la fonction après ("Mike") ne fonctionnera pas s il n'y a pas de valeur pour invoquer l'appel. Comme d'autres ont suggéré enroulant cela avec des parenthèses pour créer une variable temporaire sera toujours vous invoquons la fonction anonyme:

(function sayHello (name) { 
    alert("Hello there " + name + "!"); 
})('Mike'); 

Answer 2

Votre second code est en fait:

function sayHello (name) { 
    alert("Hello there " + name + "!"); 
} 

("Mike"); 

Donc, vous première fonction déclarez « sayHello » , puis vous exécutez la "déclaration":

("Mike"); 

qui ne fait rien.

Answer 3

Cela fonctionne:

(function sayHello (name) { 
     alert("Hello there " + name + "!"); 
    })("Mike"); 

Notez la parens enveloppant la fonction elle-même. Vous pouvez également supprimer le nom de la fonction "sayHello" et cela fonctionnera toujours. En ce qui concerne pourquoi? Je ne suis pas positif. Peut-être qu'en l'assignant à une variable et en n'utilisant pas les wrapping(), vous l'attribuez en fait à sayHello puis en exécutant say hello, pas la fonction anonyme.

Answer 4

Autour de la définition de la fonction dans () avant de l'appeler fonctionne:

(function sayHello(name) { 
    alert("Hello there " + name + "!"); 
})("Mike"); 

// however -- 
alert(typeof sayHello); // undefined 

Donc, si vous voulez faire quelque chose comme ça - vous pourriez tout aussi bien en faire une fonction anonyme:

(function(name) { 
    alert("Hello there " + name + "!"); 
})("Mike"); 

Et je ne suis pas sûr que ce soit nécessaire - mais pour la sécurité - chaque fois que j'utilise une fermeture comme celle-ci, je l'entoure toujours ()

Answer 5

var sayHello = function (name) { 
    alert("Hello there " + name + "!"); 
}("Mike"); 

Ceci crée une fonction anonyme et l'appelle tout de suite avec le paramètre "Mike". Ensuite, la valeur de retour de cet appel de fonction est affectée à la variable sayHello.

function sayHello (name) { 
    alert("Hello there " + name + "!"); 
}("Mike"); 

Cette juste définit une fonction normale avec le nom sayHello et la déclaration de la fonction se termine après la fermeture}. Puis suit l'instruction ("Mike") qui est valide, mais ne fait rien.

Answer 6

Tout ce que vous devez comprendre ici est la différence entre FunctionExpression s et FunctionDeclaration s en Javascript.

Lorsque vous entourez fonction entre parenthèses -

(function sayHello (name) { 
    alert("Hello there " + name + "!"); 
})("Mike"); 

- vous, techniquement, appliquer un opérateur de regroupement lui. Une fois appliquée, la production globale n'est plus une FunctionDeclarataion, mais une FunctionExpression. Comparer -

function foo(){ } // FunctionDeclaration 

(function foo(){ }); // FunctionExpresson 
typeof function(){ }; // FunctionExpression 
new function(){ }; // FunctionExpression 

FunctionExpression (contrairement à FunctionDeclaration), comme tout autre MemberExpresson peut être jointe à Arguments ("(" et ")") et se traduira par l'invocation de la fonction. C'est exactement pourquoi la fonction est appelée dans votre premier exemple et non dans une seconde.

Notez que FunctionExpression s sont autorisés à avoir en option Identifiant s (contrairement à FunctionDeclaration s qui doit toujours avoir un), de sorte que vous pouvez facilement omettre « sayHello » et se retrouver avec soi-disant fonction anonyme expression -

(function(){ 
    alert('...'); 
}); 

Vous pouvez consulter my article on named function expressions, qui plonge dans les détails subtils de différence entre les expressions de fonction et les déclarations de fonctions dans beaucoup plus de détails.