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!