ES6 führt Klassen für JavaScript ein, aber für komplexe Anwendungen k?nnen sie zu einfach sein. Klassenfelder (auch als Klasse -Attribut bekannt) sind so konzipiert, dass Konstruktoren mit privaten und statischen Mitgliedern vereinfacht werden. Der Vorschlag erfolgt derzeit in TC39 Phase 3: Kandidatenstufe und wird wahrscheinlich zu ES2019 (ES10) hinzugefügt. Node.js 12, Chrome 74 und Babel unterstützen derzeit private Felder. Bevor wir verstehen, wie Klassenfelder implementiert werden, ist es nützlich, die ES6 -Klasse zu überprüfen. Dieser Artikel wurde im Jahr 2020 aktualisiert. Für ein umfassenderes JavaScript-Wissen finden Sie unser Buch "JavaScript: From Newbie zu Ninja, Second Edition".

Schlüsselpunkte

• ES6 führt Klassen für JavaScript ein, aber für komplexe Anwendungen k?nnen sie zu einfach sein. Die Klassenfelder von ES2019 sollen den Konstruktor mit privaten und statischen Mitgliedern vereinfachen, die zu ES2019 (ES10) hinzugefügt werden k?nnen.
• Die Implementierung der neuen Klassenfelde erm?glicht die Initialisierung ?ffentlicher Eigenschaften au?erhalb eines jeden Konstruktors oben in der Klasse. Wenn der Konstruktor noch ben?tigt wird, wird der Initialisierer vor seiner Ausführung ausgeführt.
• Die Klassenfelder in ES2019 erm?glichen es, dass private Klassenfelder mit einem Hash# -Prefix deklariert werden. Dies macht das Feld nur in den inneren Methoden der Klasse zug?nglich, nicht von au?erhalb der Klasse.
• Die Verwendung von # zur Darstellung der Privatsph?re in Klassenfeldern wurde kritisiert, vor allem, weil es nicht so intuitiv ist wie private Schlüsselw?rter. Das # Symbol ist jedoch au?erhalb der Klassendefinition ungültig und stellt sicher, dass die privaten Felder privat bleiben.
• Der unmittelbare Nutzen von ES2019 -Klassenfeldern ist der Cleaner React -Code. Sie k?nnen als Funktion unter Verwendung des ES6 = & GT zugewiesen werden;

es6 Kategorie -Grundlagen

Entwickler aus Sprachen wie C, C#, Java und PHP k?nnen durch das objektorientierte Vererbungsmodell von JavaScript verwechselt werden. Daher führte ES6 die Klasse ein. Sie sind haupts?chlich syntaktischer Zucker, bieten aber ein vertrauteres Konzept der objektorientierten Programmierung. Eine Klasse ist eine Objektvorlage , die definiert, wie Objekte dieses Typs sich verhalten. Die folgende Tierklasse definiert allgemeine Tiere (Klassen werden normalerweise in anf?nglichen Gro?buchstaben dargestellt, um sie von Objekten und anderen Typen zu unterscheiden):

class Animal {

  constructor(name = 'anonymous', legs = 4, noise = 'nothing') {

    this.type = 'animal';
    this.name = name;
    this.legs = legs;
    this.noise = noise;

  }

  speak() {
    console.log(`${this.name} says "${this.noise}"`);
  }

  walk() {
    console.log(`${this.name} walks on ${this.legs} legs`);
  }

}

Klassenerkl?rungen werden immer im strengen Modus ausgeführt. Keine Notwendigkeit, "Strikte" hinzuzufügen. Konstruktormethode wird ausgeführt, wenn ein Objekt vom Typ Tier erstellt wird. Es setzt normalerweise erste Eigenschaften und behandelt andere Initialisierungen. Speak () und Walk () sind Instanzmethoden, die mehr Funktionen hinzufügen. Sie k?nnen jetzt das neue Schlüsselwort verwenden, um Objekte aus dieser Klasse zu erstellen:

let rex = new Animal('Rex', 4, 'woof');
rex.speak();          // Rex says "woof"
rex.noise = 'growl';
rex.speak();          // Rex says "growl"

Getter und Setter

