Vorwort: Aber wie erreichen Sie eine ähnliche Funktionalität in JavaScript? Es gibt kein reserviertes Schlüsselwort 1. Verwende ClosuresClosures 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-KlassenUm 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 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 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-VorschlagEs 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 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 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:
|
<<: Implementierungsmethode für HTML-Neun-Raster-Layouts
>>: Was ist em? Einführung und Konvertierungsmethode von em und px
Ich werde die Probleme aufzeichnen, die während d...
In den meisten Anwendungsszenarien müssen wir wic...
Vorwort: Die am häufigsten verwendete Architektur...
Die Pseudoklasse „Before/After“ entspricht dem Ei...
Der ECS-Cloud-Server, der mit dem historischen Li...
Inhaltsverzeichnis 1. Laden Sie die WeChat-Entwic...
Meta-Tag-Funktion Der META-Tag ist ein Schlüsselt...
Vorwort Manchmal habe ich das Gefühl, dass die na...
Die in Baidu-Interviews gestellten Fragen müssen ...
Die beiden Parameter innodb_flush_log_at_trx_comm...
Die Betriebsumgebung dieses Tutorials: Windows 7-...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...
Keepalived-Installation: cd <keepalived_source...
Grundlegende Syntax der Tabelle <table>...&l...
Laden Sie zuerst die Version 15.1 von VMware Work...