2009-02-27 10 views
7

por qué funciona esto ..Javascript sintaxis: llamadas a funciones y el uso de paréntesis

<script type="text/javascript"> 
<!-- 

function myAlert(){ 
    alert('magic!!!'); 
} 


if(document.addEventListener){ 
    myForm.addEventListener('submit',myAlert,false); 
}else{ 
    myForm.attachEvent('onsubmit',myAlert); 
} 
// --> 
</script> 

pero no esta ????

<script type="text/javascript"> 
<!-- 

function myAlert(){ 
    alert('magic!!!'); 
} 


if(document.addEventListener){ 
    myForm.addEventListener('submit',myAlert(),false); 
}else{ 
    myForm.attachEvent('onsubmit',myAlert()); 
} 
// --> 
</script> 

la diferencia es el uso de paréntesis cuando se llama a la función myAlert.

el error que consigo ..

"htmlfile: No coinciden los tipos". al compilar a través de VS2008.

Respuesta

29

El () después, una función a ejecutar la propia función y regresar su valor. Sin él, simplemente tiene la función, que puede ser útil para pasarla como una devolución de llamada.

var f1 = function() { return 1; }; // 'f1' holds the function itself, not the value '1' 
var f2 = function() { return 1; }(); // 'f2' holds the value '1' because we're executing it with the parenthesis after the function definition 

var a = f1(); // we are now executing the function 'f1' which return value will be assigned to 'a' 
var b = f2(); // we are executing 'f2' which is the value 1. We can only execute functions so this won't work 
+0

Huh. "function() {return 1;}();" es un error de sintaxis, pero "(function() {return 1;}())" no lo es. Silly JavaScript y sus declaraciones y expresiones de funciones separadas ... –

+0

@Simon: "function() {return 1;}();" es un error de sintaxis solo cuando no está asignado a una variable. –

5

La función addEventListener espera una función o un objeto que implementa EventListener como segundo argumento, no es una llamada a la función.

Cuando se agrega () al nombre de una función, es una invocación de función en lugar de la función en sí.

Editar: Como se indica en las otras respuestas y en los comentarios, es posible devolver funciones en Javascript.

Entonces, para algo interesante, podríamos intentar lo siguiente. Desde el original myAlert, podemos cambiar un poco para devolver un mensaje diferente, dependiendo de los parámetros:

function myAlert(msg) 
{ 
    return function() 
    { 
     alert("Message: " + msg); 
    } 
} 

Aquí, el aviso de que la función devuelve realmente una función. Por lo tanto, para invocar esa función, se requerirá el extra ().

Escribí un poco de HTML y Javascript para usar la función anterior. (Por favor, disculpe mi HTML y Javascript impuro, ya que no es mi dominio):

<script type="text/javascript"> 

function myAlert(msg) 
{ 
    return function() 
    { 
     alert("Message: " + msg); 
    } 
} 

</script> 

<html> 
<body> 

<form> 
<input type="button" value="Button1" onclick="myAlert('Clicked Button1')()"> 
<input type="button" value="Button2" onclick="myAlert('Clicked Button2')()"> 
</form> 

</body> 
</html> 

dos botones se muestran, y cada uno se llame a la función myAlert con un parámetro diferente. Una vez que se llama a la función myAlert, devolverá otra function, por lo que debe invocarse con un conjunto adicional de paréntesis.

resultado final es, al hacer clic en Button1 mostrará un cuadro de mensaje con el mensaje Message: Clicked Button1, mientras hace clic en Button2 mostrará un cuadro de mensaje diciendo Message: Clicked Button2.

+0

Sí, las funciones pueden devolver funciones (como se muestran en las respuestas posteriores) –

2

Cuando se utiliza el paréntesis que en realidad estás invocando la función y va a enviar el resultado de la función (en este caso, porque no definido Myalert no tiene un valor de retorno) como parámetro.

0

También vale la pena señalar que las funciones son objetos de primera clase. Puedes lanzarlos como cualquier otro objeto.He aquí un buen ejemplo concisa de por qué esto es fresco, de Wikipedia:

function makeDerivative(f, deltaX) { 
    var deriv = function(x) { 
     return (f(x + deltaX) - f(x))/ deltaX; 
    } 

    return deriv; 
} 

var cos = makeDerivative(Math.sin, 0.000001); 
0
if(document.addEventListener){ 
    myForm.addEventListener('submit',myAlert(),false); 
}else{ 
    myForm.attachEvent('onsubmit',myAlert()); 
} 

usando myAlert() aquí está dando el valor devuelto de la función, no la propia función.

Considera:

function bob() { 
    return "hello world"; 
} 

alert(bob()); 

la alerta se va a utilizar el valor devuelto por la función bob.

Si desea pasar parámetros adicionales en que addEventListener, intente esto:

if(document.addEventListener){ 
    myForm.addEventListener('submit',function(event) { 
     myAlert(event,myOtherParamater); 
    },false); 
}else{ 
    myForm.attachEvent('onsubmit',function() { 
     myAlert(window.event,myOtherParameter); 
    }); 
} 

Javascript utiliza funciones de primera clase y por lo tanto se puede pasar como parámetros de funciones que es lo addEventListener y métodos attachEvent están esperando . Espero que ayude.

Cuestiones relacionadas