ES6 - Klassen

Object Orientationist ein Softwareentwicklungsparadigma, das der realen Modellierung folgt. Objektorientierung betrachtet ein Programm als eine Sammlung von Objekten, die über einen aufgerufenen Mechanismus miteinander kommunizierenmethods. ES6 unterstützt auch diese objektorientierten Komponenten.

Objektorientierte Programmierkonzepte

Lassen Sie uns zunächst verstehen

• Object- Ein Objekt ist eine Echtzeitdarstellung einer Entität. Laut Grady Brooch soll jedes Objekt drei Merkmale haben -

  • State - Beschrieben durch die Attribute eines Objekts.

  • Behavior - Beschreibt, wie sich das Objekt verhält.

  • Identity - Ein eindeutiger Wert, der ein Objekt von einer Reihe ähnlicher solcher Objekte unterscheidet.

• Class- Eine Klasse in Bezug auf OOP ist eine Blaupause zum Erstellen von Objekten. Eine Klasse kapselt Daten für das Objekt.

• Method - Methoden erleichtern die Kommunikation zwischen Objekten.

Lassen Sie uns diese objektorientierten Konzepte auf die in der realen Welt übertragen. Beispiel: Ein Auto ist ein Objekt, das Daten (Marke, Modell, Anzahl der Türen, Fahrzeugnummer usw.) und Funktionen (Beschleunigen, Schalten, Öffnen von Türen, Einschalten von Scheinwerfern usw.) enthält.

Vor ES6 war das Erstellen einer Klasse eine pingelige Angelegenheit. Klassen können mit dem Schlüsselwort class in ES6 erstellt werden.

Klassen können entweder durch Deklarieren oder durch Verwendung von Klassenausdrücken in den Code aufgenommen werden.

Syntax: Deklarieren einer Klasse

class Class_name {  
}

Syntax: Klassenausdrücke

var var_name = new Class_name {  
}

Auf das Schlüsselwort class folgt der Klassenname. Die Regeln für Bezeichner (bereits besprochen) müssen bei der Benennung einer Klasse berücksichtigt werden.

Eine Klassendefinition kann Folgendes umfassen:

• Constructors - Verantwortlich für die Zuweisung von Speicher für die Objekte der Klasse.

• Functions- Funktionen stellen Aktionen dar, die ein Objekt ausführen kann. Sie werden manchmal auch als Methoden bezeichnet.

Diese Komponenten zusammen werden als Datenelemente der Klasse bezeichnet.

Note - Ein Klassenkörper kann nur Methoden enthalten, keine Dateneigenschaften.

Beispiel: Deklarieren einer Klasse

class Polygon { 
   constructor(height, width) { 
      this.height = height; 
      this.width = width; 
   } 
}

Beispiel: Klassenausdruck

var Polygon = class { 
   constructor(height, width) { 
      this.height = height; 
      this.width = width; 
   } 
}

Das obige Codefragment repräsentiert einen unbenannten Klassenausdruck. Ein benannter Klassenausdruck kann als geschrieben werden.

var Polygon = class Polygon { 
   constructor(height, width) { 
      this.height = height; 
      this.width = width; 
   } 
}

Note - Im Gegensatz zu Variablen und Funktionen können Klassen nicht gehisst werden.

Objekte erstellen

Verwenden Sie zum Erstellen einer Instanz der Klasse das neue Schlüsselwort gefolgt vom Klassennamen. Es folgt die Syntax dafür.

var object_name= new class_name([ arguments ])

Wo,

• Das neue Schlüsselwort ist für die Instanziierung verantwortlich.

• Die rechte Seite des Ausdrucks ruft den Konstruktor auf. Dem Konstruktor sollten Werte übergeben werden, wenn er parametrisiert ist.

Beispiel: Instanziieren einer Klasse

var obj = new Polygon(10,12)

Zugriff auf Funktionen

Auf die Attribute und Funktionen einer Klasse kann über das Objekt zugegriffen werden. Verwenden Sie das '.'dot notation (als Punkt bezeichnet), um auf die Datenelemente einer Klasse zuzugreifen.

//accessing a function 
obj.function_name()

Beispiel: Zusammenfügen

'use strict' 
class Polygon { 
   constructor(height, width) { 
      this.h = height; 
      this.w = width;
   } 
   test() { 
      console.log("The height of the polygon: ", this.h) 
      console.log("The width of the polygon: ",this. w) 
   } 
} 

//creating an instance  
var polyObj = new Polygon(10,20); 
polyObj.test();

Das oben angegebene Beispiel deklariert eine Klasse 'Polygon'. Der Konstruktor der Klasse akzeptiert zwei Argumente - Höhe und Breite. Das‘this’Das Schlüsselwort bezieht sich auf die aktuelle Instanz der Klasse. Mit anderen Worten, der obige Konstruktor initialisiert zwei Variablen h und w mit den an den Konstruktor übergebenen Parameterwerten. Dastest () Funktion in der Klasse, druckt die Werte der Höhe und Breite.

