Einführung in Methoden zur Implementierung von Klassen in JavaScript mithilfe der Klassensyntax-js-Tutorial-php.cn

Einführung in Methoden zur Implementierung von Klassen in JavaScript mithilfe der Klassensyntax

不言

Freigeben： 2018-11-30 12:00:59

Original

2942 Leute haben es durchsucht

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.

Einführung in Methoden zur Implementierung von Klassen in JavaScript mithilfe der Klassensyntax

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)([参数...]){
     ...(方法的实现)
   }
 }

Nach dem Login kopieren

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>

Nach dem Login kopieren

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.";
    }
  }

Nach dem Login kopieren

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();
    }

Nach dem Login kopieren

rrree

Der obige Code erstellt eine MyClass-Instanz. Das erstellte MyClass-Objekt (MyClass-Instanz) wird der mclass-Variablen zugewiesen.

var mclass = new MyClass();

Nach dem Login kopieren

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.

Einführung in Methoden zur Implementierung von Klassen in JavaScript mithilfe der Klassensyntax

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.

Einführung in Methoden zur Implementierung von Klassen in JavaScript mithilfe der Klassensyntax

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();

Nach dem Login kopieren

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>

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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.

Einführung in Methoden zur Implementierung von Klassen in JavaScript mithilfe der Klassensyntax

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.

Einführung in Methoden zur Implementierung von Klassen in JavaScript mithilfe der Klassensyntax

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!