Implementierung privater Variablen in JavaScript

JavaScript, die Programmiersprache, die das World Wide Web ermächtigt, ist seit seiner Gründung von Brendan Eich im Mai 1995 zu einer weit verbreiteten und vielseitigen Technologie geworden. Trotz seines Erfolgs wurde auch erhebliche Kritik erhalten, insbesondere einige Funktionen. Beispielsweise wird ein Objekt in eine Zeichenfolge gegossen, wenn sie als Index verwendet wird, 1 == "1" gibt true oder das berüchtigte Verwirrung this Schlüsselworts. Ein besonders interessantes Merkmal ist jedoch die Existenz verschiedener Techniken, die eine variable Privatsphäre implementieren.

Derzeit gibt es keine Möglichkeit, in JavaScript direkt private Variablen zu erstellen. In anderen Sprachen können Sie private Schlüsselwörter oder doppelte Unterstriche verwenden, und alles funktioniert gut. In JavaScript bietet variable Privatsphäre jedoch Funktionen, die den aufkommenden Merkmalen der Sprache ähnlicher werden als die erwartete Funktionalität. Lassen Sie uns zunächst den Hintergrund unserer Frage vorstellen.

var Schlüsselwort

Bis 2015 gab es im Grunde nur eine Möglichkeit, Variablen zu erstellen, und das war das var -Schlüsselwort. var ist Funktionsabschluss, was bedeutet, dass mit diesem Schlüsselwort instanziiertes Variablen nur durch Code innerhalb der Funktion zugegriffen werden kann. In dem Fall, in dem die Funktion extern oder im Wesentlichen "global" ist, ist die Variable durch alles zugänglich, was nach der Definition der Variablen ausgeführt wird. Wenn Sie versuchen, vor seiner Definition auf die Variable im selben Bereich zugreifen zu können, erhalten Sie undefined anstelle eines Fehlers. Dies liegt an der "Upgrade" -D -Art des var -Schlüsselworts.

 // Definieren Sie "a" im globalen Bereich
var a = 123;

// "B" im Funktionsbereich definieren
(function () {
  console.log (b); // => Aufgrund der Promotion wird "undefiniert" anstelle eines Fehlers zurückgegeben.
  var b = 456;
}) ();

console.log (a); // => 123
console.log (b); // löst eine "ReferenzError" -Ausnahme aus, da auf "B" nicht von außerhalb des Funktionsbereichs zugegriffen werden kann.

Die Geburt von ES6 -Variablen

Im Jahr 2015 wurde ES6/ES2015 offiziell veröffentlicht und gefolgt von zwei neuen variablen Schlüsselwörtern: let und const . Beide sind blockgeschützt, was bedeutet, dass mit diesen Schlüsselwörtern erstellte Variablen durch alles innerhalb desselben Klammerns zugegriffen werden können. Gleich wie var , aber let und const -Variablen können nicht auf außerhalb von Blockzahlen zugegriffen werden, z. B. Schleifen, Funktionen, wenn Anweisungen, Klammern usw.

 const a = 123;

// Block -Scope -Beispiel Nr. 1 blockieren
if (wahr) {
  const b = 345;
}

// Blocke Scope Beispiel 2
{
  const c = 678;
}

console.log (a); // 123
console.log (b); // wirft "ReferenzError" aus, da "B" nicht von außerhalb des Blockbereichs zugegriffen werden kann.
console.log (c); // wirft "ReferenzError" aus, da "B" nicht von außerhalb des Blockbereichs zugegriffen werden kann.

Da Code außerhalb des Geltungsbereichs keine Variablen zugreifen kann, erhalten wir die Entstehung von Privatsphäre. Wir werden einige Techniken einführen, um es auf unterschiedliche Weise zu implementieren.

Funktionen verwenden

Da Funktionen in JavaScript auch Blöcke sind, funktionieren alle variablen Schlüsselwörter mit ihnen. Darüber hinaus können wir ein sehr nützliches Designmuster namens "Modul" implementieren.

Moduldesignmodus

Google ist auf das Oxford -Wörterbuch angewiesen, um "Module" zu definieren:

Das Programm kann daraus konstruieren oder eine Reihe verschiedener, aber miteinander verbundener Einheiten komplexer Aktivitäten analysieren.

- "Modul" Definition 1.2

