Ist die Klasse es6 eine Funktion?

青灯夜游
Freigeben: 2022-04-11 14:37:31
Original
1401 Leute haben es durchsucht

es6-Klasse ist eine Funktion. In es6 wurde Klasse (Klasse) als Vorlage für Objekte eingeführt. Klassen können über das Klassenschlüsselwort definiert werden. Die Syntax lautet „Klasse Klassenname {...}; das Wesentliche der Klasse ist Funktion (Funktion). Syntaktischer Zucker. Die unterste Ebene wird durch „Konstruktor“ erstellt.

Ist die Klasse es6 eine Funktion?

Die Betriebsumgebung dieses Tutorials: Windows7-System, ECMAScript-Version 6, Dell G3-Computer als Vorlage eines Objekts, und die Klasse kann über das Schlüsselwort class definiert werden.

Es kann als Syntaxzucker betrachtet werden, und seine unterste Ebene ist immer noch über constructor. > Erstellt, um das Schreiben von Objektprototypen klarer zu machen und der Syntax der objektorientierten Programmierung näher zu kommen Konstruktor, dieses Schlüsselwort stellt den Datentyp der Klasse dar, und die Klasse selbst zeigt auf den Konstruktor. Bei der Definition der Klasse ist es nicht erforderlich, eine Funktion hinzuzufügen Es ist nicht erforderlich, die Methoden durch Kommas zu trennen.

Alle Methoden der Klasse sind für das Prototypattribut der Klasse definiert

function Person(name, age) {
    this.name = name;
    this.age = age;
}
Person.prototype.sayName = function() {
    return this.name;
}

const xiaoming = new Person('小明', 18);
console.log(xiaoming);
Nach dem Login kopieren

Die Instanz der Klasse

Sofern nicht explizit in sich selbst definiert (d. h. in diesem Objekt definiert), ist sie im Prototyp definiert (d. h. in der Klasse definiert)

构造函数 去创建的,让对象原型的写法更加清晰、更像面向对象编程的语法。

class Person {
    constructor(name, age) {
      this.name = name;
      this.age = age;
    }
  
    sayName() {
      return this.name;
    }
}
const xiaoming = new Person('小明', 18)
console.log(xiaoming);
// { name: '小明', age: 18 }

console.log((typeof Person));
// function
console.log(Person === Person.prototype.constructor);
// true
Nach dem Login kopieren

上面代码用ES6的classHinweis:

1 Es gibt Keine Variablenheraufstufung in der Klasse

rrree
Da ES6 dies nicht tut, wird die Klassendeklaration zum Kopf des Codes hochgestuft. Der Grund für diese Regel hängt mit der Vererbung zusammen. Es muss sichergestellt werden, dass die Unterklasse nach der übergeordneten Klasse definiert wird.

class A {
    constructor() {}
    toString() {}
    toValue() {}
}
// 等同于
function A () {
    // constructor
};
A.prototype.toString = function() {};
A.prototype.toValue = function() {};
Nach dem Login kopieren

Der obige Code meldet keinen Fehler, denn wenn B A erbt, hat A ihn bereits. Wenn jedoch eine Klassenerhöhung vorliegt, meldet der obige Code einen Fehler, da die Klasse an die Spitze befördert wird des Codes und der let-Befehl wird nicht hochgestuft. Wenn B also A erbt, wurde Foo noch nicht definiert.

2 Wenn die Methode, die auf eine Klasse verweist, dies enthält Standardmäßig müssen Sie jedoch sehr vorsichtig sein, wenn Sie diese Methode alleine verwenden.

Die Vererbung von der Klasse kann über das Schlüsselwort „extens“ erreicht werden , die alle Eigenschaften und Methoden der Animal-Klasse über das Schlüsselwort „extends“ erbt. Da jedoch kein Code bereitgestellt wird, sind die beiden Klassen gleichbedeutend mit dem Kopieren einer Animal-Klasse .

let a = new A();
a.constructor === A.prototype.constructor // true
Nach dem Login kopieren
Das Schlüsselwort super kommt sowohl in der Konstruktormethode als auch in der toString-Methode vor. Es stellt hier den Konstruktor der übergeordneten Klasse dar und wird zum Erstellen eines neuen this-Objekts der übergeordneten Klasse verwendet.

Unterklassen müssen die Super-Methode in der Konstruktormethode aufrufen, andernfalls wird beim Erstellen einer neuen Instanz ein Fehler gemeldet. Dies liegt daran, dass dieses Objekt der Unterklasse zunächst vom Konstruktor der übergeordneten Klasse geformt werden muss, um dieselben Instanzattribute und -methoden wie die übergeordnete Klasse zu erhalten. Anschließend wird es verarbeitet und die eigenen Instanzattribute und -methoden der Unterklasse hinzugefügt. Wenn die Supermethode nicht aufgerufen wird, erhält die Unterklasse dieses Objekt nicht.

new A(); // ReferenceError
class A {}
Nach dem Login kopieren

Cat erbt die übergeordnete Klasse Animal, aber ihr Konstruktor ruft die Super-Methode nicht auf, was beim Erstellen einer neuen Instanz zu einem Fehler führt.

Wenn die Unterklasse keine Konstruktormethode definiert, wird diese Methode standardmäßig hinzugefügt. Der Code lautet wie folgt. Mit anderen Worten: Unabhängig davon, ob sie explizit definiert ist oder nicht, verfügt jede Unterklasse über eine Konstruktormethode.

{
  let A = class {};
  class B extends A {}
}
Nach dem Login kopieren

Eine weitere zu beachtende Sache ist, dass der es5-Konstruktor darauf zugreifen kann, bevor er den übergeordneten Konstruktor aufruft, der es6-Konstruktor jedoch nicht darauf zugreifen kann, bevor er den übergeordneten Konstruktor aufruft (d. h. Super).

class Animal {}
class Cat extends Animal { };
Nach dem Login kopieren

Im obigen Code wird das Schlüsselwort this verwendet, bevor die Konstruktormethode der Unterklasse super aufruft, und es wird ein Fehler gemeldet. Es ist jedoch korrekt, es nach der super-Methode einzufügen.

Statische Methoden der übergeordneten Klasse werden auch von der Unterklasse geerbt.

class Cat extends Animal {
    constructor(name, age, color) {
        // 调用父类的constructor(name, age)
        super(name, age);
        this.color = color;
    }
    toString() {
        return this.color + ' ' + super.toString(); // 调用父类的toString()
    }
}
Nach dem Login kopieren

【Verwandte Empfehlungen:

Javascript-Video-Tutorial, Web-Frontend

Das obige ist der detaillierte Inhalt vonIst die Klasse es6 eine Funktion?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage