Comment puis-je passer des arguments à une fonction anonyme en JavaScript?

Question

J'essaie de comprendre comment passer des arguments à une fonction anonyme en JavaScript.

Consultez cet exemple de code, et je pense que vous verrez ce que je veux dire:

<input type="button" value="Click me" id="myButton" />

<script type="text/javascript">
    var myButton = document.getElementById("myButton");
    var myMessage = "it's working";
    myButton.onclick = function(myMessage) { alert(myMessage); };
</script>

En cliquant sur le bouton le message: it's working devrait apparaître. Cependant, l' myMessage variable à l'intérieur de la fonction anonyme est null.

jQuery utilise un grand nombre de fonctions anonymes, quelle est la meilleure façon de passer cet argument?

Answer 1

Votre cas particulier peut simplement être corrigés pour travailler:

<script type="text/javascript">
  var myButton = document.getElementById("myButton");
  var myMessage = "it's working";
  myButton.onclick = function() { alert(myMessage); };
</script>

Cet exemple de travail en raison de la fonction anonyme créée et affectée en tant que gestionnaire d'élément auront accès aux variables définies dans le contexte où il a été créé.

Pour l'enregistrement, un gestionnaire (que vous attribuez à travers la mise en onxxx propriété) s'attend à ce seul argument pour prendre qui est l'objet d'événement d'être dépassé par le DOM, et vous ne pouvez pas forcer en passant autre argument là

Answer 2

Ce que vous avez fait ne fonctionne pas parce que vous êtes de la liaison d'un événement à une fonction - en tant que tel, il est l'événement qui définit les paramètres qui sera appelée lorsque l'événement est déclenché (c'est à dire le javascript ne sais pas à propos de votre paramètre dans la fonction que vous avez lié à onclick ne peut donc pas passer quelque chose en elle).

Vous pourriez faire cela, cependant:

<input type="button" value="Click me" id="myButton" />

<script type="text/javascript">

    var myButton = document.getElementById("myButton");

    var myMessage = "it's working";

    var myDelegate = function(message) {
        alert(message);
    }

    myButton.onclick = function() { 
        myDelegate(myMessage);
    };

</script>

Answer 3

Voici une méthode pour l'utilisation de fermetures à aborder la question à laquelle vous vous référez. Il prend également en compte le fait que de mai, pour modifier le message au fil du temps sans affecter la liaison. Et il utilise jQuery pour être succinct.

var msg = (function(message){
  var _message = message;
  return {
    say:function(){alert(_message)},
    change:function(message){_message = message}
  };
})("My Message");
$("#myButton").click(msg.say);

Answer 4

En supprimant le paramètre de la fonction anonyme sera disponible dans le corps.

    myButton.onclick = function() { alert(myMessage); };

Pour plus d'informations, recherche pour " javascript fermetures

Answer 5

Les gestionnaires d'événements s'attendre à un paramètre qui est l'événement qui a été tiré. Vous arrive d'être de renommage que "monannonce' et, par conséquent, vous êtes d'alerte de l'objet d'événement plutôt que de votre message.

Une clôture peut vous permettre de référence de la variable que vous avez défini à l'extérieur de la fonction, cependant si vous utilisez Jquery, vous voudrez peut-être chercher à son cas spécifique de l'API par exemple

http://docs.jquery.com/Events/bind#typedatafn

Cela a une option pour passer dans vos propres données.