Javascript OOP Teil II

Hallo Freunde, ich bin Bennison, in diesem Blog werde ich erklären, wie OOP in Javascript funktioniert und wie es sich von klassischem OOP unterscheidet. Bevor Sie diesen Artikel lesen, lesen Sie bitte meinen vorherigen Blog, in dem es um die Grundlagen von OOP geht .

Was ist ein Prototyp?

In Javascript haben wir etwas, das Prototyp genannt wird. In JavaScript ist jedes Objekt mit einem bestimmten Prototyp verknüpft. Jedes Objekt hat also Prototypen. der Prototyp enthält auch Eigenschaften und Methoden.
Wichtig ist hier, dass auf die Methoden und Eigenschaften des Prototyps durch das Objekt zugegriffen werden kann.

Klassische OOP vs. Javascript-OOP

In der klassischen OOP wird ein Objekt aus der Klasse instanziiert, was als Instanziierung bezeichnet wird. Hier ist die Klasse nur eine Blaupause zum Erstellen von Objekten.
Aber in Javascript ist diese Terminologie einfach anders. Hier ist jedes Objekt mit anderen Objekten verknüpft , und diese Objekte werden als Prototypen bezeichnet .

Prototypische Vererbung bedeutet einen Prototyp, der Methoden und Prototypen enthält, auf die alle Objekte zugreifen können, die mit diesem Prototyp verknüpft sind.
Das Objekt erbt also Methoden und Eigenschaften vom Prototyp, dies wird als prototypische Vererbung bezeichnet. diese Vererbung unterscheidet sich von der Klassenvererbung, bei der eine Klasse von der anderen Klasse geerbt wird. Aber in diesem Fall erbt die Instanz von der Basisklasse.
Im obigen Bild zeigt der OOP-Pfeil im Javascript nach oben, das bedeutet, dass das Objekt sein Verhalten an die Prototypen delegiert.
In der klassischen OOP werden Methoden von der Klasse auf die Instanzen (Objekte) kopiert.

const numbers = [1, 2, 3, 4,5];
numbers.map((num) => num * 2)

Wenn wir Google nach einem Verständnis der Javascript-Kartenmethode durchsuchen, können wir das im MDN-Dokument wie Array.prototype.map() sehen.

Hier ist „ Array.prototype()“ der Prototyp für alle Array-Objekte, die wir in JavaScript erstellen. Daher haben alle Arrays Zugriff auf die map-Methode.
Jetzt enthält dieses Prototypobjekt alle Array-Methoden einschließlich einer Karte.

Im obigen Beispiel ist „ Array.Prototype“ also der Prototyp des Zahlen-Arrays, diese Zahlen-Array-Variable ist mit Prototypen verknüpft. Daher hat es Zugriff auf alle Methoden, die auf dem „ array.prototype “-Objekt definiert sind. Im obigen Beispiel erbt also das Array „number“ die Methodenmap.
In Javascript können wir die prototypische Vererbung auf drei Arten implementieren, eine ist die Konstruktorfunktion, die zweite sind ES6-Klassen und die letzte ist die Methode Object.Create().

Eine Konstruktorfunktion wird verwendet, um Objekte aus Funktionen zu erstellen. Auf diese Weise werden integrierte Objekte wie Array- und Map-Methoden implementiert.

Dies ist eine moderne Alternative zu Konstruktorfunktionen. ES6-Klassen funktionieren genauso wie die Konstruktorfunktion. Die ES6-Klasse verhält sich nicht wie ein klassisches OOP. Hinter den Kulissen werden ES6-Klassen mit Konstruktorfunktionen implementiert.

class User {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }
  getFullName() {
    console.log(this.firstName + ' ' + this.lastName);
  }
}

const user = new User('Bennison', 'J');

console.log(user); // { firstName: 'Bennison', lastName: 'J' }

console.log(user.hasOwnProperty('firstName')); // true
console.log(user.hasOwnProperty('getFullName')); // false

Und im obigen Beispiel sehen wir die Methode 'hasOwnProperty', die uns hilft, die Eigenschaft zu überprüfen, und die Methode ist die eigene Eigenschaft des Objekts, die als hasOwnProperty-Methode bezeichnet wird.

Die Methode „object.create()“ ist die einfachste Möglichkeit, ein Objekt mit einem Prototyp-Objekt zu verknüpfen.

const objOne = {
  firstName: 'Bennison',
  lastName: 'J',
  getFullName: function () {
    console.log(this.firstName + ' ' + this.lastName);
  }
};

const objTwo = Object.create(objOne);

console.log(objTwo); // {}
objTwo.getFullName(); //  Bennison J

Die Methode „Object.create“ gibt ein leeres Objekt mit dem Prototyp zurück. und der Prototyp wird das sein, was wir an diese Methode übergeben haben.

Ich hoffe, dass wir in diesem Blog die Grundlagen der prototypischen Vererbung in Javascript gelernt haben. Wenn Sie die obigen Beispiele nicht verstehen konnten, machen Sie sich keine Sorgen, ich werde mehr über diese Konzepte in meinen kommenden Blogs erklären. Vielen Dank für das Lesen dieses Blogs. Bis bald.

JavaScript OOP (Prototyp) #2