ES6 - Classes

Object Orientationest un paradigme de développement logiciel qui suit la modélisation du monde réel. Orientation objet, considère un programme comme une collection d'objets qui communiquent entre eux via un mécanisme appelémethods. ES6 prend également en charge ces composants orientés objet.

Concepts de programmation orientée objet

Pour commencer, laissez-nous comprendre

Object- Un objet est une représentation en temps réel de toute entité. Selon Grady Brooch, chaque objet aurait 3 caractéristiques -
- State - Décrit par les attributs d'un objet.
- Behavior - Décrit comment l'objet va agir.
- Identity - Une valeur unique qui distingue un objet d'un ensemble d'objets similaires similaires.
Class- Une classe en termes de POO est un modèle pour créer des objets. Une classe encapsule les données de l'objet.
Method - Les méthodes facilitent la communication entre les objets.

Traduisons ces concepts orientés objet à ceux du monde réel. Par exemple: une voiture est un objet contenant des données (marque, modèle, nombre de portes, numéro de véhicule, etc.) et des fonctionnalités (accélérer, changer de vitesse, ouvrir les portes, allumer les phares, etc.)

Avant ES6, créer une classe était une affaire difficile. Les classes peuvent être créées à l'aide du mot-clé class dans ES6.

Les classes peuvent être incluses dans le code en les déclarant ou en utilisant des expressions de classe.

Syntaxe: déclarer une classe

class Class_name {  
}

Syntaxe: Expressions de classe

var var_name = new Class_name {  
}

Le mot-clé class est suivi du nom de la classe. Les règles pour les identificateurs (déjà discutées) doivent être prises en compte lors de la dénomination d'une classe.

Une définition de classe peut inclure les éléments suivants -

Constructors - Responsable de l'allocation de mémoire pour les objets de la classe.
Functions- Les fonctions représentent les actions qu'un objet peut entreprendre. Ils sont également parfois appelés méthodes.

Ces composants réunis sont appelés les membres de données de la classe.

Note - Un corps de classe ne peut contenir que des méthodes, mais pas des propriétés de données.

Exemple: déclarer une classe

class Polygon { 
   constructor(height, width) { 
      this.height = height; 
      this.width = width; 
   } 
}

Exemple: expression de classe

var Polygon = class { 
   constructor(height, width) { 
      this.height = height; 
      this.width = width; 
   } 
}

L'extrait de code ci-dessus représente une expression de classe sans nom. Une expression de classe nommée peut être écrite sous la forme.

var Polygon = class Polygon { 
   constructor(height, width) { 
      this.height = height; 
      this.width = width; 
   } 
}

Note - Contrairement aux variables et aux fonctions, les classes ne peuvent pas être hissées.

Création d'objets

Pour créer une instance de la classe, utilisez le nouveau mot clé suivi du nom de la classe. Voici la syntaxe pour le même.

var object_name= new class_name([ arguments ])

Où,

Le nouveau mot-clé est responsable de l'instanciation.
Le côté droit de l'expression appelle le constructeur. Le constructeur doit recevoir des valeurs s'il est paramétré.

Exemple: instancier une classe

var obj = new Polygon(10,12)

Accès aux fonctions

Les attributs et fonctions d'une classe sont accessibles via l'objet. Utilisez le '.'dot notation (appelé comme point) pour accéder aux données membres d'une classe.

//accessing a function 
obj.function_name()

Exemple: les assembler

'use strict' 
class Polygon { 
   constructor(height, width) { 
      this.h = height; 
      this.w = width;
   } 
   test() { 
      console.log("The height of the polygon: ", this.h) 
      console.log("The width of the polygon: ",this. w) 
   } 
} 

//creating an instance  
var polyObj = new Polygon(10,20); 
polyObj.test();

L'exemple donné ci-dessus déclare une classe 'Polygon'. Le constructeur de la classe prend deux arguments - hauteur et largeur respectivement. le‘this’mot-clé fait référence à l'instance actuelle de la classe. En d'autres termes, le constructeur ci-dessus initialise deux variables h et w avec les valeurs de paramètre transmises au constructeur. letest () fonction dans la classe, imprime les valeurs de la hauteur et de la largeur.

Pour rendre le script fonctionnel, un objet de la classe Polygon est créé. L'objet est référencé par lepolyObjvariable. La fonction est alors appelée via cet objet.

La sortie suivante s'affiche lors de l'exécution réussie du code ci-dessus.

