Comment utiliser l'attribut de classe dans JS

Aujourd'hui, je vais vous apprendre à utiliser la classe en JS. Une classe est équivalente au prototype d'une instance. Toutes les méthodes définies dans une classe seront héritées par l'instance . méthode, l'ajout du mot-clé statique signifie que la méthode ne sera pas héritée par l'instance. Voici un exemple.

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

Dans le code ci-dessus, il y a le mot-clé static avant la méthode classMethod de la classe Foo, indiquant que la méthode est une méthode statique et peut être appelée directement sur la classe Foo (Foo.classMethod()) au lieu de Appelé sur une instance de la classe Foo. Si une méthode statique est appelée sur une instance, une erreur est générée indiquant que la méthode n'existe pas.

Les méthodes statiques de la classe parent peuvent être héritées par les sous-classes.

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

Bar.classMethod();//'hello' Dans le code ci-dessus, la classe parent Foo a une méthode statique et la sous-classe Bar peut appeler cette méthode.

Les méthodes statiques peuvent également être appelées depuis le super objet.

[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。

Actuellement, seule cette façon d'écrire est réalisable, car ES6 stipule clairement qu'il n'y a que des méthodes statiques à l'intérieur de Class et aucun attribut statique.

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

Foo.prop//undefined ES7 a une proposition de propriétés statiques, actuellement prises en charge par le transcodeur Babel.

Cette proposition stipule de nouvelles méthodes d'écriture pour les attributs d'instance et les attributs statiques.

(1) Les attributs d'instance d'une classe

Les attributs d'instance d'une classe peuvent être écrits dans la définition de la classe à l'aide d'équations.

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

Dans le code ci-dessus, myProp est la propriété d'instance de MyClass. Sur les instances de MyClass, cette propriété peut être lue.

Auparavant, lorsque nous définissions les attributs d'une instance, nous ne pouvions les écrire que dans la méthode constructeur de la classe.

[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
};
}

Cette façon d'écrire est plus claire qu'avant.

Pour des raisons de lisibilité, la nouvelle notation permet une liste directe des propriétés d'instance qui ont été définies dans le constructeur.

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

(2) Attributs statiques de la classe

Les attributs statiques de la classe doivent uniquement être ajoutés avec le mot-clé static devant la méthode d'écriture des attributs d'instance ci-dessus.

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

Dans le code ci-dessus, les propriétés statiques de l'ancienne manière d'écrire sont définies en dehors de la classe. Une fois la classe entière générée, les attributs statiques sont générés. Cela permet d'ignorer facilement cet attribut statique et n'est pas conforme aux principes d'organisation du code selon lesquels le code associé doit être élaboré. De plus, la nouvelle façon d'écrire est une déclaration explicite (déclarative) au lieu d'un traitement d'affectation, qui a une meilleure sémantique.

Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

À quoi ressemble le moteur JS lorsqu'il est exécuté ?

Comment implémenter des requêtes synchrones asynchrones dans AJAX

Comment utiliser la méthode jssplice() dans le développement JS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!