Qual è la differenza tra una chiamata di funzione e una funzione di riferimento?

Ho la seguente funzione

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

Prendi questo pezzo di codice:

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

La mia domanda potrebbe essere un po ‘difficile da capire, quindi abbi pazienza con me: cosa differenzia ESATAMENTE questo pezzo di codice da una normale chiamata, o cosa rende questo codice richiede un riferimento alla variabile funzione piuttosto che una normale chiamata? ( hello(); )

Come posso sapere dove dovrei dare un riferimento alla funzione, e quando dovrei chiamarla effettivamente?

Bene, la proprietà onclick aspetta un riferimento a una funzione, affinché possa essere eseguita quando l’elemento viene cliccato. Normalmente è o:

 element.onclick = funcRef; 

o

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

(ma ovviamente, è meglio usare addEventListener e attachEvent )

Nota come entrambi sono riferimenti a funzioni, non a chiamate.

Quando qualcosa si aspetta un riferimento, non lo chiami … ti assegni un riferimento (primo esempio).

Quando si desidera chiamare specificamente una funzione, la si chiama con () (secondo esempio). Ma notate come nel secondo esempio ci sia ancora un riferimento a una funzione assegnata a onclick : è solo una funzione anonima.

Probabilmente la parte più importante:

Alcune persone pensano che tu voglia fare questo:

 element.onclick = funcRef(); 

Ma questo esegue immediatamente la funzione (a causa di () ) e assegna il suo valore di ritorno a onclick . A meno che il valore di ritorno non sia una funzione, questo non è ciò che desideri.

Penso che la morale della storia sia che quando vuoi / hai bisogno di qualcosa da eseguire adesso, chiami la funzione. Se la funzione è richiesta per un uso successivo o per esigenze archiviate, non la si chiama.

Vuoi farlo eseguire ORA? Quindi chiamalo.

a=hello() significa “Chiama hello() AL PIÙ PRESTO, e imposta il suo valore di ritorno su”.

D’altra parte, a=hello significa ” a è un alias per hello . Se chiami a() , ottieni gli stessi risultati della chiamata hello()

Utilizzi quest’ultimo per i callback, ecc., Dove vuoi dire al browser cosa vuoi che succeda dopo che si è verificato un evento. Ad esempio, potresti voler dire “chiama hello() quando l’utente fa clic” (come nell’esempio). Oppure, “Quando la query AJAX restituisce un risultato, chiama la funzione callback() sui dati restituiti”.

Come posso sapere dove dovrei dare un riferimento alla funzione, e quando dovrei chiamarla effettivamente?

Hai bisogno della funzione per eseguire ora?

Di aggiungere il () per eseguirlo

Hai bisogno di funzionare per essere referenziato in modo che venga chiamato più tardi?

Non aggiungere il ().

Praticamente tutte le istruzioni in JavaScript hanno un valore di ritorno. Se non diversamente specificato, le funzioni in JavaScript torneranno undefined quando chiamate. Quindi, l’unico contesto in cui avrebbe senso chiamare la propria funzione in questa istruzione di assegnazione se dovesse restituire una funzione:

 function hello() { return function() { alert("hi!"); } } elem.onclick = hello(); 

Un riferimento alla tua funzione è necessario da qualche parte, indipendentemente da come viene chiamato. La differenza qui è che non si sta chiamando esplicitamente la funzione hello . Assegnate un riferimento a tale funzione al gestore di eventi onclick del nodo DOM onclick modo che quando viene onclick per quel nodo, la vostra funzione venga chiamata.

ciao () significa che chiami quella funzione, il che significa che la funzione verrà eseguita direttamente.

mentre quando hai elem.onclick = ciao, questo è chiamato callback. Dove ciao non viene eseguito direttamente ma solo quando viene triggersto un determinato evento (in questo caso quando c’è un clic sull’elemento)