Detaillierte Erläuterung des Klassenschlüsselworts in ES6

Klasse ist eine der wichtigsten Funktionen, die von es6 eingeführt werden. Bevor es eine Klasse gab, konnten wir Klassen nur über die Prototypenkette simulieren. In diesem Artikel wird hauptsächlich das Schlüsselwort class in ES6 vorgestellt. Class ist eine der wichtigsten Funktionen, die von es6 eingeführt werden. Dieser Artikel gibt Ihnen eine detaillierte Erklärung anhand von Beispielcode. Freunde, die ihn benötigen, können darauf verweisen. Ich hoffe, er kann allen helfen.

1. Einführung

  //定义类
  class Point {
   constructor(x, y) {
   this.x = x;
   this.y = y;
   }
   toString() {
   return '(' + this.x + ', ' + this.y + ')';
   }
  }

Zusätzlich zur Konstruktionsmethode definiert die Point-Klasse auch eine toString-Methode. Beachten Sie, dass Sie beim Definieren einer „Klassen“-Methode das Schlüsselwort function nicht voranstellen müssen, sondern einfach die Funktionsdefinition direkt einfügen müssen. Darüber hinaus ist es nicht erforderlich, die Methoden durch Kommas zu trennen, da sonst ein Fehler gemeldet wird.

 //类的数据类型就是函数，类本身就指向构造函数。用的时候，也是直接对类使用new命令，跟构造函数的用法完全一致。
  class Bar {
   doStuff() {
   console.log('stuff');
   }
  }
  var b = new Bar();
  b.doStuff() // "stuff"

2. Strikter Modus

Intern ist der Standardmodus von Klassen und Modulen der strikte Modus, daher besteht keine Notwendigkeit, den Ausführungsmodus mit „strict“ anzugeben. Solange Ihr Code in einer Klasse oder einem Modul geschrieben ist, ist nur der strikte Modus verfügbar

3. Konstruktormethode

Die Konstruktormethode ist die Standardmethode der Klasse, wenn eine Objektinstanz vorhanden ist Durch den neuen Befehl wird dieser automatisch generiert. Rufen Sie diese Methode auf. Eine Klasse muss eine Konstruktormethode haben, wenn sie nicht explizit definiert ist, wird standardmäßig eine leere Konstruktormethode hinzugefügt. ​​

class Point {
  }
  // 等同于
  class Point {
   constructor() {}//constructor方法默认返回实例对象（即this），完全可以指定返回另外一个对象。
  }
  //注意：类必须使用new调用，否则会报错。这是它跟普通构造函数的一个主要区别，后者不用new也可以执行。

4. Instanzobjekt einer Klasse

Um ein Instanzobjekt einer Klasse zu generieren, verwenden Sie den neuen Befehl.

Sofern die Attribute einer Instanz nicht explizit für sich selbst definiert sind (d. h. für dieses Objekt definiert sind), werden sie für den Prototyp definiert (d. h. für die Klasse definiert). ​​

 class Point {
   // ...
  }
  // 报错
  var point = Point(2, 3);
  // 正确
  var point = new Point(2, 3);

5. Klassenausdruck

Der folgende Code verwendet einen Ausdruck, um eine Klasse zu definieren. Es ist zu beachten, dass der Name dieser Klasse MyClass anstelle von Me ist und nur im internen Code von Class verfügbar ist und sich auf die aktuelle Klasse bezieht.

 const MyClass = class Me {
   getClassName() {
   return Me.name;
   }
  };
  //采用 Class 表达式，可以写出立即执行的 Class。
  var person = new class {
   constructor(name) {
   this.name = name;
   }
   sayName() {
   console.log(this.name);
   }
  }('张三');
  person.sayName(); // "张三"

6. Es gibt kein variables Heben

Es gibt kein variables Heben (Hoist) in der Klasse

Im folgenden Code wird zuerst die Foo-Klasse verwendet und zuletzt definiert, wie folgt: Es wird ein Fehler gemeldet, da ES6 die Klassendeklaration nicht in den Kopf des Codes befördert. Der Grund für diese Bestimmung hängt mit der unten erwähnten Vererbung zusammen. Es muss sichergestellt werden, dass die Unterklasse nach der übergeordneten Klasse definiert wird.

  new Foo(); // ReferenceError
  class Foo {}

7. Private Methoden

Private Methoden sind eine häufige Anforderung, ES6 stellt sie jedoch nicht bereit und kann nur durch Problemumgehungen simuliert werden.

Private Methoden hinzufügen

① Machen Sie einen Unterschied bei der Benennung.

　② Nutzen Sie die Einzigartigkeit des Symbolwerts und benennen Sie die private Methode als Symbolwert.​​  

 /*命名上加以区别*/
  class Widget {
   // 公有方法
   foo (baz) {
   this._bar(baz);
   }
   // 私有方法
   _bar(baz) {
   return this.snaf = baz;
   }
   // ...
  }
  /*利用Symbol*/
  const bar = Symbol('bar');
  const snaf = Symbol('snaf');
  
  export default class myClass{
   // 公有方法
   foo(baz) {
   this[bar](baz);
   }
   // 私有方法
   [bar](baz) {
   return this[snaf] = baz;
   }
   // ...
  };

8. Private Eigenschaften

Wie private Methoden unterstützt ES6 keine privaten Eigenschaften. Derzeit gibt es einen Vorschlag, private Attribute zu Klassen hinzuzufügen. Die Methode besteht darin, # vor dem Attributnamen zu verwenden. ​

 class Point {
   #x;
   constructor(x = 0) {
   #x = +x; // 写成 this.#x 亦可
   }
   get x() { return #x }
   set x(value) { #x = +value }
  }

9. Dies zeigt auf

Wenn eine Klassenmethode dies enthält, verweist sie standardmäßig auf eine Instanz der Klasse.
Sobald diese Methode allein verwendet wird, wird wahrscheinlich ein Fehler gemeldet.

 class Logger {
   printName(name = 'there') {
   this.print(`Hello ${name}`);
   }
  
   print(text) {
   console.log(text);
   }
  } 
  const logger = new Logger();
  const { printName } = logger;
  printName();
  //上面代码中，printName方法中的this，默认指向Logger类的实例。但是，如果将这个方法提取出来单独使用，this会指向该方法运行时所在的环境，因为找不到print方法而导致报错。
  /*解决方法是，在构造方法中绑定this，这样就不会找不到print方法了。*/
  class Logger {
   constructor() {
   this.printName = this.printName.bind(this);
   }  
   // ...
  }

10. Namensattribut

Da die ES6-Klasse im Wesentlichen nur eine Verpackungsschicht für den ES5-Konstruktor ist, werden viele Funktionen der Funktion von der Klasse geerbt , einschließlich Namensattribut.
Das Namensattribut gibt immer den Klassennamen zurück, der unmittelbar auf das Klassenschlüsselwort folgt.

 class Point {}
  Point.name // "Point"

Verwandte Empfehlungen:

Detaillierte Erklärung des Super-Schlüsselworts in der ES6-Klasse

Klassenklasse in ES6-Javascript-Beispielen der Get- und Set-Verwendung

So verwenden Sie Klassenattribute in JS

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Klassenschlüsselworts in ES6. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!