Différence entre ES5 et ES6 en Programmation Orientée Objet

L’essor de Javascript a amené le besoin de pouvoir structurer le code. Les développeurs ont donc commencé à utiliser des fonctions pour implémenter des fonctionnalités de type classe en ES5, car il n’y avait pas de mot-clé de classe natif. Toutefois, avec l’avènement d’ES6, un nouveau mot-clé de classe a été introduit pour fournir une meilleure abstraction et une syntaxe plus propre pour définir des classes en JavaScript. Dans cet article, nous allons voir la différence entre ES5 et ES6 classes.

ES5 (ECMAScript 5) et ES6 (ECMAScript 6) sont des versions de JavaScript, qui est un langage de script populaire utilisé pour créer des pages web interactives. Bien qu’ils aient tous deux la même syntaxe de base, il y a quelques différences importantes entre les deux versions.

Cet article compare les différences entre les classes en JavaScript ES5 et les classes en JavaScript ES6.

En ES5, les classes sont définies en utilisant des fonctions constructeurs. Les méthodes sont ajoutées à l’objet prototype de la fonction constructeur, tandis que les propriétés sont définies à l’intérieur du constructeur. Les classes en ES5 ne prennent pas en charge l’héritage de classe, donc l’héritage doit être réalisé en utilisant la propriété prototype de la fonction constructeur.

En ES6, les classes sont définies en utilisant le mot-clé class. Les méthodes et les propriétés sont définis directement dans la classe, plutôt que d’être définis séparément. ES6 prend également en charge l’héritage de classe, qui peut être accompli en utilisant le mot-clé extends.

L’article explique également comment créer des instances de classes, utiliser des méthodes et des propriétés, et comment hériter de classes en ES5 et ES6.

En résumé, l’article compare les différences entre les classes en JavaScript ES5 et ES6 et montre comment les utiliser pour créer des instances de classes, utiliser des méthodes et des propriétés, et comment hériter de classes.

Les nouvelles fonctionnalités d’ES6

ES6 introduit de nombreuses fonctionnalités utiles qui facilitent la vie des développeurs JavaScript. Voici quelques-unes des principales fonctionnalités d’ES6 :

• Les classes : la définition de classes est désormais possible en JavaScript, comme dans les autres langages orientés objet. Les classes sont des modèles pour la création d’objets et sont une alternative à la création d’objets à l’aide de fonctions constructeurs.
• Les modules : les modules sont une façon standardisée d’organiser et de partager du code entre différents fichiers JavaScript.
• Les fonctions fléchées : les fonctions fléchées sont une syntaxe simplifiée pour les fonctions anonymes. Elles sont plus courtes à écrire et plus faciles à lire.
• La décomposition d’objet et de tableau : la décomposition permet d’extraire des valeurs d’un objet ou d’un tableau et de les affecter à des variables distinctes.
• Les fonctions générateurs : les fonctions générateurs sont des fonctions qui peuvent être mises en pause et reprises, ce qui les rend utiles pour des tâches telles que le traitement de flux de données asynchrones.

Pas de mot-clé de classe en ES5

En ES5, les développeurs utilisaient des fonctions pour implémenter des fonctionnalités de classe, car il n’y avait pas de mot-clé de classe natif. Ils utilisaient alors la propriété prototype de la fonction pour étendre les fonctionnalités de l’objet. Cela signifiait que chaque fois qu’un développeur voulait ajouter une nouvelle fonctionnalité à une classe, il devait le faire via la propriété prototype.

Utilisation de la propriété prototype

La propriété prototype a une utilité très importante en JavaScript. Elle permet d’ajouter des méthodes à tous les objets d’un même type, ce qui est particulièrement utile pour les objets JSON. Dans l’exemple ci-dessous, nous allons ajouter une méthode pour obtenir les clés d’un objet JSON en utilisant la propriété prototype :

if (!Object.keys) {
  Object.keys = function (obj) {
    var keys = [];
    for (var i in obj) {
      if (obj.hasOwnProperty(i)) {
        keys.push(i);
      }
    }
    return keys;
  };
}

Avec cette méthode, nous pouvons obtenir les clés d’un objet JSON en appelant Object.keys(someObj). Il n’y a pas de méthode native someObj.keys() en JavaScript, contrairement à certains autres langages tels que Python.

Les classes en ES6

ES6 a introduit le mot-clé de classe natif, ce qui facilite grandement la création de classes. La syntaxe est beaucoup plus propre et plus facile à comprendre que l’utilisation de fonctions.

class Person {
  constructor(name, age, gender) {
    this.name = name;
    this.age = age;
    this.gender = gender;
  }
}

class Teacher extends Person {
  constructor(name, age, gender, subject) {
    super(name, age, gender);
    this.subject = subject;
  }
}

class Student extends Person {
  constructor(name, age, gender, marks) {
    super(name, age, gender);
    this.marks = marks;
  }
}

Dans l’exemple ci-dessus, nous créons une classe Person avec trois propriétés : name, age et gender. Nous créons ensuite deux classes supplémentaires, Teacher et Student, qui étendent la classe Person et ajoutent une propriété supplémentaire chacune.