Das Modul -Design -Muster ist in JavaScript sehr nützlich, da es öffentliche und private Komponenten kombiniert und es uns ermöglicht, Programme in kleinere Komponenten aufzuteilen, wodurch nur auf das ausgelegt wird, auf welchen anderen Programmteil ein anderer Programmteil über einen Prozess zugreifen sollte, der als "Kapselung" bezeichnet wird. Auf diese Weise enthüllen wir nur, was wir verwenden müssen, um das zu verwenden, was wir nicht sehen müssen. Wir können dies tun, indem wir den Funktionsumfang nutzen.

 const carmodule = () => {
  lass MilesDiven = 0;
  Sei Speed ​​= 0;

  const Accelerate = (Menge) => {
    Geschwindigkeit = Menge;
    Meilendriven = Geschwindigkeit;
  }

  const getMilesDiven = () => Meilenswährung;

  // Verwenden des Schlüsselworts "Rückgabe" können Sie steuern, welche Inhalte ausgesetzt sind und welcher Inhalt versteckt ist. In diesem Fall enthüllen wir nur die Funktionen Accelerate () und GetMilesDiven ().
  zurückkehren {
    beschleunigen,
    GetMilesDiven
  }
};

const TestCarmodule = carmodule ();
TestCarmodule.Akhelate (5);
TestCarmodule.Akhelate (4);
console.log (testcarmodule.getMilesDiven ());

Auf diese Weise können wir Kilometerleistung und Beschleunigung erhalten, aber da der Benutzer in diesem Fall keine Zugriffsgeschwindigkeit benötigt, können wir sie verbergen, indem wir nur accelerate() und getMilesDriven() -Methoden freilegen. Im Wesentlichen ist speed eine private Variable, da sie nur mit Code im selben Bereich zugegriffen werden kann. Die Vorteile privater Variablen werden in diesem Fall klar. Wenn Sie die Möglichkeit löschen, auf Variablen, Funktionen oder andere interne Komponenten zuzugreifen, reduzieren Sie die Oberfläche, die von anderen von anderen fälschlicherweise von anderen verwendet wird, die nicht hätten verwendet werden sollen.

Ein anderer Weg

In diesem zweiten Beispiel werden Sie das Hinzufügen this Schlüsselworts bemerken. Es gibt einen Unterschied zwischen der ES6 -Pfeilfunktion (=>) und der traditionellen Funktion () {}. Mit function können Sie this verwenden, die an die Funktion selbst binden, und die Pfeilfunktion erlaubt nicht die Verwendung eines Typs this Schlüsselworts. Beide sind ebenso effektive Möglichkeiten, Module zu erstellen. Die Kernidee besteht darin, die Teile offenzulegen, auf die zugegriffen werden sollte, und andere Teile beibehalten, mit denen nicht interagiert werden sollte. Daher gibt es sowohl öffentliche als auch private Daten.

 Funktion carmodule () {
  lass MilesDiven = 0;
  Sei Speed ​​= 0;

  // In diesem Fall verwenden wir stattdessen das Schlüsselwort "This",
  // Es bezieht sich auf Carmodule
  this.accelerate = (Menge) => {
    Geschwindigkeit = Menge;
    Meilendriven = Geschwindigkeit;
  }

  this.getMilesDiven = () => meilenswähre;
}

const testcarmodule = new carmodule ();
TestCarmodule.Akhelate (5);
TestCarmodule.Akhelate (4);
console.log (testcarmodule.getMilesDiven ());

ES6 -Klasse

Klassen sind ein weiteres neues Feature in ES6. Klassen sind im Wesentlichen syntaktischen Zucker - mit anderen Worten immer noch eine Funktion, können ihn aber in eine leichter ausdrückliche Form "verschönern". Für Klassen ist die variable Privatsphäre (ab sofort) nahezu unmöglich, es sei denn, es werden einige wichtige Änderungen am Code vorgenommen.

Schauen wir uns ein Beispiel einer Klasse an.

 Klassenkarmodule {
  /*
    Meilendriven = 0;
    Geschwindigkeit = 0;
  */
  constructor () {
    this.milesDiven = 0;
    this.speed = 0;
  }
  beschleunigen (Betrag) {
    this.speed = Menge;
    this.milesDiven = this.speed;
  }
  getMilesDiven () {
    kehre dies zurück.
  }
}

const testcarmodule = new carmodule ();
TestCarmodule.Akhelate (5);
TestCarmodule.Akhelate (4);
console.log (testcarmodule.getMilesDiven ());

