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

Was ist der Unterschied zwischen HTM und HTML? Was ist der Unterschied zwischen HTM und HTML?

Während ich Webdesign lernte, habe ich mich nicht...

Es wird nicht empfohlen, den Inhalt in Word direkt in den Editor auf der Website zu kopieren.

<br />Frage: Warum ist es nicht empfehlenswe...

52 SQL-Anweisungen, die Ihnen Leistungsoptimierung beibringen

1. Um die Abfrage zu optimieren, sollten Sie voll...

Webseiten in Schwarzweiß umwandeln (kompatibel mit Google, Firefox, IE und anderen Browsern)

In die CSS-Datei schreiben Code kopieren Der Code ...

So erstellen Sie ein Docker-Repository mit Nexus

Das mit dem offiziellen Docker-Register erstellte...

CSS erzielt einen proportionalen Anzeigeeffekt eines Elements mit fester Höhe und Breite

Durch die Verwendung des prozentualen Padding-Top...

Tutorial zur Docker-Installation in einer Linux-Umgebung

1. Installationsumgebung Docker unterstützt die f...

Docker-Installation Tomcat Dubbo-Admin-Instanz-Kenntnisse

1. Laden Sie das Tomcat-Image herunter Docker zie...

Tutorial zur MySQL-Installation in der Linux-CentOS7-Umgebung

Detaillierte Einführung in die Schritte zur Insta...

Beschreiben Sie kurz die MySQL InnoDB-Speicher-Engine

Vorwort: Die Speicher-Engine ist der Kern der Dat...

So ändern Sie die Längenbeschränkung von group_concat in MySQL

In MySQL gibt es eine Funktion namens „group_conc...

So deaktivieren Sie die Überprüfung auf Fremdschlüsseleinschränkungen in untergeordneten MySQL-Tabellen

Vorbereiten: Definieren Sie eine Lehrertabelle un...

ElementUI implementiert kaskadierenden Selektor

In diesem Artikelbeispiel wird der spezifische Co...

So führen Sie ein Projekt mit Docker aus

1. Geben Sie das Verzeichnis ein, in dem Ihr Proj...

JS verwendet Canvas-Technologie, um Echarts-Balkendiagramme zu imitieren

Canvas ist ein neues Tag in HTML5. Sie können js ...