Um das Skript funktionsfähig zu machen, wird ein Objekt der Klasse Polygon erstellt. Auf das Objekt wird von der verwiesenpolyObjVariable. Die Funktion wird dann über dieses Objekt aufgerufen.

Die folgende Ausgabe wird bei erfolgreicher Ausführung des obigen Codes angezeigt.

The height of the polygon:  10 
The width of the polygon:  20

Setter und Getter

Setter

Eine Setter-Funktion wird aufgerufen, wenn versucht wird, den Wert einer Eigenschaft festzulegen. Dasset keywordwird verwendet, um eine Setterfunktion zu definieren. Die Syntax zum Definieren einer Setterfunktion ist unten angegeben -

{set prop(val) { . . . }}
{set [expression](val) { . . . }}

prop ist der Name der Eigenschaft, die an die angegebene Funktion gebunden werden soll. val ist ein Alias ​​für die Variable, die den Wert enthält, der versucht wurde, der Eigenschaft zugewiesen zu werden. expression kann mit ES6 als Eigenschaftsname verwendet werden, um an die angegebene Funktion zu binden.

Beispiel

<script>
   class Student {
      constructor(rno,fname,lname){
         this.rno = rno
         this.fname = fname
         this.lname = lname
         console.log('inside constructor')
      }
      set rollno(newRollno){
         console.log("inside setter")
         this.rno = newRollno
      }
   }
   let s1 = new Student(101,'Sachin','Tendulkar')
   console.log(s1)
   //setter is called
   s1.rollno = 201
   console.log(s1)
</script>

Das obige Beispiel definiert eine Klasse Student mit three properties nämlich rno, fname and lname. Eine Setterfunktionrollno() wird verwendet, um den Wert für die Eigenschaft rno festzulegen.

Die Ausgabe des obigen Codes erfolgt wie folgt:

inside constructor
Student {rno: 101, fname: "Sachin", lname: "Tendulkar"}
inside setter
Student {rno: 201, fname: "Sachin", lname: "Tendulkar"}

Beispiel

Das folgende Beispiel zeigt die Verwendung eines expression als Eigenschaftsname mit a setter function.

<script>
   let expr = 'name';
      let obj = {
      fname: 'Sachin',
      set [expr](v) { this.fname = v; }
   };
   console.log(obj.fname);
   obj.name = 'John';
   console.log(obj.fname);
</script>

Die Ausgabe des obigen Codes erfolgt wie unten erwähnt -

Sachin
John

Getters

EIN getter functionwird aufgerufen, wenn versucht wird, den Wert einer Eigenschaft abzurufen. Dasget keywordwird verwendet, um eine Getter-Funktion zu definieren. Die Syntax zum Definieren einer Getter-Funktion ist unten angegeben -

{get prop() { ... } }
{get [expression]() { ... } }

prop ist der Name der Eigenschaft, die an die angegebene Funktion gebunden werden soll.

expression - Ab ES6 können Sie auch Ausdrücke als Eigenschaftsnamen verwenden, um an die angegebene Funktion zu binden.

Beispiel

<script>
   class Student {
      constructor(rno,fname,lname){
         this.rno = rno
         this.fname = fname
         this.lname = lname
         console.log('inside constructor')
      }
      get fullName(){
         console.log('inside getter')
         return this.fname + " - "+this.lname
      }
   }
   let s1 = new Student(101,'Sachin','Tendulkar')
   console.log(s1)
   //getter is called
   console.log(s1.fullName)
</script>

Das obige Beispiel definiert nämlich eine Klasse Student mit drei Eigenschaften rno, fname and lname. Die Getter-FunktionfullName() verkettet die fname und lname und gibt eine neue Zeichenfolge zurück.

Die Ausgabe des obigen Codes erfolgt wie folgt:

inside constructor
Student {rno: 101, fname: "Sachin", lname: "Tendulkar"}
inside getter
Sachin - Tendulkar

Beispiel

Das folgende Beispiel zeigt, wie ein Ausdruck als Eigenschaftsname mit einer Getter-Funktion verwendet wird.

<script>
   let expr = 'name';
   let obj = {
      get [expr]() { return 'Sachin'; }
   };
   console.log(obj.name);
</script>

Die Ausgabe des obigen Codes erfolgt wie unten erwähnt -

Sachin

Das statische Schlüsselwort

Das statische Schlüsselwort kann auf Funktionen in einer Klasse angewendet werden. Statische Mitglieder werden durch den Klassennamen referenziert.

Beispiel

'use strict' 
class StaticMem { 
   static disp() { 
      console.log("Static Function called") 
   } 
} 
StaticMem.disp() //invoke the static metho

Note- Es ist nicht zwingend erforderlich, eine Konstruktordefinition einzuschließen. Jede Klasse hat standardmäßig einen Konstruktor.