Setter ist eine spezielle Methode, die nur zum Definieren von Werten verwendet wird. In ?hnlicher Weise ist Getter nur eine spezielle Methode für Rückgabewerte. Zum Beispiel:

class Animal {

  constructor(name = 'anonymous', legs = 4, noise = 'nothing') {

    this.type = 'animal';
    this.name = name;
    this.legs = legs;
    this.noise = noise;

  }

  speak() {
    console.log(`${this.name} says "${this.noise}"`);
  }

  walk() {
    console.log(`${this.name} walks on ${this.legs} legs`);
  }

  // setter
  set eats(food) {
    this.food = food;
  }

  // getter
  get dinner() {
    return `${this.name} eats ${this.food || 'nothing'} for dinner.`;
  }

}

let rex = new Animal('Rex', 4, 'woof');
rex.eats = 'anything';
console.log( rex.dinner );  // Rex eats anything for dinner.

Unterklasse oder Unterklasse

Es ist normalerweise m?glich, eine Klasse als Basisklasse für eine andere zu verwenden. Die menschliche Klasse kann alle Eigenschaften und Methoden in der Tierklasse unter Verwendung des Extends -Schlüsselworts erben. Eigenschaften und Methoden k?nnen nach Bedarf hinzugefügt, entfernt oder ge?ndert werden, um menschliche Objekte einfacher und klarer zu erstellen:

class Animal {

  constructor(name = 'anonymous', legs = 4, noise = 'nothing') {

    this.type = 'animal';
    this.name = name;
    this.legs = legs;
    this.noise = noise;

  }

  speak() {
    console.log(`${this.name} says "${this.noise}"`);
  }

  walk() {
    console.log(`${this.name} walks on ${this.legs} legs`);
  }

}

Super bezieht sich auf die übergeordnete Klasse, daher ist es normalerweise der erste Anruf im Konstruktor. In diesem Beispiel überschreibt die Methode des menschlichen Speak () die im Tier definierte Methode. Jetzt k?nnen Sie eine Instanz des menschlichen Objekts erstellen:

let rex = new Animal('Rex', 4, 'woof');
rex.speak();          // Rex says "woof"
rex.noise = 'growl';
rex.speak();          // Rex says "growl"

statische Methoden und Eigenschaften

Das Definieren von Methoden mit statischen Schlüsselw?rtern erm?glicht es, eine Klasse aufgerufen zu werden, ohne eine Objektinstanz zu erstellen. Betrachten Sie Math.PI -Konstanten: Es ist nicht erforderlich, ein Mathematikobjekt zu erstellen, bevor Sie auf PI -Eigenschaften zugreifen. ES6 unterstützt nicht dieselben statischen Eigenschaften wie andere Sprachen, aber die Klassendefinition selbst k?nnen Eigenschaften hinzugefügt werden. Zum Beispiel kann die menschliche Klasse angepasst werden, um die Z?hlung davon zu behalten, wie viele menschliche Objekte erstellt wurden:

class Animal {

  constructor(name = 'anonymous', legs = 4, noise = 'nothing') {

    this.type = 'animal';
    this.name = name;
    this.legs = legs;
    this.noise = noise;

  }

  speak() {
    console.log(`${this.name} says "${this.noise}"`);
  }

  walk() {
    console.log(`${this.name} walks on ${this.legs} legs`);
  }

  // setter
  set eats(food) {
    this.food = food;
  }

  // getter
  get dinner() {
    return `${this.name} eats ${this.food || 'nothing'} for dinner.`;
  }

}

let rex = new Animal('Rex', 4, 'woof');
rex.eats = 'anything';
console.log( rex.dinner );  // Rex eats anything for dinner.

Der statische Z?hler der

-Klasse gibt die Anzahl der Menschen entsprechend zurück:

class Human extends Animal {

  constructor(name) {

    // 調(diào)用Animal構(gòu)造函數(shù)
    super(name, 2, 'nothing of interest');
    this.type = 'human';

  }

  // 重寫Animal.speak
  speak(to) {

    super.speak();
    if (to) console.log(`to ${to}`);

  }

}

ES2019 Klassenfelder ( neu )

