Detaillierte Erklärung der privaten Klassenfelder von JavaScript und der privaten Modifizierungen von TypeScript

Private Klassenfelder in JavaScript und die Notwendigkeit der Privatsphäre

In der Vergangenheit verfügte JavaScript über keinen nativen Mechanismus zum Schutz von Variablen vor dem Zugriff, außer natürlich mit klassischen Closures.

Closures sind die Grundlage für viele datenschutzähnliche Muster in JavaScript, beispielsweise das beliebte Modulmuster. Mit der Verwendung von ECMAScript 2015-Klassen in den letzten Jahren verspürten Entwickler jedoch das Bedürfnis nach mehr Kontrolle über die Privatsphäre der Klassenmitglieder.

Der Klassenfeldvorschlag (zum Zeitpunkt des Schreibens in Phase 3) versucht, das Problem durch die Einführung privater Klassenfelder zu lösen.

Mal sehen, wie sie aussehen.

Beispiel für ein privates JavaScript-Klassenfeld

Hier ist eine JavaScript-Klasse mit privaten Feldern. Beachten Sie, dass jedes private Feld im Gegensatz zu „öffentlichen“ Mitgliedern vor dem Zugriff deklariert werden muss:

Klasse Person {
  #Alter;
  #Name;
  #Nachname;
  Konstruktor(Name, Nachname, Alter) {
    dies.#name = Name;
    dies.#Nachname = Nachname;
    dies.#Alter = Alter;
  }
  getFullName() {
    gibt `${this.#name} + ${this.#surname}` zurück;
  }
}

Auf private Klassenfelder kann von außerhalb der Klasse nicht zugegriffen werden:

Klasse Person {
  #Alter;
  #Name;
  #Nachname;
  Konstruktor(Name, Nachname, Alter) {
    dies.#name = Name;
    dies.#Nachname = Nachname;
    dies.#Alter = Alter;
  }
  getFullName() {
    gibt `${this.#name} + ${this.#surname}` zurück;
  }
}
const marta = neue Person("Marta", "Cantrell", 33);
console.log(marta.#age); // Syntaxfehler

Das ist wahre „Privatsphäre“. Wenn Sie sich ein wenig mit TypeScript auskennen, fragen Sie sich vielleicht, was „native“ private Felder mit dem privaten Modifikator in TypeScript gemeinsam haben.

Nun, die Antwort ist: Nein. Aber warum?

Der private Modifikator in TypeScript

Entwickler mit einem Hintergrund in traditionellen Programmiersprachen sollten mit dem privaten Modifikator in TypeScript vertraut sein. Kurz gesagt besteht der Zweck dieses Schlüsselworts darin, Klassenmitgliedern von außerhalb der Klasse den Zugriff zu verweigern.

Vergessen Sie jedoch nicht, dass TypeScript eine Ebene über JavaScript darstellt und der TypeScript-Compiler alle ausgefallenen TypeScript-Kommentare entfernen sollte, auch die privaten.

Dies bedeutet, dass die folgende Klasse nicht das tut, was Sie möchten:

Klasse Person {
  privates Alter: Anzahl;
  privater Name: Zeichenfolge;
  privater Nachname: Zeichenfolge;
  Konstruktor(Name: Zeichenfolge, Nachname: Zeichenfolge, Alter: Zahl) {
    dieser.name = Name;
    dieser.Nachname = Nachname;
    dieses.Alter = Alter;
  }
  getFullName() {
    gibt `${this.name} + ${this.surname}` zurück;
  }
}
const liz = neue Person("Liz", "Cantrill", 31);
// @ts-ignorieren
Konsole.log(liz.age);

Ohne //@ts-ignore würde der Zugriff auf liz.age lediglich einen Fehler in TypeScript verursachen, nach der Kompilierung würde man aber folgenden JavaScript-Code erhalten:

"streng verwenden";
var Person = /** @class */ (Funktion () {
    Funktion Person(Vorname, Nachname, Alter) {
        dieser.name = Name;
        dieser.Nachname = Nachname;
        dieses.Alter = Alter;
    }
    Person.prototype.getFullName = Funktion () {
        returniere diesen.Namen + " + " + diesen.Nachnamen;
    };
    Person zurückgeben;
}());
var liz = neue Person("Liz", "Cantrill", 31);
console.log(liz.alter); // 31

Wie erwartet können wir liz.age auf der Konsole ausgeben. Der Hauptpunkt hierbei ist, dass privat in TypeScript nicht so privat ist und sich nur auf der TypeScript-Ebene bequem anfühlt, nicht aber „echte Privatsphäre“.

Kommen wir nun zu: „nativen“ privaten Klassenfeldern in TypeScript.

Private Klassenfelder in TypeScript

TypeScript 3.8 unterstützt private ECMAScript-Felder, nicht zu verwechseln mit dem privaten TypeScript-Modifikator.

Hier ist eine Klasse mit privaten Klassenfeldern in TypeScript:

Klasse Person {
    #Alter: Zahl;
    #name: Zeichenfolge;
    #Nachname: Zeichenfolge;
    Konstruktor(Name:Zeichenfolge, Nachname:Zeichenfolge, Alter:Zahl) {
        dies.#name = Name;
        dies.#Nachname = Nachname;
        dies.#Alter = Alter;
    }
    getFullName() {
        gibt `${this.#name} + ${this.#surname}` zurück;
    }
}

Abgesehen von den Typanmerkungen unterscheidet es sich nicht von nativem JavaScript. Auf die Mitglieder kann von außen nicht zugegriffen werden. Das eigentliche Problem mit privaten Feldern in TypeScript besteht jedoch darin, dass sie im Hintergrund WeakMap verwenden.

Um diesen Code zu kompilieren, müssen wir die Zielkompilierungsversion in tsconfig.json anpassen, die mindestens ECMAScript 2015 sein muss:

{
  "Compileroptionen": {
    "Ziel": "es2015",
    "streng": wahr,
    "lib": ["dom","es2015"]
  }
}

Dies kann je nach Zielbrowser problematisch sein und wenn Sie nicht vorhaben, einen Polyfill für WeakMap bereitzustellen, wird das Schreiben einer schicken neuen Syntax zu viel Arbeit.

Bei JavaScript besteht immer diese Spannung: Man möchte zwar die neue Syntax verwenden, aber andererseits die Benutzererfahrung nicht durch viele Polyfills verschlechtern.

Andererseits müssen Sie sich keine Gedanken über private Klassenfelder machen, auch wenn Sie es für neuere Browser freigeben möchten. Zumindest ist das jetzt der Fall. Nicht einmal Firefox hat den Vorschlag umgesetzt.

Oben finden Sie eine ausführliche Erläuterung privater JavaScript-Klassenfelder und privater TypeScript-Modifikatoren. Weitere Informationen zu privaten JavaScript-Klassenfeldern und privaten TypeScript-Modifikatoren finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!