Mit Beispielen erläuterter JavaScript-Prototyp

Programmierung

Prototypen

JavaScript ist eine prototypbasierte Sprache. Daher ist das Verständnis des Prototypobjekts eines der wichtigsten Konzepte, die JavaScript-Anwender kennen müssen. Dieser Artikel gibt Ihnen anhand verschiedener Beispiele einen kurzen Überblick über das Prototype-Objekt. Bevor Sie diesen Artikel lesen, müssen Sie ein grundlegendes Verständnis der thisReferenz in JavaScript haben.

Prototypobjekt

Lassen Sie uns der Klarheit halber das folgende Beispiel untersuchen:

function Point2D(x, y) { this.x = x; this.y = y; }

Wenn die Point2DFunktion deklariert wird, wird eine Standardeigenschaft mit dem Namen prototypedafür erstellt (beachten Sie, dass in JavaScript eine Funktion auch ein Objekt ist). Die prototypeEigenschaft ist ein Objekt, das eine constructorEigenschaft enthält und deren Wert die Point2DFunktion ist : Point2D.prototype.constructor = Point2D. Wenn Sie Point2Dmit einem newSchlüsselwort aufrufen , erben neu erstellte Objekte alle Eigenschaften vonPoint2D.prototype . Um zu überprüfen , dass, können Sie eine Methode hinzufügen , benannt movein Point2D.prototypewie folgt:

Point2D.prototype.move = function(dx, dy) { this.x += dx; this.y += dy; } var p1 = new Point2D(1, 2); p1.move(3, 4); console.log(p1.x); // 4 console.log(p1.y); // 6

Das Point2D.prototypewird als Prototypobjekt oder Prototyp eines p1Objekts und für jedes andere mit new Point2D(...)Syntax erstellte Objekt bezeichnet . Sie können dem Point2D.prototypeObjekt nach Belieben weitere Eigenschaften hinzufügen . Das übliche Muster ist, Methoden zu deklarieren Point2D.prototypeund andere Eigenschaften in der Konstruktorfunktion zu deklarieren.

Integrierte Objekte in JavaScript werden auf ähnliche Weise erstellt. Zum Beispiel:

  • Prototyp von Objekten, die mit new Object()oder {}Syntax erstellt wurden, ist Object.prototype.
  • Prototyp von Arrays, die mit new Array()oder []Syntax erstellt wurden, ist Array.prototype.
  • Und so weiter mit anderen eingebauten Objekten wie Dateund RegExp.

Object.prototypewird von allen Objekten geerbt und hat keinen Prototyp (sein Prototyp ist null).

Prototypkette

Der Prototyp-Kettenmechanismus ist einfach: Wenn Sie auf eine Eigenschaft pfür ein Objekt objzugreifen, durchsucht die JavaScript-Engine diese Eigenschaft innerhalb eines objObjekts. Wenn die Engine nicht sucht, setzt sie die Suche im Prototyp des objObjekts usw. bis zum Erreichen fort Object.prototype. Wenn nach Abschluss der Suche nichts gefunden wurde, wird das Ergebnis angezeigt undefined. Zum Beispiel:

var obj1 = { a: 1, b: 2 }; var obj2 = Object.create(obj1); obj2.a = 2; console.log(obj2.a); // 2 console.log(obj2.b); // 2 console.log(obj2.c); // undefined

Im obigen Snippet erstellt die Anweisung var obj2 = Object.create(obj1)ein obj2Objekt mit einem Prototypobjekt obj1. Mit anderen Worten, obj1wird zum Prototyp von obj2statt Object.prototypestandardmäßig. Wie Sie sehen, bist keine Eigenschaft von obj2, Sie können dennoch über die Prototypenkette darauf zugreifen. Für cImmobilien erhalten Sie jedoch einen undefinedWert, da dieser nicht in obj1und gefunden werden kann Object.prototype.

Klassen

In ES2016 können wir nun das ClassSchlüsselwort sowie die oben genannten Methoden zum Bearbeiten verwenden prototype. Das JavaScript Classspricht Entwickler mit OOP-Hintergrund an, macht aber im Wesentlichen dasselbe wie oben.

class Rectangle { constructor(height, width) { this.height = height this.width = width } get area() { return this.calcArea() } calcArea() { return this.height * this.width } } const square = new Rectangle(10, 10) console.log(square.area) // 100

Dies ist im Grunde das gleiche wie:

function Rectangle(height, width) { this.height = height this.width = width } Rectangle.prototype.calcArea = function calcArea() { return this.height * this.width }

Die Methoden getterund setterin Klassen binden eine Object-Eigenschaft an eine Funktion, die beim Nachschlagen dieser Eigenschaft aufgerufen wird. Es ist nur syntaktischer Zucker, um das Nachschlagen oder Festlegen von Eigenschaften zu erleichtern .

Weitere Informationen zu JS-Prototypen:

  • Alles, was Sie wissen müssen, um den Prototyp von JavaScript zu verstehen