Das erste, was zu beachten ist, ist, dass sich milesDriven und speed in constructor() befinden. Beachten Sie, dass Sie auch Variablen außerhalb des Konstruktors definieren können (wie in den Code -Kommentaren gezeigt), aber trotzdem funktional gleich. Das Problem ist, dass diese Variablen öffentlich sind und von Elementen außerhalb der Klasse zugegriffen werden können.

Schauen wir uns einige Lösungen für dieses Problem an.

Verwenden Sie Untersteuerung

In Situationen, in denen Privatsphäre dazu besteht, Kollaborateure katastrophale Fehler zu machen, reicht ein Unterstrich (_) als variables Präfix, obwohl er nach außen immer noch "sichtbar" ist, ausreicht, um den Entwickler zu signalisieren: "Berühren Sie diese Variable nicht". Zum Beispiel haben wir jetzt Folgendes:

 // Dies ist der neue Konstruktor der Klasse. Beachten Sie, dass es auch als der folgende Inhalt außerhalb des Konstruktors () dargestellt werden kann.
/*
  _milesDiven = 0;
  _speed = 0;
*/
constructor () {
  this._milesdiven = 0;
  this._speed = 0;
}

Dies funktioniert zwar für seine spezifischen Anwendungsfälle, aber es ist immer noch sicher zu sagen, dass es in vielerlei Hinsicht nicht ideal ist. Sie können weiterhin auf die Variablen zugreifen , müssen jedoch auch den variablen Namen ändern.

Geben Sie alles in den Konstruktor ein

Technisch gesehen gibt es in der Tat eine Möglichkeit, private Variablen in einer Klasse zu verwenden, nämlich alle Variablen und Methoden in constructor() . Schauen wir uns an.

 Klassenkarmodule {
  constructor () {
    lass MilesDiven = 0;
    Sei Speed ​​= 0;

    this.accelerate = (Menge) => {
      Geschwindigkeit = Menge;
      Meilendriven = Geschwindigkeit;
    }

    this.getMilesDiven = () => meilenswähre;
  }
}

const testcarmodule = new carmodule ();
TestCarmodule.Akhelate (5);
TestCarmodule.Akhelate (4);
console.log (testcarmodule.getMilesDiven ());
console.log (testcarmodule.speed); // undefiniert - Wir haben jetzt eine echte variable Privatsphäre.

Dieser Ansatz implementiert echte variable Privatsphäre, da kein direkter Zugriff auf eine Variable besteht, die nicht absichtlich offengelegt wird. Das Problem ist, dass wir jetzt im Vergleich zu unseren keinen sehr guten Code aussehen, und es bricht auch die Vorteile von Syntaxzucker, wenn wir Klassen verwenden. Zu diesem Zeitpunkt können wir auch function() -Methode verwenden.

Verwenden von Schwächen

Es gibt auch eine kreativere Möglichkeit, private Variablen zu erstellen, nämlich die Verwendung WeakMap() . Während es der Map ähnlich klingt, sind die beiden sehr unterschiedlich. Während das Mapping jede Art von Wert als Schlüssel annehmen kann, akzeptiert WeakMap nur Objekte und löscht die Werte in WeakMap wenn der Müll Objektschlüssel sammelt. Zusätzlich kann WeakMap nicht itieren, was bedeutet, dass Sie auf einen Verweis auf den Objektschlüssel zugreifen müssen, um auf den Wert zuzugreifen. Dies macht es sehr nützlich, um private Variablen zu erstellen, da Variablen tatsächlich unsichtbar sind.

 Klassenkarmodule {
  constructor () {
    this.data = neuer schwach ();
    this.data.set (this, {
      Milesdiven: 0,,
      Geschwindigkeit: 0
    });
    this.getMilesDiven = () => that.data.get (this) .milesDiven;
  }

  beschleunigen (Betrag) {
    // In dieser Version erstellen wir stattdessen eine Schwachung und // verwenden das Schlüsselwort "dieses" als Schlüssel, was unwahrscheinlich ist // wird versehentlich als Schlüssel für die Schwächen verwendet.
    const data = this.data.get (this);
    const speed = data.speedmenge;
    const milesdiven = data.milesDiven data.speed;
    this.data.set ({speed, milesdiven});
  }

}