Die Implementierung der neuen Klassenfelde erm?glicht die Initialisierung ?ffentlicher Eigenschaften au?erhalb eines jeden Konstruktors oben in der Klasse:

let don = new Human('Don');
don.speak('anyone');        // Don says "nothing of interest" to anyone

don.eats = 'burgers';
console.log( don.dinner );  // Don eats burgers for dinner.

Dies entspricht:

class Human extends Animal {

  constructor(name) {

    // 調(diào)用Animal構(gòu)造函數(shù)
    super(name, 2, 'nothing of interest');
    this.type = 'human';

    // 更新Human對象的計數(shù)
    Human.count++;

  }

  // 重寫Animal.speak
  speak(to) {

    super.speak();
    if (to) console.log(`to ${to}`);

  }

  // 返回人類對象的個數(shù)
  static get COUNT() {
    return Human.count;
  }

}

// 類的靜態(tài)屬性本身 - 不是其對象
Human.count = 0;

Wenn Sie den Konstruktor noch ben?tigen, wird der Initialisierer vor dem Ausführen ausgeführt.

Static Class Field

Im obigen Beispiel werden dem Klassendefinitionsobjekt nach der Definition des Klassenobjekts statische Eigenschaften auf unelegante Weise hinzugefügt. Sie müssen keine Klassenfelder verwenden:

console.log(`Humans defined: ${Human.COUNT}`); // Humans defined: 0

let don = new Human('Don');

console.log(`Humans defined: ${Human.COUNT}`); // Humans defined: 1

let kim = new Human('Kim');

console.log(`Humans defined: ${Human.COUNT}`); // Humans defined: 2

Dies entspricht:

class MyClass {

  a = 1;
  b = 2;
  c = 3;

}

FALTSUMPRISSE -Klassenfeld

Alle Attribute in der Klasse

ES6 sind standardm??ig ?ffentlich und k?nnen au?erhalb der -Klasse überprüft oder ge?ndert werden. Im obigen Tierbild kann nichts verhindern, dass das Nahrungsmitteleigenschaften das ESS -Setter annimmt:

class MyClass {

  constructor() {
    this.a = 1;
    this.b = 2;
    this.c = 3;
  }

}

Andere Sprachen erm?glichen normalerweise eine Erkl?rung privater Attribute. Dies ist in ES6 nicht m?glich, daher verwenden Entwickler h?ufig Unterstriche (_propertyName), Schlie?ungen, Symbole oder Schw?chen, um dieses Problem zu l?sen. Der Unterstrich gibt Entwicklern einen Hinweis, aber nichts kann sie daran hindern, auf die Immobilie zuzugreifen. In der ES2019 werden private Klassenfelder mit Hash# Pr?fix definiert:

class MyClass {

  x = 1;
  y = 2;
  static z = 3;

}

console.log( MyClass.z ); // 3

Bitte beachten Sie, dass private Methoden, Getter oder Setter nicht definiert werden k?nnen. TC39 Phase 3: Entwurfsvorschlag empfiehlt die Verwendung eines Hash# -Pr?fixs für Namen, der in Babel implementiert ist. Zum Beispiel:

class MyClass {

  constructor() {
    this.x = 1;
    this.y = 2;
  }

}

MyClass.z = 3;

console.log( MyClass.z ); // 3

Sofort profitieren: besserer React -Code!

reag -Komponenten haben normalerweise Methoden, die an DOM -Ereignisse gebunden sind. Um sicherzustellen, dass dies eine Komponente aufl?st, müssen jede Methode entsprechend binden. Zum Beispiel:

class Animal {

  constructor(name = 'anonymous', legs = 4, noise = 'nothing') {

    this.type = 'animal';
    this.name = name;
    this.legs = legs;
    this.noise = noise;

  }

  set eats(food) {
    this.food = food;
  }

  get dinner() {
    return `${this.name} eats ${this.food || 'nothing'} for dinner.`;
  }

}

let rex = new Animal('Rex', 4, 'woof');
rex.eats = 'anything';      // 標(biāo)準(zhǔn)setter
rex.food = 'tofu';          // 完全繞過eats setter
console.log( rex.dinner );  // Rex eats tofu for dinner.

