2009-02-27 10 views
7

warum funktionierts ..JavaScript-Syntax: Funktionsaufrufe und mit Klammern

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

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


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

aber nicht diese ????

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

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


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

der Unterschied die Verwendung von Klammern zu sein, wenn die myAlert Funktion aufrufen.

die Fehler, die ich bekommen ..

"Htmlfile: Typenkonflikt." beim Kompilieren über VS2008.

Antwort

29

Die () nach einer Funktion bedeutet führen die Funktion selbst und geben Sie ihren Wert zurück. Ohne es haben Sie einfach die Funktion, die als Rückruf nützlich sein kann.

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;}();" ist ein Syntaxfehler, aber "(function() {return 1;}())" ist nicht. Silly JavaScript und Ihre separaten Funktionsanweisungen und Ausdrücke ... –

+0

@Simon: "function() {return 1;}();" ist ein Syntaxfehler nur, wenn er keiner Variablen zugewiesen ist. –

5

Die addEventListener Funktion erwartet eine Funktion oder ein Objekt EventListener als das zweite Argument der Umsetzung kein Funktionsaufruf.

Wenn die () zu einem Funktionsnamen hinzugefügt werden, ist es ein Funktionsaufruf und nicht die Funktion selbst.

Bearbeiten: Wie in den anderen Antworten und in den Kommentaren angegeben, ist es möglich, Funktionen in Javascript zurückzugeben.

Also, für etwas Interessantes könnten wir folgendes versuchen. Von der ursprünglichen myAlert, können wir es ein wenig ändern, um eine andere Nachricht zurück, abhängig von den Parametern:

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

Hier bemerken, dass die Funktion eine Funktion tatsächlich zurückgibt. Um diese Funktion aufzurufen, wird daher das Extra () benötigt.

Ich schrieb ein wenig HTML und Javascript, um die obige Funktion zu verwenden. (Bitte entschuldigen Sie meinen unreinen HTML und Javascript, da es nicht meine Domain ist):

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

Zwei Schaltflächen angezeigt, und jeder ruft die myAlert Funktion mit einem anderen Parameter. Sobald die myAlert-Funktion aufgerufen wird, wird sie selbst eine weitere function zurückgeben, so dass mit einem zusätzlichen Satz von Klammern aufgerufen werden muss.

Endergebnis ist, wird durch Klicken auf Button1Message: Clicked Button1 ein Meldungsfeld mit der Meldung zeigen, während Button2 Klick auf ein Meldungsfeld Message: Clicked Button2 sagen zeigen.

+0

Ja, Funktionen können Funktionen zurückgeben (wie spätere Antworten zeigen) –

2

Wenn Sie die Klammer verwenden Sie tatsächlich die Funktion aufrufen und die Funktion Ergebnis sind das Senden (in diesem Fall nicht definiert, weil myAlert keinen Rückgabewert haben) den Parameter wie.

0

Es ist auch erwähnenswert, dass Funktionen erstklassige Objekte sind. Sie können sie wie jedes andere Objekt herumwerfen.Hier ist ein schönes prägnantes Beispiel dafür, warum das ist cool, von 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()); 
} 

mit myAlert() hier wird den Rückgabewert der Funktion zu geben, nicht die Funktion selbst.

Bedenken Sie:

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

alert(bob()); 

der Alarm den Wert durch die Funktion bob zurück verwenden wird.

Wenn Sie weitere Parameter in addEventListener übergeben wollen, versuchen Sie dies:

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

Javascript verwendet erstklassige Funktionen und kann somit als Parameter an Funktionen übergeben werden, das ist, was die addEventListener und attachEvent Methoden erwartet werden . Ich hoffe, das hilft.