Heim > Artikel > Web-Frontend > Einführung in Methoden zur Implementierung von Klassen in JavaScript mithilfe der Klassensyntax
Einführung in Methoden zur Implementierung von Klassen in JavaScript mithilfe der Klassensyntax
- 不言Original
- 2018-11-30 11:35:082897Durchsuche
In ECMAScript 6 wurde die Klassensyntax zum Definieren von Klassen in JavaScript hinzugefügt. In diesem Artikel werde ich den Code zum Implementieren von JavaScript-Klassen mithilfe der Klassensyntax vorstellen.
Werfen wir zunächst einen Blick auf die Browserunterstützung
Da sie ECMAScript 6 entsprechen muss, ist sie verfügbar in den folgenden Browsern.
Microsoft Edge
Google Chrome 49 oder höher
Firefox 45 oder höher
Werfen wir einen Blick auf das Syntaxformat
class (类名){
constructor ([参数...]){
}
(类名1)([参数...]){
...(方法的实现)
}
(类名2)([参数...]){
...(方法的实现)
}
...
(类名n)([参数...]){
...(方法的实现)
}
}Sehen wir uns ein einfaches Beispiel an
Der Code lautet wie folgt
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
class MyClass {
method01() {
return "Hello JavaScript Class.";
}
}
function onButtonClick() {
var mclass = new MyClass();
var elem = document.getElementById("output");
elem.innerHTML = mclass.method01();
}
</script>
</head>
<body>
<div id="output">output</div>
<hr/>
<input type="button" value="Exec" onclick="onButtonClick();">
</body>
</html>Anleitung:
Wir verwenden den folgenden Code, um Deklarieren und implementieren Sie diese Klasse.
Deklarieren Sie die Klasse „MyClass“. MyClass verfügt über eine method01()-Methode. Die Methode
method01() gibt eine Zeichenfolge „Hallo JavaScript-Klasse“ zurück.
class MyClass {
method01() {
return "Hello JavaScript Class.";
}
}Führen Sie durch Klicken auf die Schaltfläche die folgende onButtonClick()-Funktion aus.
function onButtonClick() {
var mclass = new MyClass();
var elem = document.getElementById("output");
elem.innerHTML = mclass.method01();
}rrreeDer obige Code erstellt eine MyClass-Instanz. Das erstellte MyClass-Objekt (MyClass-Instanz) wird der mclass-Variablen zugewiesen.
var mclass = new MyClass();
Rufen Sie die Methode getElementById() auf und rufen Sie das Element (div) mit der „Ausgabe“-ID ab. Ersetzen Sie den Rückgabewert vom Aufruf der method1()-Methode der MyClass-Klasse durch das Abrufen des innerHTML des Elements. Ändern Sie den Text an der Position des div-Tags mit „output“ als ID in „Hello JavaScript Class“.
Laufergebnisse
Verwenden Sie einen Webbrowser, um die obige HTML-Datei anzuzeigen. Der unten gezeigte Effekt wird angezeigt.
Klicken Sie auf die Schaltfläche [Ausführen]. Die Zeichenfolge, die „Ausgabe“ anzeigt, wird in „Hallo JavaScript-Klasse“ geändert. Durch das Erstellen einer Instanz einer Klasse kann bestätigt werden, dass die Methode ausgeführt werden kann.
Schauen wir uns abschließend ein Beispiel eines Konstruktors an
Wir werden den Implementierungscode einer einfachen Klasse mithilfe eines Konstruktors vorstellen.
Der Code lautet wie folgt:
var elem = document.getElementById("output");
elem.innerHTML = mclass.method01();Erklärung: Das Format der Klassendeklaration und -implementierung ist das gleiche wie im vorherigen Code.
<!DOCTYPE html><html><head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
class MyClass {
constructor(quote) {
this.iquote = quote;
}
method01() {
return this.iquote + "Hello JavaScript Class." + this.iquote;
}
}
function onButtonClick() {
var mclass = new MyClass("～");
var elem = document.getElementById("output");
elem.innerHTML = mclass.method01();
}
</script>
</head>
<body>
<div id="output">output</div>
<hr />
<input type="button" value="Exec" onclick="onButtonClick();">
</body>
</html>Verwenden Sie den obigen Konstruktor, um den Konstruktor zu implementieren. In diesem Code wird der dem Konstruktorparameter zugewiesene Wert in der iquote-Membervariablen gespeichert. Mitgliedsvariablen können deklariert werden, indem der Variablenname nach „this“ beschrieben wird. Die
constructor(quote) {
this.iquote = quote;
}method01()-Methode gibt eine Zeichenfolge „Hallo JavaScript-Klasse“ zurück. Der Unterschied zum vorherigen Beispiel besteht darin, dass die den Konstruktorparametern übergebene Zeichenfolge vor und nach der Zeichenfolge hinzugefügt wird.
method01() {
return this.iquote + "Hello JavaScript Class." + this.iquote;
}Durch Klicken auf die Schaltfläche wird die obige onButtonClick()-Funktion ausgeführt. Erstellen Sie eine Instanz von MyClass, weisen Sie dem Element mit der Ausgabe-ID den Rückgabewert der Methode 1 zu und zeigen Sie ihn im Browser an.
Laufergebnisse
Verwenden Sie einen Webbrowser, um die obige HTML-Datei anzuzeigen. Der unten gezeigte Effekt wird angezeigt.
Klicken Sie auf die Schaltfläche [Ausführen]. Die Zeichenfolge, die „output“ anzeigt, wird zu „~Hello JavaScript Class.~“. Eine Instanz der Klasse wird erstellt und Sie können sehen, dass die Methode ausführbar ist. Vor und nach der Zeichenfolge „Hallo JavaScript-Klasse.“ können Sie bestätigen, dass „~“ ausgeführt wird.
Das obige ist der detaillierte Inhalt vonEinführung in Methoden zur Implementierung von Klassen in JavaScript mithilfe der Klassensyntax. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!