Wie definiert ES6 Klassen?

In ES6 wurde Klasse (Klasse) als Vorlage für Objekte eingeführt, und Klassen können über das Schlüsselwort „class“ definiert werden. Das Wesentliche einer Klasse ist die Funktion, die als syntaktischer Zucker betrachtet werden kann, wodurch das Schreiben von Objektprototypen klarer wird und der Syntax der objektorientierten Programmierung ähnlicher wird.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, ECMAScript Version 6, Dell G3-Computer.

ES6-Klasse

In ES6 wurde Klasse (Klasse) als Vorlage für Objekte eingeführt, und Klassen können über das Schlüsselwort „class“ definiert werden.

Die Essenz von Klasse ist Funktion.

Grundsätzlich kann die ES6-Klasse nur als Syntaxzucker betrachtet werden. Die meisten ihrer Funktionen können durch ES5 erreicht werden. Die neue Klassenschreibmethode macht die Schreibmethode des Objektprototyps klarer und ähnelt eher der Syntax der objektorientierten Programmierung . .

Grundlegende Verwendung

Klassendefinition

Klassenausdrücke können anonym oder benannt sein.

// 匿名类
let Example = class {
    constructor(a) {
        this.a = a;
    }
}
// 命名类
let Example = class Example {
    constructor(a) {
        this.a = a;
    }
}

Klassendeklaration

class Example {
    constructor(a) {
        this.a = a;
    }
}

Zu beachtende Punkte: Wiederholbare Deklarationen sind nicht zulässig.

class Example{}
class Example{}
// Uncaught SyntaxError: Identifier 'Example' has already been 
// declared
 
let Example1 = class{}
class Example{}
// Uncaught SyntaxError: Identifier 'Example' has already been 
// declared

Zu beachtende Punkte:

Klassendefinitionen werden nicht hochgestuft, was bedeutet, dass die Klasse vor dem Zugriff definiert werden muss, andernfalls wird ein Fehler gemeldet.

Methoden in der Klasse erfordern kein Funktionsschlüsselwort.

Kein Semikolon zwischen Methoden.

new Example(); 
class Example {}

Der Hauptteil der Klasse

Eigenschaften

Prototyp

In ES6 gibt es immer noch Prototypen, obwohl Methoden direkt aus der Klasse definiert werden können, werden die Methoden tatsächlich immer noch auf dem Prototyp definiert. Methode überschreiben/Methode während der Initialisierung hinzufügen instanziiert. ES6 legt fest, dass es innerhalb der Klasse nur statische Methoden und keine statischen Attribute gibt.

Example.prototype={
    //methods
}

Öffentliche Eigenschaften

Object.assign(Example.prototype,{
    //methods
})

Instanzeigenschaften

Instanzeigenschaften: Eigenschaften, die für das Instanzobjekt (dieses) definiert sind.

class Example {
// 新提案
    static a = 2;
}
// 目前可行写法
Example.b = 2;

Namensattribut

gibt den Klassennamen nach der Klasse zurück (sofern vorhanden).

class Example{}
Example.prototype.a = 2;

Methode

Konstruktormethode

Die Konstruktormethode ist die Standardmethode der Klasse und wird aufgerufen, wenn ein instanziiertes Objekt der Klasse erstellt wird.

class Example {
    a = 2;
    constructor () {
        console.log(this.a);
    }
}

Objekt zurückgeben

let Example=class Exam {
    constructor(a) {
        this.a = a;
    }
}
console.log(Example.name); // Exam
 
let Example=class {
    constructor(a) {
        this.a = a;
    }
}
console.log(Example.name); // Example

Statische Methode

class Example{
    constructor(){
      console.log('我是constructor');
    }
}
new Example(); // 我是constructor

Prototyp-Methode

class Test {
    constructor(){
        // 默认返回实例对象 this
    }
}
console.log(new Test() instanceof Test); // true
 
class Example {
    constructor(){
        // 指定返回对象
        return new Test();
    }
}
console.log(new Example() instanceof Example); // false

Instanzmethode

class Example{
    static sum(a, b) {
        console.log(a+b);
    }
}
Example.sum(1, 2); // 3

Instantiierung der Klasse

neu class muss über das neue Schlüsselwort instanziiert werden.

class Example {
    sum(a, b) {
        console.log(a + b);
    }
}
let exam = new Example();
exam.sum(1, 2); // 3

Instanziierte Objekte

Gemeinsam genutzte Prototypobjekte

class Example {
    constructor() {
        this.sum = (a, b) => {
            console.log(a + b);
        }
    }
}

[Verwandte Empfehlungen: Javascript-Video-Tutorial,

Web-Frontend

]

Das obige ist der detaillierte Inhalt vonWie definiert ES6 Klassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!