Warum funktionieren JavaScript-Funktionen so?

Question

Also habe ich ein gutes Verständnis der meisten statischen typisierten Sprachen vor allem C und C++. Aber als ich in Javascript ging, bemerkte ich etwas, das mich aus der Fassung brachte.

Ich habe gelernt, diese Funktion zu schreiben, mit inneren HTML zu interagieren:

document.getElementById("SomeHTML").onclick = function(){ 



    document.getElementById("AnotherHTML").innerHTML = "<p> Joe has a cat </p>"; 

} 

Das ist alles schön und gut, aber es ist ein Problem. Wie soll ich das wieder verwenden soll und es lesbar zu halten ... kommt aus einem C++, wurde ich immer gelehrt Code auf diese Weise zu schreiben:

function MyFunc() 
{ 
      document.getElementById("AnotherHTML").innerHTML = "<p> Joe has a cat </p>"; 
} 

document.getElementById("SomeHTML").onclick = MyFunc(); 

Dieser Code sauberer zu sein (zumindest für mich) und Ich kann die Funktion wiederverwenden, aber es funktioniert nicht ... Ich kann diesen Weg in jeder Programmiersprache schreiben, aber in Javascript erzeugt es einen Fehler. Ich weiß nicht, was ich vermisse, ich weiß, es ist etwas Einfaches. Kann mir bitte jemand helfen, zu verstehen, warum ich auf diese Weise JavaScript-Funktionen nicht schreiben kann? Oder wenn ich mir bitte sagen kann, wie, weil ich letzteres viel lieber als das erstere bevorzuge. Danke im Voraus.

Answer 1

Sie haben Glück! Der letztere Code wird auch in JavaScript funktionieren.

Im Folgenden habe ich drei verschiedene Möglichkeiten beschrieben, wie Sie dies mit einer vertrauteren Syntax erreichen können.

// The function to call 
 
function MyFunc(){ 
 
    alert('Working!'); 
 
} 
 

 
// Option 1 (Link 1) 
 
document.getElementById("one").addEventListener("click", MyFunc); 
 

 
// Option 2 (Link 2) 
 
document.getElementById("two").onclick = MyFunc;

<a href="#" id="one">Link 1</a><br> 
 
<a href="#" id="two">Link 2</a><br> 
 
<a href="#" id="three" onclick="MyFunc()">Link 3</a>

Answer 2

ist Ihre Funktion nicht ganz wiederverwendbar, mir würde ich

// Original version 
function MyFunc() { 
    document.getElementById("AnotherHTML").innerHTML = "<p> Joe has a cat </p>"; 
} 

document.getElementById("SomeHTML").onclick = MyFunc(); 

// Function Generator 
function MyFunc_generator(element, html_content) { 
    return function() { 
     element.innerHTML = html_content; 
    } 
} 

myfunc = MyFunc_generator( 
    document.getElementById("AnotherHTML"), 
    "<p> Joe has a cat </p>" 
} 

document.getElementById("SomeHTML").addEventListener("click", myfunc); 

einen anderen Ansatz verwendet haben, in den Code ganz einige Unterschiede gibt es. Wir können mit dem Vergleich der ursprünglichen MyFunc Funktion und der MyFunc_generator eins beginnen.

Die erste keine Rückgaberechnung hat, und so die Zuordnung document.getElementById("SomeHTML").onclick = MyFunc(); würde den Wert der undefined die onclik Handler des HTML-Elements, deren ID „SomeHTML“ zuweisen.

Die Funktion "MyFunc_generator" ist eine Higher order function, eine Funktion, die eine Funktion als Ergebnis seiner Auswertung zurückgibt.

Die Ausführung der Generatorfunktion hat zur Folge, dass eine spezialisierte Funktion mit reellen Werten anstelle von generischen erstellt wird.

Die Zuweisung im Beispiel würde eine Funktion (anonym) erstellen und diesem den Namen myfunc zuweisen. Diese Funktion entspricht Ihrer.

Sie können die Parameter des Generators ändern, um ähnliche Funktionen mit unterschiedlichen Zielen und/oder unterschiedlichen Inhalten zu erstellen.

Offensichtlich ist der Aufwand in solch einem einfachen Fall nicht das Ergebnis wert, aber wenn die Strategie, die Sie beschreiben müssen, ziemlich komplex ist, wird der Nutzen zunehmen.

Eine letzte Anmerkung. Die Zuordnung der Handler-Funktion zum Ereignis ist unterschiedlich.In Javascript ist der bevorzugte Weg mit addEventListener