en programmation orientée objet, une classe est un modèle de code-programme extensible pour créer des objets, fournissant des valeurs initiales pour l’état (variables membres) et les implémentations de comportement (fonctions membres ou méthodes).

en pratique, nous avons souvent besoin de créer de nombreux objets du même type, comme des utilisateurs, des biens ou autre.

comme nous le savons déjà dans le constructeur du chapitre, l’opérateur « new »,new function peut aider à cela.,

Mais dans le JavaScript moderne, il y a une construction de « classe” plus avancée, qui introduit de nouvelles fonctionnalités utiles pour la programmation orientée objet.

La « classe” de syntaxe

La syntaxe de base est:

class MyClass { // class methods constructor() { ... } method1() { ... } method2() { ... } method3() { ... } ...}

Ensuite, utilisez new MyClass() pour créer un nouvel objet avec toutes les méthodes.

Le constructor() méthode est appelée automatiquement par new, donc on peut initialiser l’objet.,

Par exemple:

class User { constructor(name) { this.name = name; } sayHi() { alert(this.name); }}// Usage:let user = new User("John");user.sayHi();

Lors de la new User("John") est appelé:

1. Un nouvel objet est créé.
2. Le constructor fonctionne avec l’argument donné et l’attribue à this.name.

Then ensuite, nous pouvons appeler des méthodes d’objet, telles queuser.sayHi().

qu’est Ce qu’une classe?

alors, qu’est-ce qu’un class? Ce n’est pas une entité entièrement nouvelle au niveau de la langue, comme on pourrait le penser.

dévoilons toute magie et voyons ce qu’est vraiment une classe. Cela aidera à comprendre de nombreux aspects complexes.

en JavaScript, une classe est une sorte de fonction.,

Ici, prendre un coup d’oeil:

class User { constructor(name) { this.name = name; } sayHi() { alert(this.name); }}// proof: User is a functionalert(typeof User); // function

Ce class User {...} construire n’a vraiment est:

1. Crée une fonction nommée User, qui devient le résultat de la déclaration de classe. Le code de fonction est tiré de la méthodeconstructor (supposée vide si nous n’écrivons pas une telle méthode).
2. Stocke les méthodes de la classe, comme le sayHi, dans le User.prototype.,

Après la création de l’objetnew User, lorsque nous appelons sa méthode, elle est extraite du prototype, comme décrit dans le chapitre F. prototype. L’objet a donc accès aux méthodes de classe.,de class User déclaration comme:

Voici le code pour l’introspecter:

pas seulement un sucre syntaxique

parfois, les gens disent que class est un « sucre syntaxique” (syntaxe qui est conçue pour rendre les choses plus faciles à lire, mais n’introduit rien de nouveau), parce que 37f4e74259 »> mot-clé du tout:

le résultat de cette définition est à peu près le même., Donc, il y a en effet des raisons pour lesquelles class peut être considéré comme un sucre syntaxique pour définir un constructeur avec ses méthodes prototypes.

Pourtant, il existe des différences importantes.

1. tout d’Abord, une fonction créée par class est étiquetée par un interne spécial de la propriété ]:"classConstructor". Ce n’est donc pas tout à fait la même chose que de le créer manuellement.

   la langue vérifie cette propriété à divers endroits., Par exemple, contrairement à une fonction régulière, il doit être appelé avec des new:

   class User { constructor() {}}alert(typeof User); // functionUser(); // Error: Class constructor User cannot be invoked without 'new'

   Aussi, une représentation sous forme de chaîne d’un constructeur de classe dans la plupart des moteurs JavaScript commence avec la « classe…”

   class User { constructor() {}}alert(User); // class User { ... }

   Il y a d’autres différences, nous allons les voir bientôt.

2. Les méthodes de classe ne sont pas énumérables.,La définition d’une classe d’ensembles enumerable drapeau de false pour toutes les méthodes dans le "prototype".

   c’est bien, car si nousfor..in sur un objet, nous ne voulons généralement pas de ses méthodes de classe.

3. les Classes toujours use strict.Tout le code à l’intérieur de la construction de classe est automatiquement en mode strict.

En outre,class la syntaxe apporte de nombreuses autres fonctionnalités que nous explorerons plus tard.,

Class Expression

tout comme les fonctions, les classes peuvent être définies dans une autre expression, passées, renvoyées, affectées, etc.

Voici un exemple de classe de l’expression:

let User = class { sayHi() { alert("Hello"); }};

Similaire à la Fonction Nommée Expressions, de la classe, les expressions peuvent avoir un nom.,

Si une expression de classe a un nom, elle n’est visible qu’à l’intérieur de la classe:

nous pouvons même créer des classes dynamiquement « à la demande”, comme ceci:

Getters/setters

tout comme les objets littéraux, les classes peuvent inclure des getters / setters, des propriétés calculées, etc.

Voici un exemple pouruser.name implémenté en utilisantget/set:

techniquement, une telle déclaration de classe fonctionne en créant des getters et des setters dansUser.prototype.,

Calculées noms

Voici un exemple avec un calculées nom de la méthode à l’aide de crochets :

class User { () { alert("Hello"); }}new User().sayHi();

Ces fonctionnalités sont faciles à retenir, car ils ressemblent à celle de littéral des objets.

champs de la Classe

auparavant, nos classes n’avaient que des méthodes.

« champs de la Classe” est une syntaxe qui permet d’ajouter toutes les propriétés.,

Par exemple, nous allons ajouter la balise name propriété class User:

class User { name = "John"; sayHi() { alert(`Hello, ${this.name}!`); }}new User().sayHi(); // Hello, John!

Donc, nous avons juste écrire  » =  » dans la déclaration, et c’est tout.,

La différence importante des champs de la classe, c’est qu’ils sont fixés sur des objets individuels, pas de User.prototype:

class User { name = "John";}let user = new User();alert(user.name); // Johnalert(User.prototype.name); // undefined

On peut aussi assigner des valeurs à l’aide des expressions plus complexes et les appels de fonction:

class User { name = prompt("Name, please?", "John");}let user = new User();alert(user.name); // John

Prise de méthodes liées avec des champs de la classe

Comme l’a démontré dans le chapitre de la Fonction de liaison des fonctions en JavaScript dynamique this., Il dépend du contexte de l’appel.

donc, si une méthode object est passée et appelée dans un autre contexte,this ne sera plus une référence à son objet.

Par exemple, ce code va afficher undefined:

Le problème est appelé « la perte de l’ this« .

Il existe deux approches pour le réparer, comme discuté dans le chapitre liaison de fonction:

1. passer une fonction wrapper, telle quesetTimeout(() => button.click(), 1000).
2. Lier la méthode à l’objet, par exemple dans le constructeur.,

Les Champs de classe fournissent une autre syntaxe assez élégante:

le champ de classeclick = () => {...} est créé par objet, il y a une fonction distincte pour chaque objetButton, avecthis à l’intérieur faisant référence à cet objet. Nous pouvons passer button.click autour de n’importe où, et la valeur de this sera toujours correcte.

c’est particulièrement utile dans l’environnement du navigateur, pour les auditeurs d’événements.,

résumé

la syntaxe de base de la classe ressemble à ceci:

MyClass est techniquement une fonction (celle que nous fournissons en tant queconstructor), tandis que les méthodes, les getters et les setters sont écrits enMyClass.prototype.

dans les chapitres suivants, nous en apprendrons plus sur les classes, y compris l’héritage et d’autres fonctionnalités.