Erstellen privater Mitglieder in JavaScript

Erstellen privater Mitglieder in JavaScript

Vorwort:

private ist in objektorientierten Programmiersprachen ein Zugriffsmodifikator, mit dem Eigenschaften und Methoden nur innerhalb der Klasse zugänglich gemacht werden können, in der sie deklariert sind. Auf diese Weise lässt sich die zugrunde liegende Logik, die verborgen sein sollte und nicht mit der Außenseite der Klasse interagieren sollte, leicht verbergen.

Aber wie erreichen Sie eine ähnliche Funktionalität in JavaScript? Es gibt kein reserviertes Schlüsselwort private , aber im neuen Standard hat JavaScript eine eigene Möglichkeit, private Klassenmitglieder zu erstellen. Diese befindet sich jedoch noch im experimentellen Entwurf von ES2020 und die Syntax ist seltsam, mit # als Präfix. Hier sind mehrere Möglichkeiten zum Implementieren privater Eigenschaften und Methoden in JavaScript-Code.

1. Verwende Closures

Closures können zum Kapseln privater Eigenschaften oder Methoden verwendet werden. Closures ermöglichen den Zugriff auf Variablen und Features externer Funktionen.

Der folgende Codeausschnitt:

Funktion MeinProfil() {
    const meinTitel = "DevPoint";

    zurückkehren {
        getTitle: Funktion () {
            gib meinen Titel zurück;
        },
    };
}
const meinProfile = MeinProfile();
console.log(meinProfile.getTitle()); // DevPoint

Dies lässt sich so übersetzen, dass einer Variablen der oberste selbstaufrufende Funktionsaufruf zugewiesen wird und mit der Funktion return nur einige ihrer inneren Funktionen verfügbar gemacht werden:

const ButtonCreator = (Funktion () {
    const Eigenschaften = {
        Breite: 100,
        Höhe: 50,
    };

    const getWidth = () => Eigenschaften.Breite;
    const getHeight = () => Eigenschaften.Höhe;
    const setWidth = (Breite) => (Eigenschaften.width = Breite);
    const setHeight = (Höhe) => (Eigenschaften.Höhe = Höhe);

    Rückgabefunktion (Breite, Höhe) {
        Eigenschaften.Breite = Breite;
        Eigenschaften.Höhe = Höhe;

        zurückkehren {
            getWidth,
            Höhe abrufen,
            Breite festlegen,
            Höhe festlegen,
        };
    };
})();
Konstante Schaltfläche = neuer ButtonCreator(600, 360);
konsole.log(button.getHeight()); // 360

2. Verwenden Sie ES6-Klassen

Um den Code dem OOP-Ansatz ähnlicher zu machen, können Sie das in ES6 eingeführte Schlüsselwort „class“ verwenden. Um Eigenschaften und Methoden privat zu machen, können Sie sie außerhalb der Klasse definieren.

Lassen Sie uns das obige ButtonCreator-Beispiel umgestalten, um die folgende Klasse zu verwenden:

const Eigenschaften = {
    Breite: 100,
    Höhe: 50,
};

Klasse ButtonCreator {
    Konstruktor(Breite, Höhe) {
        Eigenschaften.Breite = Breite;
        Eigenschaften.Höhe = Höhe;
    }

    getWidth = () => Eigenschaften.Breite;
    getHeight = () => Eigenschaften.Höhe;
    setWidth = (Breite) => (Eigenschaften.width = Breite);
    setHeight = (Höhe) => (Eigenschaften.height = Höhe);
}
Konstante Schaltfläche = neuer ButtonCreator(600, 360);
konsole.log(button.getHeight()); // 360

Angenommen, die Eigenschaften sind öffentlich, Sie möchten sie aber in einer privaten Methode verwenden, bei der der Kontext auf ButtonCreator verweist. Dann können Sie dies folgendermaßen erreichen:

const privates = {
    berechneBreite() {
        gib diese Breite zurück;
    },
};

