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

Hat die Klasse in es6 statische Attribute?

Feb 15, 2023 pm 12:05 PM
es6 class

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!

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

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

So verwenden Sie Klassen und Methoden in Python So verwenden Sie Klassen und Methoden in Python Apr 21, 2023 pm 02:28 PM

Konzepte und Instanzen von Klassen und Methoden Klasse (Klasse): wird verwendet, um eine Sammlung von Objekten mit denselben Eigenschaften und Methoden zu beschreiben. Es definiert die Eigenschaften und Methoden, die jedem Objekt in der Sammlung gemeinsam sind. Objekte sind Instanzen von Klassen. Methode: In der Klasse definierte Funktion. Klassenkonstruktionsmethode __init__(): Die Klasse verfügt über eine spezielle Methode (Konstruktionsmethode) namens init(), die automatisch aufgerufen wird, wenn die Klasse instanziiert wird. Instanzvariablen: In der Deklaration einer Klasse werden Attribute durch Variablen dargestellt. Solche Variablen werden Instanzvariablen genannt. Instanziierung: Erstellen Sie eine Instanz einer Klasse, ein bestimmtes Objekt der Klasse. Vererbung: Das heißt, eine abgeleitete Klasse (derivedclass) erbt die Basisklasse (baseclass).

Ist Async für es6 oder es7? Ist Async für es6 oder es7? Jan 29, 2023 pm 05:36 PM

async ist es7. Async und Wait sind neue Ergänzungen zu ES7 und Lösungen für asynchrone Vorgänge. Man kann sagen, dass Async/Await syntaktischer Zucker für Co-Module und Generatorfunktionen ist und js asynchronen Code mit klarerer Semantik löst. Wie der Name schon sagt, bedeutet Async „asynchron“. Async wird verwendet, um zu deklarieren, dass eine Funktion asynchron ist. Es gibt eine strikte Regel zwischen Async und Wait.

Warum muss das Miniprogramm es6 in es5 konvertieren? Warum muss das Miniprogramm es6 in es5 konvertieren? Nov 21, 2022 pm 06:15 PM

Aus Gründen der Browserkompatibilität. Als neue Spezifikation für JS fügt ES6 viele neue Syntax und API hinzu. Moderne Browser bieten jedoch keine umfassende Unterstützung für die neuen Funktionen von ES6, daher muss ES6-Code in ES5-Code konvertiert werden. In den WeChat-Webentwicklertools wird babel standardmäßig verwendet, um den ES6-Syntaxcode des Entwicklers in ES5-Code umzuwandeln, der von allen drei Terminals gut unterstützt wird und Entwicklern hilft, Entwicklungsprobleme zu lösen, die durch unterschiedliche Umgebungen nur im Projekt verursacht werden Option „ES6 bis ES5“.

So finden Sie in es6 verschiedene Elemente in zwei Arrays So finden Sie in es6 verschiedene Elemente in zwei Arrays Nov 01, 2022 pm 06:07 PM

Schritte: 1. Konvertieren Sie die beiden Arrays jeweils in Mengentypen mit der Syntax „newA=new Set(a); newB=new Set(b);“ 2. Verwenden Sie has() und filter(), um den Differenzsatz zu finden Mit der Syntax „new Set([...newA].filter(x =>!newB.has(x)))“ werden die Differenzmengenelemente in eine Mengensammlung aufgenommen und zurückgegeben. 3. Verwenden Sie Array. from, um die Menge in einen Array-Typ umzuwandeln, Syntax „Array.from(collection)“.

So implementieren Sie die Array-Deduplizierung in es5 und es6 So implementieren Sie die Array-Deduplizierung in es5 und es6 Jan 16, 2023 pm 05:09 PM

In es5 können Sie die for-Anweisung und die Funktion indexOf() verwenden, um eine Array-Deduplizierung zu erreichen. Die Syntax „for(i=0;i<array length;i++){a=newArr.indexOf(arr[i]);if( a== -1){...}}". In es6 können Sie den Spread-Operator Array.from() und Set verwenden, um Duplikate zu entfernen. Sie müssen zuerst das Array in ein Set-Objekt konvertieren, um Duplikate zu entfernen, und dann den Spread-Operator oder die Funktion Array.from() verwenden Konvertieren Sie das Set-Objekt zurück in ein Array.

Ersetzen Sie den Klassennamen eines Elements mit jQuery Ersetzen Sie den Klassennamen eines Elements mit jQuery Feb 24, 2024 pm 11:03 PM

jQuery ist eine klassische JavaScript-Bibliothek, die in der Webentwicklung weit verbreitet ist. Sie vereinfacht Vorgänge wie die Verarbeitung von Ereignissen, die Bearbeitung von DOM-Elementen und die Durchführung von Animationen auf Webseiten. Bei der Verwendung von jQuery kommt es häufig vor, dass Sie den Klassennamen eines Elements ersetzen müssen. In diesem Artikel werden einige praktische Methoden und spezifische Codebeispiele vorgestellt. 1. Verwenden Sie die Methoden „removeClass()“ und „addClass()“. jQuery stellt die Methode „removeClass()“ zum Löschen bereit

Was bedeutet die temporäre Totzone von es6? Was bedeutet die temporäre Totzone von es6? Jan 03, 2023 pm 03:56 PM

In es6 handelt es sich bei der temporären Totzone um einen Syntaxfehler, der sich auf die Befehle let und const bezieht, die dafür sorgen, dass der Block einen geschlossenen Bereich bildet. Bevor eine Variable innerhalb eines Codeblocks mit dem Befehl let/const deklariert wird, ist sie nicht verfügbar und gehört zur „toten Zone“ der Variablen, bevor die Variable deklariert wird. ES6 legt fest, dass die Variablenheraufstufung in temporären Totzonen und in let- und const-Anweisungen nicht erfolgt, hauptsächlich um Laufzeitfehler zu reduzieren und zu verhindern, dass die Variable vor ihrer Deklaration verwendet wird, was zu unerwartetem Verhalten führen kann.

Detaillierte Erläuterung der Verwendung der PHP-Klasse: Machen Sie Ihren Code klarer und leichter lesbar Detaillierte Erläuterung der Verwendung der PHP-Klasse: Machen Sie Ihren Code klarer und leichter lesbar Mar 10, 2024 pm 12:03 PM

Beim Schreiben von PHP-Code ist die Verwendung von Klassen eine weit verbreitete Praxis. Durch die Verwendung von Klassen können wir verwandte Funktionen und Daten in einer einzigen Einheit kapseln, wodurch der Code klarer, leichter lesbar und einfacher zu warten ist. In diesem Artikel wird die Verwendung von PHPClass ausführlich vorgestellt und spezifische Codebeispiele bereitgestellt, um den Lesern zu helfen, besser zu verstehen, wie Klassen zur Optimierung von Code in tatsächlichen Projekten angewendet werden. 1. Klassen erstellen und verwenden In PHP können Sie das Schlüsselwort class verwenden, um eine Klasse zu definieren und Eigenschaften und Methoden in der Klasse zu definieren.

See all articles