¿Cuál es la diferencia entre una llamada de función y una referencia de función?
tengo la siguiente funcion
function hello() {
alert("hi!");
}
Tome este fragmento de código:
var elem = document.getElementById("btn");
elem.onclick = hello;
Mi pregunta puede ser un poco difícil de entender, así que tengan paciencia: ¿Qué diferencia EXACTAMENTE ESTE fragmento de código de una llamada normal, o qué hace que este fragmento de código requiera una referencia a la variable de función en lugar de una llamada normal? ( hello();
)
¿Cómo puedo saber dónde se supone que debo dar una referencia a la función y cuándo se supone que debo llamarla?
Bueno, la onclick
propiedad espera una referencia a una función para que se ejecute cuando se hace clic en el elemento. Normalmente es:
element.onclick = funcRef;
o
element.onclick = function () {
funcRef();
};
(pero por supuesto, es mejor usar addEventListener
y attachEvent
)
Observe cómo ambos son referencias a funciones, no llamadas.
Cuando algo espera una referencia, no lo llamas... le asignas una referencia (primer ejemplo).
Cuando quieras llamar específicamente a una función, la llamas con ()
(segundo ejemplo). Pero observe cómo en el segundo ejemplo, todavía hay una referencia a una función asignada onclick
; es solo una función anónima.
Probablemente la parte más importante:
Algunas personas piensan que quieres hacer esto:
element.onclick = funcRef();
Pero eso ejecuta inmediatamente la función (debido a ()
) y asigna su valor de retorno a onclick
. A menos que el valor de retorno sea una función, esto no es lo que desea.
Creo que la moraleja de la historia es que cuando quieres o necesitas algo para ejecutar ahora mismo, llamas a la función. Si la función se desea para un uso posterior o se necesita almacenar, no la llames.
¿Quieres que se ejecute AHORA? Entonces llámalo.
a=hello()
significa "Llame hello()
lo antes posible y establezca su valor de retorno en a
".
Por otro lado, a=hello
significa " a
es un alias de hello
. Si llamas a()
, obtendrás los mismos resultados que si llamas a hello()
" .
Utiliza este último para devoluciones de llamadas, etc., donde desea decirle al navegador lo que desea que suceda después de que ocurra un evento. Por ejemplo, es posible que desee decir "llamar hello()
cuando el usuario haga clic" (como en el ejemplo). O "Cuando la consulta AJAX devuelva un resultado, llame a la callback()
función en los datos devueltos".
¿Cómo puedo saber dónde se supone que debo dar una referencia a la función y cuándo se supone que debo llamarla?
¿Necesita que la función se ejecute ahora?
Luego agregue el () para ejecutarlo.
¿Necesita funcionar para que se haga referencia a él para que se llame más tarde?
No agregue el ().