Klasse ButtonCreator {
    Konstruktor(Breite, Höhe) {
        diese.Breite = Breite;
        diese.höhe = Höhe;
    }

    getWidth = () => privates.calculateWidth.call(diese);
    getHeight = () => diese.Höhe;
    setWidth = (Breite) => (this.width = Breite);
    setHeight = (Höhe) => (this.height = Höhe);
}
Konstante Schaltfläche = neuer ButtonCreator(600, 360);
konsole.log(button.getHeight()); // 360

Der obige Code verwendet Function.prototype.call , das zum Aufrufen einer Funktion mit einem bestimmten Kontext verwendet wird. Im Beispiel wird der Kontext ButtonCreator verwendet.

Falls die private Funktion auch Parameter benötigt, können diese als zusätzliche Argumente an den Aufruf übergeben werden:

const privates = {
    berechneBreite(Prozent) {
        gib dies zurück.Breite * Prozent;
    },
};

Klasse ButtonCreator {
    Konstruktor(Breite, Höhe) {
        diese.Breite = Breite;
        diese.höhe = Höhe;
    }

    getWidth = () => privates.calculateWidth.call(diese, 0,1);
    getHeight = () => diese.Höhe;
    setWidth = (Breite) => (this.width = Breite);
    setHeight = (Höhe) => (this.height = Höhe);
}
Konstante Schaltfläche = neuer ButtonCreator(600, 360);
konsole.log(button.getWidth()); // 60

3. Nutzen Sie den ES2020-Vorschlag

Es befindet sich noch im experimentellen Entwurf von ES2020, der die Definition privater Methoden oder Eigenschaften einführt. Die Syntax ist seltsam und wird mit # vorangestellt.

