Heim > Web-Frontend > Front-End-Fragen und Antworten > Hat die Klasse in es6 statische Attribute?

Hat die Klasse in es6 statische Attribute?

青灯夜游
Freigeben: 2023-02-15 12:05:39
Original
2184 Leute haben es durchsucht

Klasse in es6 hat keine statischen Attribute. Statische Attribute sind Attribute der Klasse selbst, also Attribute, die direkt innerhalb der Klasse (Class.propname) definiert sind und nicht instanziiert werden müssen. ES6 schreibt jedoch vor, dass es innerhalb der Klasse nur statische Methoden und keine statischen Attribute gibt.

Hat die Klasse in es6 statische Attribute?

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

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.

Es kann als Syntaxzucker betrachtet werden, der das Schreiben von Objektprototypen klarer macht und der Syntax der objektorientierten Programmierung ähnlicher wird.

ES6 Statische Methoden, Eigenschaften und Instanzeigenschaften

Eine Klasse entspricht dem Prototyp einer Instanz. Alle in der Klasse definierten Methoden werden von der Instanz geerbt. Wenn das Schlüsselwort static vor einer Methode hinzugefügt wird, bedeutet dies, dass die Methode nicht von der Instanz geerbt wird, sondern direkt über die Klasse aufgerufen wird. Dies wird als „statische Methode“ bezeichnet.

class Foo {
	static classMethod() {
		return 'hello';
	}
}
Foo.classMethod() // 'hello'
var foo = new Foo();
foo.classMethod()
	// TypeError: foo.classMethod is not a function
Nach dem Login kopieren

Im obigen Code wird der classMethod-Methode der Klasse Foo das Schlüsselwort static vorangestellt, was angibt, dass die Methode eine statische Methode ist und direkt auf der Klasse Foo (Foo.classMethod()) statt auf einer Instanz von aufgerufen werden kann Klasse Foo. Wenn Sie eine statische Methode für eine Instanz aufrufen, wird ein Fehler ausgegeben, der darauf hinweist, dass die Methode nicht vorhanden ist.
Statische Methoden übergeordneter Klassen können von Unterklassen geerbt werden.

class Foo {
	static classMethod() {
		return 'hello';
	}
}
class Bar extends Foo {}
Bar.classMethod(); // 'hello'
Nach dem Login kopieren

Im obigen Code verfügt die übergeordnete Klasse Foo über eine statische Methode, und die Unterklasse Bar kann diese Methode aufrufen.

Statische Methoden können auch vom Superobjekt aufgerufen werden.

class Foo {
	static classMethod() {
		return 'hello';
	}
}
class Bar extends Foo {
	static classMethod() {
		return super.classMethod() + ', too';
	}
}
Bar.classMethod();
Nach dem Login kopieren

Statische Eigenschaften

Statische Eigenschaften beziehen sich auf die Eigenschaften der Klasse selbst, nämlich Class.propname, und nicht auf Eigenschaften, die für das Instanzobjekt (this) definiert sind.

class Foo {}
Foo.prop = 1;
Foo.prop // 1
Nach dem Login kopieren

Die obige Schreibmethode definiert eine statische Eigenschaftsstütze für die Foo-Klasse.

Derzeit ist nur diese Schreibweise möglich, da ES6 eindeutig vorschreibt, dass es innerhalb der Klasse nur statische Methoden und keine statischen Attribute gibt.

//  以下两种写法都无效
class Foo {
	//  写法一
	prop: 2
		//  写法二
	static prop: 2
}
Foo.prop // undefined
Nach dem Login kopieren

ES7 hat einen Vorschlag für statische Eigenschaften, der derzeit vom Babel-Transcoder unterstützt wird.

Dieser Vorschlag sieht neue Schreibmethoden sowohl für Instanzattribute als auch für statische Attribute vor.

(1) Instanzattribute einer Klasse

Die Instanzattribute einer Klasse können mithilfe von Gleichungen in die Definition der Klasse geschrieben werden.

class MyClass {
	myProp = 42;
	constructor() {
		console.log(this.myProp); // 42
	}
}
Nach dem Login kopieren

Im obigen Code ist myProp die Instanzeigenschaft von MyClass. Auf Instanzen von MyClass kann diese Eigenschaft gelesen werden.
Früher konnten wir bei der Definition von Instanzeigenschaften diese nur in die Konstruktormethode der Klasse schreiben.

class ReactCounter extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			count: 0
		};
	}
}
Nach dem Login kopieren

Im obigen Code ist das this.state-Attribut im Konstruktor definiert.
Mit der neuen Schreibmethode müssen Sie sie nicht in der Konstruktormethode definieren.

class ReactCounter extends React.Component {
	state = {
		count: 0
	};
}
Nach dem Login kopieren

Diese Schreibweise ist klarer als zuvor.

Aus Gründen der Lesbarkeit ermöglicht die neue Schreibmethode die direkte Auflistung derjenigen Instanzeigenschaften, die im Konstruktor definiert wurden.

class ReactCounter extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			count: 0
		};
	}
	state;
}
Nach dem Login kopieren

(2) Statische Attribute der Klasse

Die statischen Attribute der Klasse müssen nur mit dem Schlüsselwort static vor der oben genannten Methode zum Schreiben von Instanzattributen hinzugefügt werden.

class MyClass {
static myStaticProp = 42;
constructor() {
console.log(MyClass.myProp); // 42
}
}
Nach dem Login kopieren

Ebenso erleichtert diese neue Schreibmethode den Ausdruck statischer Attribute erheblich.

//  老写法
class Foo {}
Foo.prop = 1;
//  新写法
class Foo {
	static prop = 1;
}
Nach dem Login kopieren

Im obigen Code werden die statischen Eigenschaften der alten Schreibweise außerhalb der Klasse definiert. Nachdem die gesamte Klasse generiert wurde, werden statische Attribute generiert. Dies führt dazu, dass dieses statische Attribut leicht ignoriert wird, und entspricht nicht den Code-Organisationsprinzipien, nach denen zusammengehöriger Code zusammengestellt werden sollte. Darüber hinaus ist die neue Schreibweise eine explizite Deklaration (deklarativ) anstelle der Zuweisungsverarbeitung, was eine bessere Semantik aufweist.

Das obige ist der detaillierte Inhalt vonHat die Klasse in es6 statische Attribute?. 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