Die folgende Ausgabe wird bei erfolgreicher Ausführung des obigen Codes angezeigt.

Static Function called

Die Instanz des Operators

Der Operator instanceof gibt true zurück, wenn das Objekt zum angegebenen Typ gehört.

Beispiel

'use strict' 
class Person{ } 
var obj = new Person() 
var isPerson = obj instanceof Person; 
console.log(" obj is an instance of Person " + isPerson);

Die folgende Ausgabe wird bei erfolgreicher Ausführung des obigen Codes angezeigt.

obj is an instance of Person True

Klassenvererbung

ES6 unterstützt das Konzept von Inheritance. Vererbung ist die Fähigkeit eines Programms, neue Entitäten aus einer vorhandenen Entität zu erstellen - hier eine Klasse. Die Klasse, die erweitert wird, um neuere Klassen zu erstellen, heißtparent class/super class. Die neu erstellten Klassen heißen diechild/sub classes.

Eine Klasse erbt von einer anderen Klasse mit dem Schlüsselwort 'extended'. Untergeordnete Klassen erben alle Eigenschaften und Methoden außer Konstruktoren von der übergeordneten Klasse.

Es folgt die Syntax dafür.

class child_class_name extends parent_class_name

Beispiel: Klassenvererbung

'use strict' 
class Shape { 
   constructor(a) { 
      this.Area = a
   } 
} 
class Circle extends Shape { 
   disp() { 
      console.log("Area of the circle:  "+this.Area) 
   } 
} 
var obj = new Circle(223); 
obj.disp()

Das obige Beispiel deklariert eine Klassenform. Die Klasse wird um die Circle-Klasse erweitert. Da zwischen den Klassen, der untergeordneten Klasse, eine Vererbungsbeziehung besteht, erhält die Klasse Circle einen impliziten Zugriff auf ihr übergeordnetes Klassenattribut, dh den Bereich.

Die folgende Ausgabe wird bei erfolgreicher Ausführung des obigen Codes angezeigt.

Area of Circle: 223

Vererbung kann klassifiziert werden als -

• Single - Jede Klasse kann höchstens von einer Elternklasse ausgehen.

• Multiple- Eine Klasse kann von mehreren Klassen erben. ES6 unterstützt keine Mehrfachvererbung.

• Multi-level - Betrachten Sie das folgende Beispiel.

'use strict' 
class Root { 
   test() { 
      console.log("call from parent class") 
   } 
} 
class Child extends Root {} 
class Leaf extends Child   

//indirectly inherits from Root by virtue of inheritance {} 
var obj = new Leaf();
obj.test()

Die Klasse Leaf leitet die Attribute aufgrund der mehrstufigen Vererbung von den Klassen Root und Child ab.

Die folgende Ausgabe wird bei erfolgreicher Ausführung des obigen Codes angezeigt.

call from parent class

Klassenvererbung und Methodenüberschreibung

Method Overridingist ein Mechanismus, mit dem die untergeordnete Klasse die Methode der Oberklasse neu definiert. Das folgende Beispiel zeigt dasselbe -

'use strict' ;
class PrinterClass { 
   doPrint() { 
      console.log("doPrint() from Parent called… ");
   }
}
class StringPrinter extends PrinterClass { 
   doPrint() { 
      console.log("doPrint() is printing a string…"); 
   } 
} 
var obj = new StringPrinter(); 
obj.doPrint();

Im obigen Beispiel hat die untergeordnete Klasse die Implementierung der Superklassenfunktion geändert.

Die folgende Ausgabe wird bei erfolgreicher Ausführung des obigen Codes angezeigt.

doPrint() is printing a string…

Das Super-Schlüsselwort

Mit ES6 kann eine untergeordnete Klasse ihr Datenelement der übergeordneten Klasse aufrufen. Dies wird durch die Verwendung der erreichtsuperStichwort. Das Schlüsselwort super bezieht sich auf das unmittelbare übergeordnete Element einer Klasse.

Betrachten Sie das folgende Beispiel -

'use strict' 
class PrinterClass { 
   doPrint() {
      console.log("doPrint() from Parent called…") 
   } 
}  
class StringPrinter extends PrinterClass { 
   doPrint() { 
      super.doPrint() 
      console.log("doPrint() is printing a string…") 
   } 
} 
var obj = new StringPrinter() 
obj.doPrint()

Das doPrint()Bei der Neudefinition in der Klasse StringWriter wird die übergeordnete Klassenversion aufgerufen. Mit anderen Worten, das Schlüsselwort super wird verwendet, um die Funktionsdefinition doPrint () in der übergeordneten Klasse - PrinterClass - aufzurufen.

Die folgende Ausgabe wird bei erfolgreicher Ausführung des obigen Codes angezeigt.

doPrint() from Parent called. 
doPrint() is printing a string.