So verwenden Sie Klassenattribute in JS

Heute werde ich Ihnen beibringen, wie man eine Klasse in JS verwendet. Alle in einer Klasse definierten Methoden werden von der Instanz geerbt Methode: Das Hinzufügen des statischen Schlüsselworts bedeutet, dass die Methode nicht von der Instanz geerbt wird. Hier ist ein Beispiel.

[javascript]view plaincopy
classFoo{
staticclassMethod(){
return'hello';
}
}
Foo.classMethod()//'hello'
varfoo=newFoo();
foo.classMethod()
//TypeError:foo.classMethodisnotafunction

Im obigen Code gibt es das Schlüsselwort static vor der classMethod-Methode der Klasse Foo, was angibt, dass die Methode eine statische Methode ist und direkt in der Klasse Foo aufgerufen werden kann (Foo.classMethod()). statt Auf einer Instanz der Klasse Foo aufgerufen. Wenn eine statische Methode für eine Instanz aufgerufen wird, wird ein Fehler ausgegeben, der darauf hinweist, dass die Methode nicht vorhanden ist.

Statische Methoden der übergeordneten Klasse können von Unterklassen geerbt werden.

[javascript]view plaincopy
classFoo{
staticclassMethod(){
return'hello';
}
}
classBarextendsFoo{}

Bar.classMethod();//'hello' 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 aus aufgerufen werden.

[javascript]view plaincopy
classFoo{
staticclassMethod(){
return'hello';
}
}
classBarextendsFoo{
staticclassMethod(){
returnsuper.classMethod()+',too';
}
}
Bar.classMethod();静态属性[javascript]view plaincopy
classFoo{}
Foo.prop=1;
Foo.prop//1 上面的写法为Foo类定义了一个静态属性prop。

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

[javascript]view plaincopy
//以下两种写法都无效
classFoo{
//写法一
prop:2
//写法二
staticprop:2
}

Foo.prop//undefined 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

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

[javascript]view plaincopy
classMyClass{
myProp=42;
constructor(){
console.log(this.myProp);//42
}
}

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.

[javascript]view plaincopy
classReactCounterextendsReact.Component{
constructor(props){
super(props);
this.state={
count:0
};
}
} 上面代码中， 构造方法constructor里面， 定义了this.state属性。
有了新的写法以后， 可以不在constructor方法里面定义。
[javascript]view plaincopy
classReactCounterextendsReact.Component{
state={
count:0
};
}

Diese Schreibweise ist klarer als zuvor.

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

[javascript]view plaincopy
classReactCounterextendsReact.Component{
constructor(props){
super(props);
this.state={
count:0
};
}
state;
}

(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.

[javascript]view plaincopy
//老写法
classFoo{}
Foo.prop=1;
//新写法
classFoo{
staticprop=1;
}

Im obigen Code werden die statischen Eigenschaften in 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.

Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

Wie sieht die JS-Engine aus, wenn sie ausgeführt wird?

Wie implementiert man asynchrone synchrone Anforderungen in AJAX

So verwenden Sie die jssplice()-Methode in der JS-Entwicklung

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Klassenattribute in JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!