Was passiert, wenn Sie einen Prototyp in JavaScript einfrieren?

Haben Sie sich gefragt, was passiert, wenn Sie den Prototyp eines Objekts einfrieren? Lass es uns gemeinsam herausfinden.

Objekte

In JavaScript sind Objekte dynamische Sammlungen von Eigenschaften mit einer "versteckten" Eigenschaft. Wir beginnen mit der Erstellung eines solchen Objekts mithilfe der Objektliteral-Syntax.

const counter = { count: 0, increment(){ this.count += 1; return this.count; }, decrement(){ this.count -= 1; return this.count } } console.log(counter.increment())

counter ist ein Objekt mit einem Feld und zwei Methoden, die darauf arbeiten.

Prototypen

Objekte können Eigenschaften von Prototypen erben. Tatsächlich countererbt das Objekt bereits vom Object.prototypeObjekt.

Zum Beispiel können wir die toString()Methode für das counterObjekt aufrufen, auch wenn wir sie nicht definiert haben.

counter.toString();

Die beste Möglichkeit, mit Prototypen zu arbeiten, besteht darin, die Methoden im Prototyp zu extrahieren und sie dann für alle Objekte mit demselben Verhalten freizugeben. Machen wir das mit Object.create ().

const counterPrototype = { increment(){ this.count += 1; return this.count; }, decrement(){ this.count -= 1; return this.count } } const counter = Object.create(counterPrototype); counter.count = 0; console.log(counter.increment()) //1

Das Object.create()erstellt ein neues Objekt, wobei ein vorhandenes Objekt als Prototyp des neuen Objekts verwendet wird.  counterhat   counterPrototypeals Prototyp.

Das Prototypensystem ist flexibel, weist jedoch einige Nachteile auf. Alle Eigenschaften sind öffentlich und können geändert werden.

Zum Beispiel können wir die Implementierung des increment()Objekts im counterObjekt neu definieren.

const counter = Object.create(counterPrototype); counter.count = 0; counter.increment = function(){ console.log('increment') } console.log(counter.increment()); //"increment"

Einfrieren von Prototypen

Mal sehen, was passiert, wenn wir den Prototyp einfrieren. Durch das Einfrieren eines Objekts können wir seine Eigenschaften nicht hinzufügen, entfernen oder ändern.

const counterPrototype = Object.freeze({ increment(){ this.count += 1; return this.count; }, decrement(){ this.count -= 1; return this.count } }); counterPrototype.increment = function(){ console.log('increment') } //Cannot assign to read only property 'increment' of object '#'

Das Object.freeze()friert ein Objekt ein. Ein eingefrorenes Objekt kann nicht mehr geändert werden. Wir können keine Eigenschaften hinzufügen, bearbeiten oder entfernen.

Schauen Sie sich nun an, was passiert, wenn Sie versuchen, die Methode in dem counterObjekt zu ändern, von dem geerbt wird counterPrototype.

const counter = Object.create(counterPrototype); counter.count = 0; counter.increment = function(){ console.log('increment') } //Cannot assign to read only property 'increment' of object console.log(counter.increment()); //1

Wie Sie jetzt sehen können, dass der Prototyp eingefroren ist, können wir die increment()Methode im counterObjekt nicht ändern .

Rekapitulieren

Objekte haben eine versteckte Eigenschaft, die auf ihren Prototyp verweist.

Der Prototyp wird normalerweise verwendet, um die Methoden beizubehalten, die von verschiedenen Objekten gemeinsam genutzt werden.

Durch das Einfrieren des Prototyps können wir diese Eigenschaften in den Objekten, die von diesem Prototyp erben, nicht ändern. Die anderen Eigenschaften können geändert werden.

Discover Functional JavaScript wurde als einer derbeste funktionale Programmierbücher von BookAuthority!

Weitere Informationen zum Anwenden funktionaler Programmiertechniken auf React finden Sie unter Functional React.

Lernen Sie funktionale Reaktionen projektbasiert mit funktionaler Architektur mit React und Redux .