funciones - pasar funcion como parametro javascript

¿Cómo puedo pasar argumentos a funciones anónimas en JavaScript?

Question

Estoy intentando descubrir cómo pasar argumentos a una función anónima en JavaScript.

Mira este código de muestra y creo que verás lo que quiero decir:

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

Al hacer clic en el botón it''s working debe aparecer el mensaje: it''s working . Sin embargo, la variable myMessage dentro de la función anónima es nula.

jQuery usa muchas funciones anónimas, ¿cuál es la mejor manera de pasar ese argumento?

Answer 1

Al eliminar el parámetro de la función anónima estará disponible en el cuerpo.

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

Para más información busque ''javascript closures''

Answer 2

Ejemplo:

<input type="button" value="Click me" id="myButton">
<script>
    var myButton = document.getElementById("myButton");
    var test = "zipzambam";
    myButton.onclick = function(eventObject) {
        if (!eventObject) {
            eventObject = window.event;
        }
        if (!eventObject.target) {
            eventObject.target = eventObject.srcElement;
        }
        alert(eventObject.target);
        alert(test);
    };
    (function(myMessage) {
        alert(myMessage);
    })("Hello");
</script>

Answer 3

El siguiente es un método para usar cierres para abordar el problema al que se refiere. También tiene en cuenta el hecho de que puede cambiar el mensaje a lo largo del tiempo sin afectar la vinculación. Y usa jQuery para ser sucinto.

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

Lo que ha hecho se crea una nueva función anónima que toma un único parámetro que luego se asigna a la variable local myMessage dentro de la función. Como en realidad no se pasan argumentos, y los argumentos que no se pasan un valor se vuelven nulos, su función solo alerta (nulo).

Answer 5

Lo que has hecho no funciona porque estás vinculando un evento a una función. Como tal, es el evento el que define los parámetros que se invocarán cuando se genere el evento (es decir, JavaScript no conoce su parámetro en la función a la que se ha obligado a hacer clic, por lo que no puede pasarle nada).

Podrías hacer esto sin embargo:

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

Los controladores de eventos esperan un parámetro que es el evento que se activó. Está cambiando el nombre a ''myMessage'' y, por lo tanto, está alertando al objeto del evento en lugar de a su mensaje.

Un cierre puede permitirle hacer referencia a la variable que ha definido fuera de la función. Sin embargo, si está utilizando Jquery, puede consultar su API específica de evento, por ejemplo:

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

Esto tiene una opción para pasar sus propios datos.

Answer 7

Los delegados:

function displayMessage(message, f)
{
    f(message); // execute function "f" with variable "message"
}

function alerter(message)
{
    alert(message);
}

function writer(message)
{
    document.write(message);
}

Ejecutando la función displayMessage:

function runDelegate()
{
    displayMessage("Hello World!", alerter); // alert message

    displayMessage("Hello World!", writer); // write message to DOM
}

Answer 8

Si lo escribes como

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

Funcionará, pero no sé si eso responde tus preguntas.

Answer 9

Su caso específico simplemente puede ser corregido para que funcione:

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

Este ejemplo funcionará porque la función anónima creada y asignada como un elemento manejador tendrá acceso a las variables definidas en el contexto donde fue creada.

Para el registro, un manejador (que usted asigna mediante la configuración de la propiedad onxxx) espera que un solo argumento tome que el objeto de evento es pasado por el DOM, y usted no puede obligar a pasar otro argumento allí

Answer 10

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

<script type="text/javascript">
    var myButton = document.getElementById("myButton");

    myButton.myMessage = "it''s working";

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


</script>

Esto funciona en mi suite de pruebas que incluye todo desde IE6 +. La función anónima conoce el objeto al que pertenece, por lo tanto, puede pasar datos con el objeto que lo está llamando (en este caso myButton).