The height of the polygon:  10 
The width of the polygon:  20

Setters et Getters

Setters

Une fonction setter est appelée lors d'une tentative de définition de la valeur d'une propriété. leset keywordest utilisé pour définir une fonction de setter. La syntaxe pour définir une fonction setter est donnée ci-dessous -

{set prop(val) { . . . }}
{set [expression](val) { . . . }}

prop est le nom de la propriété à lier à la fonction donnée. val est un alias de la variable contenant la valeur qui a tenté d'être affectée à la propriété. expression avec ES6, peut être utilisé comme nom de propriété pour se lier à la fonction donnée.

Exemple

<script>
   class Student {
      constructor(rno,fname,lname){
         this.rno = rno
         this.fname = fname
         this.lname = lname
         console.log('inside constructor')
      }
      set rollno(newRollno){
         console.log("inside setter")
         this.rno = newRollno
      }
   }
   let s1 = new Student(101,'Sachin','Tendulkar')
   console.log(s1)
   //setter is called
   s1.rollno = 201
   console.log(s1)
</script>

L'exemple ci-dessus définit une classe Student avec three properties à savoir rno, fname and lname. Une fonction de setterrollno() est utilisé pour définir la valeur de la propriété rno.

La sortie du code ci-dessus sera comme indiqué ci-dessous -

inside constructor
Student {rno: 101, fname: "Sachin", lname: "Tendulkar"}
inside setter
Student {rno: 201, fname: "Sachin", lname: "Tendulkar"}

Exemple

L'exemple suivant montre comment utiliser un expression comme nom de propriété avec un setter function.

<script>
   let expr = 'name';
      let obj = {
      fname: 'Sachin',
      set [expr](v) { this.fname = v; }
   };
   console.log(obj.fname);
   obj.name = 'John';
   console.log(obj.fname);
</script>

La sortie du code ci-dessus sera comme mentionné ci-dessous -

Sachin
John

Getters

UNE getter functionest appelée lors d'une tentative de récupération de la valeur d'une propriété. leget keywordest utilisé pour définir une fonction getter. La syntaxe pour définir une fonction getter est donnée ci-dessous -

{get prop() { ... } }
{get [expression]() { ... } }

prop est le nom de la propriété à lier à la fonction donnée.

expression - À partir de ES6, vous pouvez également utiliser des expressions comme nom de propriété pour vous lier à la fonction donnée.

Exemple

<script>
   class Student {
      constructor(rno,fname,lname){
         this.rno = rno
         this.fname = fname
         this.lname = lname
         console.log('inside constructor')
      }
      get fullName(){
         console.log('inside getter')
         return this.fname + " - "+this.lname
      }
   }
   let s1 = new Student(101,'Sachin','Tendulkar')
   console.log(s1)
   //getter is called
   console.log(s1.fullName)
</script>

L'exemple ci-dessus définit une classe Student avec trois propriétés à savoir rno, fname and lname. La fonction getterfullName() concatène le fname et lname et renvoie une nouvelle chaîne.

La sortie du code ci-dessus sera comme indiqué ci-dessous -

inside constructor
Student {rno: 101, fname: "Sachin", lname: "Tendulkar"}
inside getter
Sachin - Tendulkar

Exemple

L'exemple suivant montre comment utiliser une expression comme nom de propriété avec une fonction getter -

<script>
   let expr = 'name';
   let obj = {
      get [expr]() { return 'Sachin'; }
   };
   console.log(obj.name);
</script>

La sortie du code ci-dessus sera comme mentionné ci-dessous -

Sachin

Le mot-clé statique

Le mot clé static peut être appliqué aux fonctions d'une classe. Les membres statiques sont référencés par le nom de la classe.

Exemple

'use strict' 
class StaticMem { 
   static disp() { 
      console.log("Static Function called") 
   } 
} 
StaticMem.disp() //invoke the static metho

Note- Il n'est pas obligatoire d'inclure une définition de constructeur. Chaque classe par défaut a un constructeur par défaut.

La sortie suivante s'affiche lors de l'exécution réussie du code ci-dessus.

Static Function called

L'opérateur instanceof

L'opérateur instanceof renvoie true si l'objet appartient au type spécifié.

Exemple

'use strict' 
class Person{ } 
var obj = new Person() 
var isPerson = obj instanceof Person; 
console.log(" obj is an instance of Person " + isPerson);

La sortie suivante s'affiche lors de l'exécution réussie du code ci-dessus.

