In diesem Tutorial lernen Sie anhand von Beispielen JavaScript-Klassen kennen.
Klassen sind eine der Funktionen, die in der ES6- Version von JavaScript eingeführt wurden.
Eine Klasse ist eine Blaupause für das Objekt. Sie können ein Objekt aus der Klasse erstellen.
Sie können sich die Klasse als Skizze (Prototyp) eines Hauses vorstellen. Es enthält alle Details zu den Böden, Türen, Fenstern usw. Basierend auf diesen Beschreibungen bauen Sie das Haus. Haus ist das Objekt.
Da viele Häuser aus derselben Beschreibung erstellt werden können, können wir viele Objekte aus einer Klasse erstellen.
JavaScript-Klasse erstellen
Die JavaScript-Klasse ähnelt der Javascript-Konstruktorfunktion und ist lediglich ein syntaktischer Zucker.
Die Konstruktorfunktion ist definiert als:
// constructor function function Person () ( this.name = 'John', this.age = 23 ) // create an object const person1 = new Person();
Anstatt das functionSchlüsselwort zu verwenden, verwenden Sie das classSchlüsselwort zum Erstellen von JS-Klassen. Beispielsweise,
// creating a class class Person ( constructor(name) ( this.name = name; ) )
Das classSchlüsselwort wird verwendet, um eine Klasse zu erstellen. Die Eigenschaften werden in einer Konstruktorfunktion zugewiesen.
Jetzt können Sie ein Objekt erstellen. Beispielsweise,
// creating a class class Person ( constructor(name) ( this.name = name; ) ) // creating an object const person1 = new Person('John'); const person2 = new Person('Jack'); console.log(person1.name); // John console.log(person2.name); // Jack
Hier person1und person2 sind Objekte der PersonKlasse.
Hinweis : Die constructor()Methode innerhalb einer Klasse wird jedes Mal automatisch aufgerufen, wenn ein Objekt erstellt wird.
Methoden der Javascript-Klasse
Bei Verwendung der Konstruktorfunktion definieren Sie Methoden wie folgt:
// constructor function function Person (name) ( // assigning parameter values to the calling object this.name = name; // defining method this.greet = function () ( return ('Hello'' + ' ' + this.name); ) )
Es ist einfach, Methoden in der JavaScript-Klasse zu definieren. Sie geben einfach den Namen der Methode an, gefolgt von (). Beispielsweise,
class Person ( constructor(name) ( this.name = name; ) // defining method greet() ( console.log(`Hello $(this.name)`); ) ) let person1 = new Person('John'); // accessing property console.log(person1.name); // John // accessing method person1.greet(); // Hello John
Hinweis : Um auf die Methode eines Objekts zuzugreifen, müssen Sie die Methode mit ihrem Namen gefolgt von aufrufen ().
Getter und Setter
In JavaScript erhalten Getter-Methoden den Wert eines Objekts und Setter-Methoden den Wert eines Objekts.
JavaScript-Klassen können Getter und Setter enthalten. Sie verwenden das getSchlüsselwort für Getter-Methoden und setfür Setter-Methoden. Beispielsweise,
class Person ( constructor(name) ( this.name = name; ) // getter get personName() ( return this.name; ) // setter set personName(x) ( this.name = x; ) ) let person1 = new Person('Jack'); console.log(person1.name); // Jack // changing the value of name property person1.personName = 'Sarah'; console.log(person1.name); // Sarah
Heben
Eine Klasse sollte vor der Verwendung definiert werden. Im Gegensatz zu Funktionen und anderen JavaScript-Deklarationen wird die Klasse nicht gehisst. Beispielsweise,
// accessing class const p = new Person(); // ReferenceError // defining class class Person ( constructor(name) ( this.name = name; ) )
Wie Sie sehen, wird beim Zugriff auf eine Klasse vor dem Definieren ein Fehler ausgegeben.
'Verwenden Sie streng'
Der Unterricht folgt immer "use-strict". Der gesamte Code innerhalb der Klasse befindet sich automatisch im strengen Modus. Beispielsweise,
class Person ( constructor() ( a = 0; this.name = a; ) ) let p = new Person(); // ReferenceError: Can't find variable: a
Hinweis : Die JavaScript-Klasse ist eine spezielle Art von Funktion. Und der typeofOperator kehrt functionfür eine Klasse zurück.
Beispielsweise,
class Person () console.log(typeof Person); // function
