Qu'est-ce qu'une classe JavaScript et comment l'utiliser?

Dans la programmation orientée objet, une classe est un modèle de code de programme extensible pour la création d'objets. Les classes peuvent être principalement considérées comme un sucre syntaxique par rapport à l'héritage existant basé sur des prototypes de JavaScript. Dans cet article, nous allons approfondir la classe JavaScript et apprendre à les utiliser dans la séquence suivante:

• Qu'est-ce qu'une classe JavaScript?
• Comment utiliser la classe JavaScript?
  • Définir une classe
  • Définir des méthodes
  • Extension d'une classe

Qu'est-ce qu'une classe JavaScript?

En JavaScript, une classe est un type de fonction et est déclarée avec le mot-clé class. Vous devez utiliser la syntaxe d'expression de fonction pour initialiser une fonction et la syntaxe d'expression de classe pour initialiser une classe.

// Initialisation d'une fonction avec une expression de fonction const a = function () {}

// Initialisation d'une classe avec une expression de classe const b = class {}

En JavaScript, au lieu d'utiliser la fonction de mot-clé pour l'initier, nous utilisons la classe de mot-clé. En outre, les propriétés sont affectées à l'intérieur d'une méthode constructor ().

Comment utiliser une classe JavaScript?

Le code déclaré avec fonction et la classe renvoient toutes deux une fonction [[Prototype]]. Avec les prototypes, n'importe quelle fonction peut devenir une instance de constructeur à l'aide du mot-clé new. Par exemple:

const a = class {} // Initialise un constructeur à partir d'une classe const constructorFromClass = new a () console.log (constructorFromClass)

Production:

un {} constructeur: classe

Maintenant, il existe trois façons différentes d'utiliser la classe en JavaScript. Entrons dans les détails de chaque méthode avec un exemple.

qu'est-ce que la surcharge de méthode et le remplacement de méthode

Définir une classe

Une fonction constructeur est initialisée avec un certain nombre de paramètres, qui sont affectés en tant que propriétés de 'cette' , se référant à la fonction elle-même. La première lettre de l'identifiant est mise en majuscule par convention.

// Initialisation d'une fonction constructeur fonction function employee (name, empid) {this.name = name this.empid = empid}

Maintenant, si nous traduisons cela dans la syntaxe de classe, vous verrez que les structures sont très similaires.

// Initialisation d'une définition de classe class employee {constructor (name, empid) {this.name = name this.empid = empid}}

Nous pouvons dire que le mot-clé class communique de manière plus simple. La seule différence dans la syntaxe de l'initialisation est l'utilisation du mot-clé class au lieu de function. En outre, il attribue les propriétés à l'intérieur d'une méthode constructor ().

Définir des méthodes

Une autre pratique courante avec les fonctions de constructeur consiste à attribuer méthodes directement au prototype au lieu de lors de l'initialisation. Nous prendrons un exemple et verrons comment cela fonctionne:

function employee (name, empid) {this.name = name this.empid = empid} // Ajout d'une méthode au constructeur employee.prototype.greet = function () {return `$ {this.name} dit bonjour.`}

Lorsque vous écrivez le même code avec la classe, il est simplifié et la méthode est ajoutée directement.

class employee {constructor (name, empid) {this.name = name this.empid = empid} // Ajout d'une méthode au constructeur greet () {return `$ {this.name} dit bonjour.`}}

Bien que les classes permettent une syntaxe plus simple et succincte, vous devrez parfois faire des compromis avec la clarté du processus.

Extension d'une classe

L'avantage des fonctions et des classes de constructeur est qu'elles peuvent être étendues dans de nouveaux plans d'objet basés sur le parent. Cela aide à éviter la répétition du code pour des objets similaires mais nécessitant des fonctionnalités supplémentaires ou plus spécifiques.

De nouvelles fonctions de constructeur peuvent être créées à partir du parent en utilisant la méthode call (). Par exemple:

// Création d'un nouveau constructeur à partir de la fonction parent info (nom, empid, salaire) {// Constructeur de chaîne avec l'appel employee.call (this, name, empid) this.salary = salaire}

Maintenant, lorsque nous écrivons le même code en utilisant la classe, le mot clé super est utilisé à la place de l'appel pour accéder aux fonctions parentes.

// Création d'une nouvelle classe à partir des informations de classe parente étend employé {constructeur (nom, empid, salaire) {// Constructeur de chaîne avec super super (nom, empid) // Ajout d'une nouvelle propriété this.salary = salaire}}

Les cours vous offrent une manière plus concise de créer objet les plans et les fonctions du constructeur décrivent ce qui se passe sous le capot d'une manière plus spécifique.

Avec cela, nous sommes arrivés à la fin de notre article. J'espère que vous avez compris comment utiliser JavaScript Class.

Maintenant que vous connaissez la classe JavaScript, consultez la par Edureka. La formation de certification en développement Web vous aidera à apprendre à créer des sites Web impressionnants à l'aide des API HTML5, CSS3, Twitter Bootstrap 3, jQuery et Google et à les déployer sur Amazon Simple Storage Service (S3).

Vous avez une question pour nous? Veuillez le mentionner dans la section commentaires de «JavaScript Class» et nous vous répondrons.