obj is an instance of Person True

Héritage de classe

ES6 prend en charge le concept de Inheritance. L'héritage est la capacité d'un programme à créer de nouvelles entités à partir d'une entité existante - ici une classe. La classe étendue pour créer des classes plus récentes est appeléeparent class/super class. Les classes nouvellement créées sont appeléeschild/sub classes.

Une classe hérite d'une autre classe à l'aide du mot-clé 'extend'. Les classes enfants héritent de toutes les propriétés et méthodes à l'exception des constructeurs de la classe parent.

Voici la syntaxe pour le même.

class child_class_name extends parent_class_name

Exemple: héritage de classe

'use strict' 
class Shape { 
   constructor(a) { 
      this.Area = a
   } 
} 
class Circle extends Shape { 
   disp() { 
      console.log("Area of the circle:  "+this.Area) 
   } 
} 
var obj = new Circle(223); 
obj.disp()

L'exemple ci-dessus déclare une classe Shape. La classe est étendue par la classe Circle. Puisqu'il y a une relation d'héritage entre les classes, la classe enfant c'est-à-dire, la classe Circle obtient un accès implicite à son attribut de classe parent, c'est-à-dire area.

La sortie suivante s'affiche lors de l'exécution réussie du code ci-dessus.

Area of Circle: 223

L'héritage peut être classé comme -

Single - Chaque classe peut au plus s'étendre à partir d'une classe parent.
Multiple- Une classe peut hériter de plusieurs classes. ES6 ne prend pas en charge l'héritage multiple.
Multi-level - Prenons l'exemple suivant.

'use strict' 
class Root { 
   test() { 
      console.log("call from parent class") 
   } 
} 
class Child extends Root {} 
class Leaf extends Child   

//indirectly inherits from Root by virtue of inheritance {} 
var obj = new Leaf();
obj.test()

La classe Leaf dérive les attributs des classes Root et Child en vertu de l'héritage multiniveau.

La sortie suivante s'affiche lors de l'exécution réussie du code ci-dessus.

call from parent class

Héritage de classe et remplacement de méthode

Method Overridingest un mécanisme par lequel la classe enfant redéfinit la méthode de la superclasse. L'exemple suivant illustre la même chose -

'use strict' ;
class PrinterClass { 
   doPrint() { 
      console.log("doPrint() from Parent called… ");
   }
}
class StringPrinter extends PrinterClass { 
   doPrint() { 
      console.log("doPrint() is printing a string…"); 
   } 
} 
var obj = new StringPrinter(); 
obj.doPrint();

Dans l'exemple ci-dessus, la classe enfant a changé l'implémentation de la fonction de superclasse.

La sortie suivante s'affiche lors de l'exécution réussie du code ci-dessus.

doPrint() is printing a string…

Le super mot-clé

ES6 permet à une classe enfant d'appeler son membre de données de classe parent. Ceci est réalisé en utilisant lesupermot-clé. Le mot clé super est utilisé pour faire référence au parent immédiat d'une classe.

Prenons l'exemple suivant -

'use strict' 
class PrinterClass { 
   doPrint() {
      console.log("doPrint() from Parent called…") 
   } 
}  
class StringPrinter extends PrinterClass { 
   doPrint() { 
      super.doPrint() 
      console.log("doPrint() is printing a string…") 
   } 
} 
var obj = new StringPrinter() 
obj.doPrint()

le doPrint()redéfinition dans la classe StringWriter, émet un appel à sa version de classe parente. En d'autres termes, le mot clé super est utilisé pour appeler la définition de la fonction doPrint () dans la classe parent - PrinterClass.

La sortie suivante s'affiche lors de l'exécution réussie du code ci-dessus.

doPrint() from Parent called. 
doPrint() is printing a string.

↰ Previous page Next page ↱

ES6 - Classes

Concepts de programmation orientée objet

Syntaxe: déclarer une classe

Syntaxe: Expressions de classe

Exemple: déclarer une classe

Exemple: expression de classe

Création d'objets

Exemple: instancier une classe

Accès aux fonctions

Exemple: les assembler

Setters et Getters

Setters

Exemple

Exemple

Getters

Exemple

Exemple

Le mot-clé statique

Exemple

L'opérateur instanceof

Exemple

Héritage de classe

Exemple: héritage de classe

Héritage de classe et remplacement de méthode

Le super mot-clé

Tutoriel ES6