6- Les Objets en JavaScript
Introduction à l’orienté objet en JavaScript
La programmation orientée objet est une façon de concevoir un code autour du concept d’objets. Un objet est une entité qui peut être vue comme indépendante et qui va contenir un ensemble de variables (qu’on va appeler propriétés) et de fonctions (qu’on appellera méthodes). Ces objets vont pouvoir interagir entre eux.
Le JavaScript est un langage qui possède un fort potentiel pour la programmation orientée objet (abrégée en POO).
Un objet, en informatique, est un ensemble cohérent de données et de fonctionnalités qui vont fonctionner ensemble. Pour le dire très simplement, un objet en JavaScript est un conteneur qui va pouvoir stocker plusieurs variables qu’on va appeler ici des propriétés. Lorsqu’une propriété contient une fonction en valeur, on appelle alors la propriété une méthode. Un objet est donc un conteneur qui va posséder un ensemble de propriétés et de méthodes qu’il est cohérent de regrouper.
let utilisateur ={
nom: 'bentaleb',
age: 59,
mail:'bentalebsimed@gmail.com',
bonjour :function(){
alert('Bonjour,je suis '+ this.nom +',j\'ai '+this.age+ ' ans')
}
}
console.log(utilisateur)
utilisateur.bonjour()On a ici créé notre premier objet (qui est en l’occurrence un objet littéral – nous reparlerons de ce concept plus tard). Comme vous pouvez le voir, pour créer un objet, on commence par définir et initialiser une variable.
Dans le cas présent, notre variable let utilisateur stocke notre objet. Par simplification, on dira que cette variable « est » un objet mais pour être tout à fait exact il faudrait plutôt dire qu’elle stocke une valeur de type objet.
Pour nous assurer qu’on a bien créé un objet, on peut utiliser l’opérateur typeof qui renvoie le type de valeur d’une variable. Sans surprise, c’est bien la valeur « object » (objet en anglais) qui est renvoyée.
Le membre nommé bonjour de notre objet est une méthode puisqu’une fonction anonyme lui est associée en valeur. Vous pouvez également remarquer l’usage du mot clef this et de l’opérateur. Dans notre méthode. Nous reviendrons sur ces éléments dans la leçon suivante.
Quels avantages et intérêts de coder en orienté objet en JavaScript ?
Les intérêts supposés principaux de développer en orienté objet plutôt qu’en procédural par exemple sont de permettre une plus grande modularité ou flexibilité du code ainsi qu’une meilleure lisibilité et une meilleure maintenabilité de celui-ci.
Création d’un objet JavaScript littéral et manipulation de ses membres
Un objet est un ensemble cohérent de propriétés et de méthodes. Le JavaScript dispose d’objets natifs (objets prédéfinis) qui possèdent des propriétés et des méthodes qu’on va pouvoir directement utiliser et nous permet également de définir nos propres objets.
Nous pouvons créer des objets de 4 manières différentes en JavaScript. On va pouvoir :
1- la syntaxe littérale
2- l’invocation du constructeur Object
3- L’utilisation de la fonction constructeur
4- l’instanciation de classe personnalisée
- la syntaxe littérale
On parle ici d’objet « littéral » car nous avons défini chacune de ses propriétés et de ses méthodes lors de la création, c’est-à-dire littéralement.
Pour créer un objet littéral, on utilise une syntaxe utilisant une paire d’accolades {… } qui indique au JavaScript que nous créons un objet.
<DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Les Objets</title>
</head>
<body>
<h1>Les Objets</h1>
<p>Utilisateur</p>
<p id="p1"></p>
<p id="p2"></p>
<p id="p3"></p>
<script src="app.js"></script>
</body>
</html>let utilisateur ={
nom: 'bentaleb',
age: 59,
mail:'bentalebsimed@gmail.com',
bonjour :function(){
alert('Bonjour,je suis '+ this.nom +',j\'ai '+this.age+ ' ans')
}
}
document.getElementById('p1').innerHTML ='Nom : '+ utilisateur.nom;
document.getElementById('p2').innerHTML ='Age : '+ utilisateur.age;
let utilisateur1 ={
nom: 'bentaleb',
age: 59,
mail:'bentalebsimed@gmail.com',
bonjour :function(){
alert('Bonjour,je suis '+ this.nom +',j\'ai '+this.age+ ' ans')
}
}
document.getElementById('p1').innerHTML ='Nom : '+ utilisateur1.nom;
document.getElementById('p2').innerHTML ='Age : '+ utilisateur1.age;
utilisateur1.age=30;
document.getElementById('p3').innerHTML ='Vouvel Age : '+ utilisateur1.age;
utilisateur1.bonjour();
Utiliser les crochets pour accéder aux propriétés d’un objet, les modifier ou en définir de nouvelles
On va également pouvoir utiliser des crochets plutôt que le point pour accéder aux propriétés de nos objets, mettre à jour leur valeur ou en définir de nouvelles. Cela ne va en revanche pas fonctionner pour les méthodes.
Les crochets vont être particulièrement utiles avec les valeurs de type tableau (qui sont des objets particuliers qu’on étudiera plus tard dans ce cours) puisqu’ils vont nous permettre d’accéder à une valeur en particulier dans notre tableau.
Utilisateur [‘nom’]
Utilisateur [‘age’]
L’utilisation du mot clef this
Le mot clef this est un mot clef qui apparait fréquemment dans les langages orientés objets. Dans le cas présent, il sert à faire référence à l’objet qui est couramment manipulé.
- l’invocation du constructeur Object
let utilisateur = new Object
Création objet sans attributs ni méthodes
- fonction Constructeur
Une fonction constructeur d’objets est une fonction qui va nous permettre de créer des objets semblables. En JavaScript, n’importe quelle fonction va pouvoir faire office de constructeur d’objets.
Pour construire des objets à partir d’une fonction constructeur, nous allons devoir suivre deux étapes : il va déjà falloir définir notre fonction constructeur et ensuite nous allons appeler ce constructeur avec une syntaxe un peu spéciale utilisant le mot clefs <strong>new</strong>.
On définit ici une fonction Utilisateur() qu’on va utiliser comme constructeur d’objets. Notez que lorsqu’on définit un constructeur, on utilise par convention une majuscule au début du nom de la fonction afin de bien discerner nos constructeurs des fonctions classiques dans un script.
Comme vous pouvez le voir, le code de notre fonction est relativement différent des autres fonctions qu’on a pu créer jusqu’ici, avec notamment l’utilisation du mot clef this qui va permettre de définir et d’initialiser les propriétés ainsi que les méthodes de chaque objet créé.
Pour créer ensuite de manière effective des objets à partir de notre constructeur, nous allons simplement appeler le constructeur en utilisant le mot clef new. On dit également qu’on crée une nouvelle instance.
- crée des classes
Il existe deux grands types de langages orientés objet : ceux basés sur les classes, et ceux basés sur les prototypes.
Le JavaScript est un langage orienté objet basé sur la notion de prototypes, mais la plupart des langages supportant l’orienté objet sont basés sur les classes.
Il existe de grandes différences conceptuelles entre les langages orientés objet basés sur les classes et ceux bases sur les prototypes. On peut notamment noter les suivantes :
- Dans les langages basés sur les classes, tous les objets sont créés en instanciant des classes ;
- Une classe contient toutes les définitions des propriétés et méthodes dont dispose un objet. On ne peut pas ensuite rajouter ou supprimer des membres à un objet dans les langages basés sur les classes ;
- Dans les langages basés sur les classes, l’héritage se fait en définissant des classes mères et des classes étendues ou classes enfants.