Klasse ButtonCreator {
    #Breite;
    #Höhe;
    Konstruktor(Breite, Höhe) {
        dies.#width = Breite;
        dies.#Höhe = Höhe;
    }
    // Private Methode #calculateWidth() {
        gib dies zurück.#Breite;
    }

    getWidth = () => dies.#BerechneWidth();
    getHeight = () => diese.#Höhe;
    setWidth = (Breite) => (diese.#Breite = Breite);
    setHeight = (Höhe) => (diese.#Höhe = Höhe);
}
Konstante Schaltfläche = neuer ButtonCreator(600, 360);
console.log(button.width); // undefiniert
Konsole.log(Schaltfläche.getWidth()); // 600

4. Verwenden Sie WeakMap

Dieser Ansatz baut auf dem Closure-Ansatz auf, indem er den Ansatz mit Gültigkeitsbereichsvariablen verwendet, um eine private WeakMap <String, String> zu erstellen und dann diese WeakMap verwendet, um die damit verbundenen privaten Daten abzurufen. Dies ist schneller als der Ansatz mit Bereichsvariablen, da alle Instanzen eine WeakMap <String, String> gemeinsam nutzen können und die Methoden daher nicht bei jeder Erstellung einer Instanz neu erstellt werden müssen.

const ButtonCreator = (Funktion () {
    const privateProps = neue WeakMap();
    Klasse ButtonCreator {
        Konstruktor(Breite, Höhe, Name) {
            this.name = name; // Öffentliche Eigenschaften privateProps.set(this, {
                width, // Private Eigenschaft height, // Private Eigenschaft calculateWidth: () => privateProps.get(this).width, // Private Methode });
        }

        getWidth = () => privateProps.get(this).calculateWidth();
        getHeight = () => privateProps.get(diese).height;
    }
    ButtonCreator zurückgeben;
})();
Konstante Schaltfläche = neuer ButtonCreator(600, 360);
console.log(button.width); // undefiniert
Konsole.log(Schaltfläche.getWidth()); // 600

Dieser Ansatz ist für die Verwendung privater Methoden etwas umständlich.

5. Verwenden Sie TypeScript

Sie können TypeScript als eine Variante von JavaScript verwenden und mit dem Schlüsselwort private die Funktionalität objektorientierter Sprachen wirklichkeitsgetreu nachbilden.

Klasse ButtonCreator {
    private Breite: Zahl;
    private Höhe: Zahl;
    Konstruktor(Breite: Zahl, Höhe: Zahl) {
        diese.Breite = Breite;
        diese.höhe = Höhe;
    }
    private Breite berechnen() {
        gib diese Breite zurück;
    }
    public getWidth() {
        gib dies zurück.BerechneBreite();
    }
    öffentliche getHeight() {
        gib diese Höhe zurück;
    }
}
Konstante Schaltfläche = neuer ButtonCreator(600, 360);

Konsole.log(Schaltfläche.getWidth()); // 600
console.log(button.width); // Fehler TS2341: Die Eigenschaft „width“ ist privat und nur innerhalb der Klasse „ButtonCreator“ zugänglich.

Zusammenfassen:

Dies ist das Ende dieses Artikels zum Erstellen privater Mitglieder in JavaScript. Weitere Informationen zum Erstellen privater Mitglieder in JavaScript finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

Das könnte Sie auch interessieren:
  • Private Mitglieder in JavaScript erkunden
  • So implementieren Sie die Syntaxfunktionen privater Mitglieder und so implementieren Sie private Mitglieder basierend auf JavaScript
  • Private Member-Analyse in JavaScript
  • Private Mitglieder in JavaScript

<<:  Implementierungsmethode für HTML-Neun-Raster-Layouts

>>:  Was ist em? Einführung und Konvertierungsmethode von em und px

Artikel empfehlen

Zwei Möglichkeiten, HTML zu implementieren, um Inhaltspositionen zufällig zu verschieben

Test: Chrome v80.0.3987.122 ist normal Es gibt zw...

Zusammenfassung mehrerer häufig verwendeter String-Methoden in JavaScript (unbedingt lesenswert für Anfänger)

Mehrere häufig verwendete String-Methoden in Java...

So konfigurieren Sie SSL für den Koa2-Dienst

I. Einleitung 1: SSL-Zertifikat Mein Domänenname ...

So zeigen Sie Linux-SSH-Dienstinformationen und den Ausführungsstatus an

Es gibt viele Artikel zur SSH-Serverkonfiguration...

Verwendung der JavaScript-Sleep-Funktion

Inhaltsverzeichnis 1. Schlaffunktion 2. setTimeou...

Eine kurze Analyse der Verwendung der Coredump-Technologie zur Ermittlung der Ursache von Prozessabstürzen in Linux

Vor kurzem ist im Projekt ein Problem aufgetreten...

mysql5.6.zip-Format komprimierte Version Installations-Grafik-Tutorial

Vorwort: MySQL ist ein relationales Datenbankverw...

Zwei Möglichkeiten zum Aktivieren der Firewall im Linux-Dienst

Es gibt zwei Möglichkeiten: 1. Servicemethode Übe...

Ausführliche Diskussion über die automatische Inkrementierung von Primärschlüsseln in MySQL

Inhaltsverzeichnis Merkmale Erhaltungsstrategie B...

Javascript-Grundlagen: Detaillierte Erklärung der Operatoren und der Flusskontrolle

Inhaltsverzeichnis 1. Betreiber 1.1 Arithmetische...

Analyse der Informationsarchitektur von Facebook

<br />Original: http://uicom.net/blog/?p=762...

Docker-Installation und Bereitstellung einer Analyse des Net Core-Implementierungsprozesses

1. Docker-Installation und -Einstellungen #Instal...

Codebeispiel für die Linux-SSH-Serverkonfiguration

Verwenden Sie den folgenden Terminalbefehl, um de...

So vermeiden Sie die Duplizierung von Daten beim Einfügen in einen MySql-Batch

Inhaltsverzeichnis Vorwort 1. Einfügen von ignore...

Implementierung der Anmeldeseite des tatsächlichen Kampfprotokolls von Vue

Inhaltsverzeichnis 1. Vorbereitende Maßnahmen 1.1...