2009-02-27 13 views
7

perché fa questo lavoro ..javascript sintassi: chiamate di funzione e l'utilizzo di parentesi

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

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


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

ma non questo ????

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

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


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

la differenza è l'uso delle parentesi quando si chiama la funzione myAlert.

l'errore che ottengo ..

"htmlfile: Tipo non corrispondente". durante la compilazione tramite VS2008.

risposta

29

Il () dopo una funzione significa eseguire la funzione stessa e restituire il suo valore. Senza di esso hai semplicemente la funzione, che può essere utile per passare in giro come un callback.

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;}();" è un errore di sintassi, ma "(function() {return 1;}())" non lo è. Silly JavaScript e le tue istruzioni ed espressioni separate ... –

+0

@Simon: "function() {return 1;}();" è un errore di sintassi solo quando non è assegnato a una variabile. –

5

La funzione addEventListener aspetta una funzione o un oggetto che implementa EventListener come secondo argomento, non una chiamata di funzione.

Quando il () viene aggiunto a un nome di funzione, si tratta di un'invocazione di funzione anziché della funzione stessa.

Modifica: Come indicato nelle altre risposte e nei commenti, è possibile restituire le funzioni in Javascript.

Quindi, per qualcosa di interessante, potremmo provare quanto segue. Dall'originale myAlert, siamo in grado di cambiare un po 'per restituire un messaggio diverso, a seconda dei parametri:

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

Qui, si noti che la funzione restituisce in realtà una funzione. Pertanto, al fine di invocare tale funzione, sarà richiesto il valore aggiuntivo ().

Ho scritto un po 'di HTML e Javascript per utilizzare la funzione di cui sopra. (Chiedo scusa per il mio impuro HTML e Javascript, dato che non è il mio 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> 

due tasti sono indicati, e ciascuno chiamare la funzione myAlert con un parametro diverso. Una volta che viene chiamata la funzione myAlert, essa stessa restituirà un altro function in modo che debba essere invocato con un set aggiuntivo di parentesi.

risultato finale è, cliccando sulla Button1 mostrerà una finestra di messaggio con il messaggio Message: Clicked Button1, mentre cliccando su Button2 mostrerà una finestra di messaggio che dice Message: Clicked Button2.

+0

Sì, le funzioni possono restituire funzioni (come mostrano le risposte successive) –

2

Quando si utilizza la parentesi si sta effettivamente invocando la funzione e si sta inviando il risultato della funzione (in questo caso non definito perché MyAlert non dispone di un valore di ritorno) come parametro.

0

Vale anche la pena notare che le funzioni sono oggetti di prima classe. Puoi lanciarli in giro come qualsiasi altro oggetto.Ecco un bel esempio concisa del perché questo è cool, da 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()); 
} 

utilizzando myAlert() qui sta dando il valore restituito della funzione, non la funzione stessa.

Considerate questo:

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

alert(bob()); 

l'allarme sta per utilizzare il valore restituito dalla funzione bob.

Se si desidera passare parametri aggiuntivi in ​​voi addEventListener, provate questo:

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

javascript utilizza funzioni di prima classe e può quindi essere passato come parametri alle funzioni che è quello che l'addEventListener e metodi attachEvent si aspettano . Spero possa aiutare.

Problemi correlati