2013-04-08 6 views
17

Ich habe die folgende FunktionWas ist der Unterschied zwischen Funktionsaufruf und Funktionsreferenz?

function hello() { 
alert("hi!"); 
} 

dieses Stück Code Nehmen:

var elem = document.getElementById("btn"); 
elem.onclick = hello; 

Meine Frage ist vielleicht ein bisschen schwer zu verstehen sein, so mit mir tragen: Was genau dieses Stück Code unterscheidet von einem normalen Anruf, oder was macht diesen Teil des Codes erfordern einen Verweis auf die Funktionsvariable anstelle eines regulären Aufrufs? (hello();)

Wie kann ich wissen, wo ich einen Verweis auf die Funktion geben soll, und wann ich eigentlich anrufen soll?

+0

Ich kann auf diese dynamischen Sprachen falsch, neu sein (gerade angefangen bei Python suchen) , aber ich denke, Referenz ist, wenn Sie einen Alias ​​für die besagte Funktion erstellen möchten und Aufruf ist buchstäblich, wenn Sie anrufen möchten. (EG. 'Var = hallo' then 'var()' ist das gleiche wie '' hallo() 'wo immer' var() 'aufgerufen wird – SGM1

Antwort

23

Nun, die onclick-Eigenschaft erwartet einen Verweis auf eine Funktion, damit sie ausgeführt wird, wenn auf das Element geklickt wird. Normalerweise ist es entweder:

element.onclick = funcRef; 

oder

element.onclick = function() { 
    funcRef(); 
}; 

(aber natürlich ist es am besten addEventListener und attachEvent zu verwenden)

Beachten Sie, wie beide Verweise auf Funktionen sind nicht aufrufen.

Wenn etwas eine Referenz erwartet, nennen Sie es nicht ... Sie weisen ihm eine Referenz zu (erstes Beispiel). Wenn Sie eine Funktion gezielt aufrufen wollen, rufen Sie sie mit () (zweites Beispiel) auf. Beachten Sie jedoch, dass im zweiten Beispiel immer noch auf eine Funktion verwiesen wird, die onclick zugewiesen ist - es handelt sich lediglich um eine anonyme Funktion.

wohl wichtiger Teil:

Einige Leute denken, dass Sie dies tun wollen:

element.onclick = funcRef(); 

Aber das führt sofort die Funktion (wegen der ()) und ordnet den Rückgabewert zu onclick. Sofern der Rückgabewert eine Funktion ist, ist dies nicht das, was Sie wollen.

Ich denke, die Moral der Geschichte ist, dass, wenn Sie gerade etwas ausführen möchten, Sie die Funktion aufrufen. Wenn die Funktion für die spätere Verwendung gewünscht ist oder gespeichert werden soll, wird sie nicht aufgerufen.

+3

Das ** sofortige Ausführung ** Bit ist sehr wichtig. – Wex

+0

@Wex Haha yeah Ich habe versucht, darüber nachzudenken, wie man es erweitern kann – Ian

+0

Es gibt eine interessante Ecke Fall: 'element.onclick = getClickHandler()' –

11

Wie kann ich wissen, wo ich einen Verweis auf die Funktion geben soll, und wenn ich angeblich tatsächlich es nennen?

Müssen Sie die Funktion jetzt ausführen?

als hinzufügen(), um sie auszuführen

Müssen Sie referenziert werden funktionieren, so dass es später genannt wird?

Fügen Sie nicht die() hinzu.

1

Ein Verweis auf Ihre Funktion ist erforderlich irgendwo egal wie es heißt. Der Unterschied besteht darin, dass Sie die Funktion hello nicht explizit aufrufen. Sie weisen der Ereignisbehandlungsroutine elem des DOM-Knotens onclick einen Verweis auf diese Funktion zu, sodass Ihre Funktion aufgerufen wird, wenn onclick für diesen Knoten ausgelöst wird.

1

hallo() bedeutet, dass Sie diese Funktion aufrufen, was bedeutet, dass die Funktion direkt ausgeführt wird.

Wenn Sie elem.onclick = hallo haben, wird dies als Callback bezeichnet. Wo hallo nicht direkt ausgeführt wird, sondern nur wenn ein bestimmtes Ereignis ausgelöst wird (in diesem Fall wenn ein Klick auf das Element erfolgt)

15

Möchten Sie, dass es JETZT ausgeführt wird? Dann rufe es an.

a=hello() bedeutet "Rufen Sie hello() ASAP, und setzen Sie den Rückgabewert auf a".

Auf der anderen Seite bedeutet a=helloa ein Alias ​​für hello ist. Wenn Sie a() rufen Sie die gleichen Ergebnisse wie der Aufruf von hello() bekommen“

Sie die für Rückrufe letztere verwenden, etc, wo Sie wollen Informieren Sie den Browser, was nach einem Ereignis passieren soll. Zum Beispiel können Sie sagen "Rufen Sie hello(), wenn der Benutzer klickt" (wie im Beispiel). Oder: "Wenn die AJAX-Abfrage ein Ergebnis zurückgibt, rufen Sie die Funktion callback() für die zurückgegebenen Daten auf".

2

Fast alle Anweisungen in JavaScript haben einen Rückgabewert. Wenn nicht anders angegeben, geben Funktionen in JavaScript undefined zurück, wenn sie aufgerufen werden. Also, in der der einzigen Kontext es Sinn machen würde Ihre Funktion in dieser Zuordnungsanweisung zu nennen, wenn es eine Funktion zurück ist:

function hello() { 
    return function() { 
     alert("hi!"); 
    } 
} 

elem.onclick = hello(); 
Verwandte Themen