La classe dans Es6 a-t-elle des attributs statiques ?

La classe en es6 n'a pas d'attributs statiques. Les attributs statiques sont des attributs de la classe elle-même, c'est-à-dire des attributs directement définis à l'intérieur de la classe (Class.propname) et n'ont pas besoin d'être instanciés ; cependant, ES6 stipule qu'il n'y a que des méthodes statiques à l'intérieur de Class et aucun attribut statique.

L'environnement d'exploitation de ce tutoriel : système Windows 7, ECMAScript version 6, ordinateur Dell G3.

Dans ES6, la classe (class) a été introduite comme modèle pour les objets, et les classes peuvent être définies via le mot-clé class.

L'essence de la classe est la fonction.

Il peut être considéré comme un sucre de syntaxe qui rend l'écriture de prototypes d'objets plus claire et plus proche de la syntaxe de la programmation orientée objet.

ES6 Méthodes statiques de classe, propriétés et propriétés d'instance

Une classe est équivalente au prototype d'une instance. Toutes les méthodes définies dans la classe seront héritées par l'instance. Si le mot-clé static est ajouté avant une méthode, cela signifie que la méthode ne sera pas héritée par l'instance, mais sera appelée directement via la classe. C'est ce qu'on appelle une « méthode statique ».

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

Dans le code ci-dessus, la méthode classMethod de la classe Foo est précédée du mot-clé static, 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 sur une instance de classe Foo. Si vous appelez une méthode statique sur une instance, une erreur est générée indiquant que la méthode n'existe pas.
Les méthodes statiques des classes parents peuvent être héritées par les sous-classes.

class Foo {
	static classMethod() {
		return 'hello';
	}
}
class Bar extends Foo {}
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.

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

Propriétés statiques

Les propriétés statiques font référence aux propriétés de la classe elle-même, à savoir Class.propname, plutôt qu'aux propriétés définies sur l'objet instance (this).

class Foo {}
Foo.prop = 1;
Foo.prop // 1

La méthode d'écriture ci-dessus définit un accessoire de propriété statique pour la classe Foo.

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.

//  以下两种写法都无效
class Foo {
	//  写法一
	prop: 2
		//  写法二
	static prop: 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) 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.

class MyClass {
	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 propriétés d'une instance, nous ne pouvions les écrire que dans la méthode constructeur de la classe.

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

Dans le code ci-dessus, l'attribut this.state est défini dans le constructeur.
Avec la nouvelle méthode d'écriture, vous n'avez pas besoin de la définir dans la méthode constructeur.

class ReactCounter extends React.Component {
	state = {
		count: 0
	};
}

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

Pour des raisons de lisibilité, la nouvelle méthode d'écriture permet de lister directement les attributs d'instance qui ont été définis dans le constructeur.

class ReactCounter extends React.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.

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

De même, cette nouvelle méthode d'écriture facilite grandement l'expression des attributs statiques.

//  老写法
class Foo {}
Foo.prop = 1;
//  新写法
class Foo {
	static prop = 1;
}

Dans le code ci-dessus, les propriétés statiques de l'ancienne façon 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.

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!