1

Realicé un ejercicio donde debí mostrar las coordenadas del mouse en pantalla.

La cuestión es que a la hora de llamar a la función que realiza dicho trabajo, no funciona si la llamo como se haría normalmente

body.onmousemove = mostrarPosMouse(event);

Luego encontré esta solución que hace el trabajo esperado

body.onmousemove = function (event) {
    mostrarPosMouse(event);
};

Mi pregunta es: Que tiene la función anónima que hace posible el correcto funcionamiento?

2 respuestas 2

3

Que tiene la función anónima que hace posible el correcto funcionamiento?

Una cosa muy sencilla: una función anónima es, en si misma, una expresión.

Clarificamos un poco:

variable = expresión

Esa sentencia asigna a la variable variable el resultado de evaluar la expresión.

Eso hace posible, por ejemplo, que esto funcione:

var x = ( 5 * 2 + 10 );

El motor de Javascript primero evalúa lo situado a la derecha del operador =, y es el resultado de esa evaluación lo que se asinga a variable.

Ahora, veamos el resultado de evaluar una función:

function algo( ) { }
var variable = algo( );

Fíjemos en los paréntesis ( y ). Eso es la marca distintiva de una llamada a función. Al encontrarse con nombre_de_variable ( , el lenguaje entiende que eso es una expresión, cuyo resultado final es el valor retornado por la llamada a la función nombre_de_variable.

Por lo tanto, en tu ejemplo:

body.onmousemove = mostrarPosMouse(event);
  1. Se evalua event (si no es una variable local, se usa window.event en el navegador).
  2. Se llama a la función mostrarPosMouse( ) con un argumento: el resultado del punto 1.
  3. A body.onmousemove se le asigna el valor retornado en el punto 2.

Si como expresión usas una funcionan anónima, las cosas transcurren de manera similar ... pero no idéntica:

body.onmousemove = function (event) {
  mostrarPosMouse(event);
};
  1. El motor encuentra la palabra clave function, y entiende que eso es una declaración de función.
  2. La declaración de función devuelve una referencia a la función recién creada.
  3. La referencia obtenida en 2 es usada como valor a asignar.

Podríamos decir que

function (event) {
  mostrarPosMouse(event);
};

es, en cierto modo, igual que si hicieramos

{
  return ( function( event ) { mostrarPosMouse( event ); ); }
}

La Mozilla Developer Network, como casi siempre, tiene una excelente documentación sobre las funciones, con un apartado sobre las expresiones de función.

2
  • Genial la informacion que me acabas de dar. Te lo agradezco mucho. Solo me surgio una duda con respecto a cuando se llama a una funcion usando los parentesis, y es la de que al final devuelve un resultado, pero una sola vez (A body.onmousemove se le asigna el valor retornado en el punto 2.)? Lo que impide el movimiento de la figura con el mouse?
    – GonzaloM
    Commented el 9 feb. 2019 a las 1:49
  • 1
    Si mostrarPosMouse( event ); devuelve, por ejemplo, el número 5, es ese número el que se asigna a body.onmousemove; por supuesto, como body.onmousemove espera una función, pues ignora ese valor (ese 5) y no hace nada.
    – Trauma
    Commented el 9 feb. 2019 a las 3:56
1

La diferencia es que en el primer fragmento de código no se está atando una función sino más bien la ejecución de una función (eventualmente, el valor que dicha función retorne). En este caso debería ser:

// Definición de la función
function mostrarPosMouse(event) {
    // ...
};

// Atar la función al evento, no la ejecución. Nótese la ausencia de ()
// ya que no queremos ejecutarla, sólo atarla al evento
body.onmousemove = mostrarPosMouse;
2
  • Perfecto, se entendio. Solo una duda, en body.onmousemove = mostrarPosMouse, no es necesario que le digamos el parametro que recibe?
    – GonzaloM
    Commented el 6 feb. 2019 a las 23:09
  • 1
    No es necesario ya que sólo estamos referenciando la función. Al momento de ejecutarla, JS se entiende con la definición y, el que la ejecute, pasará el parámetro definido. Los eventos de JS por defecto proveen el "event" con la info. de cómo se ha emitido, quién lo emitió, etc.
    – David Mork
    Commented el 7 feb. 2019 a las 0:45

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.