const testcarmodule = new carmodule ();
TestCarmodule.Akhelate (5);
TestCarmodule.Akhelate (4);
console.log (testcarmodule.getMilesDiven ());
console.log (testcarmodule.data); // => schwedmap {[Elemente unbekannt]} - Diese Daten können nicht einfach von außen zugegriffen werden!

Diese Lösung ist gut darin, die versehentliche Verwendung von Daten zu verhindern, ist jedoch nicht wirklich privat, da sie weiterhin von außen zugegriffen werden kann, indem this durch CarModule ersetzt wird. Darüber hinaus fügt es eine gewisse Komplexität hinzu und ist daher nicht die eleganteste Lösung.

Verwenden Sie Symbole, um Konflikte zu verhindern

Wenn es darum geht, Namenskonflikte zu verhindern, können Sie Symbol verwenden, um eine nützliche Lösung bereitzustellen. Dies sind im Wesentlichen Fälle, die als eindeutige Werte fungieren können, und sie werden niemals einen anderen Wert außer seiner eigenen einzigartigen Instanz entsprechen. Hier ist ein Beispiel dafür in realen Anwendungen:

 Klassenkarmodule {
  constructor () {
    this.speedkey = symbol ("speedKey");
    this.milesdivenKey = symbol ("milesdivenKey");
    this [this.speedkey] = 0;
    this [this.MilesDivenKey] = 0;
  }

  beschleunigen (Betrag) {
    // Diese Daten sind fast unmöglich, unerwartet zugreifen zu können. Es ist keineswegs privat.
    // aber es bleibt sich von jedem fern, der dieses Modul implementiert.
    this [this.speedkey] = Menge;
    this [this.milesDivenKey] = this [this.speedKey];
  }

  getMilesDiven () {
    zurückgeben [this.MilesDivenKey];
  }
}

const testcarmodule = new carmodule ();
TestCarmodule.Akhelate (5);
TestCarmodule.Akhelate (4);
console.log (testcarmodule.getMilesDiven ());
console.log (testcarmodule.speed); // => undefiniert - Wir müssen auf den internen Schlüssel zugreifen, um auf die Variable zuzugreifen.

Wie die Unterstrichlösung beruht dieser Ansatz mehr oder weniger auf die Benennung von Konventionen, um Verwirrung zu verhindern.

TC39 Private Class -Feldvorschlag

Vor kurzem wurde ein neuer Vorschlag vorgeschlagen, der der Klasse private Variablen einführen würde. Es ist einfach: Bereiten Sie den variablen Namen vor und es wird privat. Es sind keine zusätzlichen strukturellen Änderungen erforderlich.

 Klassenkarmodule {
  #speed = 0
  #MilesDiven = 0

  beschleunigen (Betrag) {
    // Diese Daten sind fast unmöglich, unerwartet zugreifen zu können.
    Dies.#Speed ​​= Menge;
    Dies.#meilendierte = Geschwindigkeit;
  }

  getMilesDiven () {
    gib dies zurück.#Milesdiven;
  }
}

const testcarmodule = new carmodule ();
TestCarmodule.Akhelate (5);
TestCarmodule.Akhelate (4);
console.log (testcarmodule.getMilesDiven ());
console.log (testcarmodule.speed); // => undefiniert - Wir müssen auf den internen Schlüssel zugreifen, um auf die Variable zuzugreifen.

Private Klasse -Funktionen sind Wirklichkeit geworden und haben ziemlich gute Browserunterstützung.

abschließend

Dies ist eine Zusammenfassung der verschiedenen Möglichkeiten zur Implementierung privater Variablen in JavaScript. Es gibt keinen "richtigen" Ansatz. Diese Methoden eignen sich für unterschiedliche Anforderungen, vorhandene Codebasis und andere Einschränkungen. Während jeder Ansatz seine Vor- und Nachteile hat, sind alle Ansätze letztendlich gleich wirksam, solange sie Ihr Problem effektiv lösen.

Danke fürs Lesen! Ich hoffe, dies gibt Ihnen einen Einblick in die Anwendung des Umfangs und der variablen Privatsphäre, um Ihren JavaScript -Code zu verbessern. Dies ist eine leistungsstarke Technologie, die viele verschiedene Methoden unterstützt und Ihren Code erleichtert und fehlerfrei ist. Probieren Sie selbst einige neue Beispiele aus, um ein besseres Gefühl zu bekommen.

Das obige ist der detaillierte Inhalt vonImplementierung privater Variablen in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!