Wenn INCCOUNT als ES2019 -Klassenfeld definiert ist, kann es als Funktion unter Verwendung des ES6 = & GT zugewiesen werden, der automatisch an das Definitionsobjekt gebunden ist. Keine Bindungsanweisung hinzufügen:

class MyClass {

  a = 1;          // .a是公共的
  #b = 2;         // .#b是私有的
  static #c = 3;  // .#c是私有的和靜態(tài)的

  incB() {
    this.#b++;
  }

}

let m = new MyClass();

m.incB(); // 運行正常
m.#b = 0; // 錯誤 - 私有屬性不能在類外部修改

Klassenfeld: Verbessert?

Die Definition der ES6 -Klasse ist zu einfach. ES2019-Klassenfelder erfordern weniger Code, verbessern die Lesbarkeit und implementieren einige interessante M?glichkeiten für objektorientierte Programmierung. Die Verwendung von # bedeutet, dass Privatsph?re Kritik erhalten hat, vor allem, weil es h?sslich ist und sich wie eine F?higkeit anfühlt. Die meisten Sprachen implementieren das private Schlüsselwort. Der Versuch, dieses Mitglied au?erhalb der Klasse zu verwenden, wird vom Compiler abgelehnt. JavaScript wird interpretiert. Betrachten Sie den folgenden Code:

class Animal {

  constructor(name = 'anonymous', legs = 4, noise = 'nothing') {

    this.type = 'animal';
    this.name = name;
    this.legs = legs;
    this.noise = noise;

  }

  speak() {
    console.log(`${this.name} says "${this.noise}"`);
  }

  walk() {
    console.log(`${this.name} walks on ${this.legs} legs`);
  }

}

Dies wird einen Laufzeitfehler in die letzte Zeile werfen, aber es ist nur eine ernsthafte Folge des Versuchs, die Eigenschaft festzulegen. JavaScript ist absichtlich tolerant, und ES5 erm?glicht die ?nderung von Eigenschaften in jedem Objekt. Obwohl ungeschickt, ist das # Symbol au?erhalb der Klassendefinition ungültig. Der Versuch, auf MyObject zuzugreifen.#Secret kann einen Syntaxfehler werfen. Diese Debatte wird fortgesetzt, aber Klassenfelder werden bereits in mehreren JavaScript -Motoren wie oder nicht übernommen. Sie werden weiterhin existieren.

FAQs (FAQs) über JavaScript private Klassenfelder

Was sind die Vorteile der Verwendung von Feldern für private Klassen von JavaScript?

private Klassenfelder in JavaScript bieten eine M?glichkeit, Daten in einer Klasse zu verk?rpern oder auszublenden, n?mlich das Grundprinzip der objektorientierten Programmierung. Diese Einkapselung stellt sicher, dass der interne Zustand eines Objekts nur durch eine explizit definierte Klasse ge?ndert werden kann. Dies macht den Code robuster und vorhersehbarer, da er verhindert, dass externer Code den Zustand des Objekts versehentlich auf unerwartete Weise ge?ndert hat. Darüber hinaus k?nnen private Felder dazu beitragen, die Schnittstelle der Klassen zu vereinfachen, da sie die Anzahl der Eigenschaften und Methoden reduzieren, die der Au?enwelt ausgesetzt sind.

Wie deklariere ich private Klassenfelder in JavaScript?

In JavaScript werden private Klassenfelder vor dem Feldname ein Hash (#) -Symbol hinzugefügt. Um beispielsweise ein privates Feld mit dem Namen "Wert" in einer Klasse zu deklarieren, k?nnen Sie einen #Value schreiben. Dieses Feld kann dann nur in den inneren Methoden der Klasse zugegriffen werden, nicht von au?erhalb der Klasse.

Kann ich von au?erhalb der Klasse auf private Klassenfelder zugreifen?

Nein, private Klassenfelder in JavaScript k?nnen nicht von au?erhalb der Klasse zugegriffen werden. Dies geschieht im Entwurf, da eine der Hauptnutzungen privater Felder darin besteht, interne Daten aus der Au?enwelt zu verbergen. Wenn Sie versuchen, von au?erhalb der Klasse auf ein privates Feld zugreifen zu k?nnen, werfen JavaScript einen Syntaxfehler.

Kann ich private Klassenfelder mit ?ffentlichen Feldern verwenden?

Ja, JavaScript -Klassen k?nnen sowohl private als auch ?ffentliche Bereiche haben. ?ffentliche Bereiche werden genauso deklariert wie private Felder, haben jedoch kein Hash (#) -Prefix. Im Gegensatz zu privaten Feldern, auf die nur aus einer Klasse zugegriffen werden kann, k?nnen auf ?ffentliche Felder zugegriffen und von innen und au?erhalb der Klasse ge?ndert werden.

Wie unterscheiden sich private Klassenfelder von privaten Methoden in JavaScript?

private Klassenfelder und private Methoden in JavaScript haben ?hnliche Verwendungszwecke, die beide eine M?glichkeit bieten, interne Details einer Klasse aus der Au?enwelt auszublenden. Sie werden jedoch unterschiedlich verwendet. Private Felder werden verwendet, um Daten zu speichern, auf die nur innerhalb der Klasse zugegriffen werden k?nnen, w?hrend private Methoden Funktionen sind, die nur innerhalb der Klasse aufgerufen werden k?nnen.

Kann ich private Klassenfelder in allen JavaScript -Umgebungen verwenden?

private Klassenfelder sind relativ neue Funktionen in JavaScript, sodass nicht alle Umgebungen dies unterstützen. Zum Zeitpunkt des Schreibens unterstützen die neuesten Versionen der meisten gro?en Browser, darunter Chrome, Firefox und Safari, private Felder. Internet Explorer unterstützt sie jedoch nicht. Wenn Sie Code schreiben müssen, der in allen Browsern ausgeführt wird, müssen Sie m?glicherweise einen Konverter wie Babel verwenden, um den Code in ein Formular umzuwandeln, das ?ltere Browser verstehen k?nnen.

Wie kann ich private Klassenfelder in inneren Methoden einer Klasse verwenden?

Um ein privates Klassenfeld in einer internen Methode einer Klasse zu verwenden, beziehen Sie sich einfach auf das Feld mit seinem Namen (vorangestellt mit einem Hash (#) -Symbol). Wenn Sie beispielsweise ein privates Feld namens "Wert" haben, k?nnen Sie in Ihrer Methode wie folgt darauf zugreifen:#Wert.

Kann ich private Klassenfelder in Unterklassen verwenden?

Ja, private Klassenfelder k?nnen in Unterklassen von JavaScript verwendet werden. Jede Unterklasse hat jedoch eine eigene unabh?ngige Gruppe von privaten Feldern, die nicht mit Superklassen oder anderen Unterklassen geteilt werden. Dies bedeutet, dass, wenn das von der Unterklasse deklarierte private Feld mit dem gleichen Namen wie das private Feld in der Superklasse ist, die beiden Felder v?llig unabh?ngig sind und sich nicht gegenseitig st?ren.

Kann ich private Klassenfelder in statischen Methoden verwenden?

Nein, private Klassenfelder in JavaScript k?nnen nicht in statischen Methoden verwendet werden. Dies liegt daran, dass statische Methoden mit der Klasse selbst und nicht mit Instanzen der Klasse verbunden sind und private Felder nur in F?llen der Klasse zug?nglich sind.

Kann ich in JavaScript über private Klassenfelder iterieren?

Nein, private Klassenfelder in JavaScript sind nicht in der Eigentums -Iteration des Objekts enthalten. Dies geschieht im Entwurf, da eine der Hauptnutzungen privater Felder darin besteht, interne Daten aus der Au?enwelt zu verbergen. Wenn Sie über die Eigenschaften des Objekts iterieren müssen, sollten Sie stattdessen ein ?ffentliches Feld oder eine Methode verwenden.

Diese Antwort beh?lt das ursprüngliche Bildformat und die Platzierung bei und paraphrasiert den Text, w?hrend die ursprünglichen Bedeutung beibehalten wird.

Das obige ist der detaillierte Inhalt vonJavascripts neue private Klassenfelder und wie man sie benutzt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!