Objets JavaScript

Un objet est une variable qui peut contenir plusieurs valeurs.

Les objets sont des collections de paires clé-valeur , où chaque clé (appelée nom de propriété ) a une valeur.

Les objets peuvent décrire n'importe quoi, comme des maisons, des voitures, des personnes, des animaux ou tout autre sujet.

Objet Voiture

Propriétés de la Voiture	Méthodes de la Voiture
car.name = Fiat car.model = 500 car.weight = 850kg car.color = blanc	car.start() car.drive() car.brake() car.stop()

Différentes voitures ont les mêmes propriétés , mais les valeurs des propriétés peuvent varier d'une voiture à l'autre.

Différentes voitures ont les mêmes méthodes , mais ces méthodes peuvent être exécutées à des moments différents .

Objets JavaScript

Ce code assigne plusieurs valeurs (Fiat, 500, blanc) à un objet nommé car :

Exemple

 const car = {type:"Fiat", model:"500", color:"blanc"}; 

Essayez-le vous-même »

Remarque :

Vous devriez déclarer des objets avec le mot-clé const .

Lorsqu'un objet est déclaré avec const, vous ne pouvez pas le réassigner pour pointer vers une autre variable.

Cela ne rend pas l'objet immuable. Vous pouvez toujours modifier ses propriétés et valeurs.

Comment créer un objet JavaScript

Un littéral d'objet est une manière concise de créer un objet.

Un littéral d'objet est une liste de clé : valeur à l'intérieur d'accolades { } :

 {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"} 

En termes d'objet, les paires clé : valeur sont les propriétés de l'objet .

Exemples

Tous les exemples ci-dessous créent un objet JavaScript avec 4 propriétés .

 // Créer un Objet 
 const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}; 
 

Essayez-le vous-même »

Les espaces et les sauts de ligne ne sont pas importants. Un littéral d'objet peut s'étendre sur plusieurs lignes :

 // Créer un Objet 
 const person = { 
 firstName: "John", 
 lastName: "Doe", 
 age: 50, 
 eyeColor: "blue" 
 }; 

Essayez-le vous-même »

Vous pouvez également créer un objet vide , et ajouter les propriétés plus tard :

 // Créer un Objet 
 const person = {}; 
 
 // Ajouter des Propriétés 
 person.firstName = "John"; 
 person.lastName = "Doe"; 
 person.age = 50; 
 person.eyeColor = "blue"; 

Essayez-le vous-même »

Utilisation du mot-clé new

Exemple

Créez un nouvel objet JavaScript en utilisant new Object() :

 // Créer un Objet 
 const person = new Object({ 
 firstName: "John", 
 lastName: "Doe", 
 age: 50, 
 eyeColor: "blue" 
 }); 

Essayez-le vous-même »

Remarque :

Tous les exemples ci-dessus font exactement la même chose.

Il n'est pas nécessaire d'utiliser new Object() .

Pour la lisibilité, la simplicité et la rapidité, utilisez un littéral d'objet à la place.

Propriétés d'Objet

Vous pouvez accéder aux propriétés d'objet de deux manières :

  objectName.propertyName  

  objectName["propertyName"]  

Exemples

 person.lastName; 

Essayez-le vous-même »

 person["lastName"]; 

Essayez-le vous-même »

Méthodes d'Objet JavaScript

Les méthodes d'objet sont des actions qui peuvent être effectuées sur des objets.

Les méthodes d'objet sont des définitions de fonction stockées en tant que valeurs de propriété :

Propriété	Valeur de Propriété
firstName	John
lastName	Doe
age	50
eyeColor	blue
fullName	function() {return this.firstName + " " + this.lastName;}

Exemple

 const person = { 
 firstName: "John", 
 lastName : "Doe", 
 id : 5566, 
 fullName : function() { 
 return this.firstName + " " + this.lastName; 
 } 
 }; 

Essayez-le vous-même »

Dans l'exemple ci-dessus, this fait référence à l' objet person :

this.firstName signifie la propriété firstName de person .

this.lastName signifie la propriété lastName de person .

Comment afficher des objets JavaScript ?

Afficher un objet JavaScript renverra [objet Objet] .

Exemple

 // Créer un Objet 
 const person = { 
 name: "John", 
 age: 30, 
 city: "New York" 
 }; 
 
 let text = person; 

Essayez-le vous-même »

Affichage des Propriétés d'Objet

Les propriétés d'un objet peuvent être ajoutées dans une chaîne :

Exemple

 // Créer un Objet 
 const person = { 
 name: "John", 
 age: 30, 
 city: "New York" 
 }; 
 
 // Ajouter des Propriétés 
 let text = person.name + "," + person.age + "," + person.city; 

Essayez-le vous-même »

Fonctions Constructrices d'Objet

Parfois, nous devons créer de nombreux objets du même type .

Pour créer un type d'objet , nous utilisons une fonction constructrice d'objet .

Il est considéré comme une bonne pratique de nommer les fonctions constructrices avec une majuscule au début.

Type d'Objet Personne

 function Person(first, last, age, eye) { 
 this.firstName = first; 
 this.lastName = last; 
 this.age = age; 
 this.eyeColor = eye; 
 } 

Essayez-le vous-même »

Remarque :

Dans la fonction constructrice, this n'a pas de valeur.

La valeur de this deviendra le nouvel objet lorsqu'un nouvel objet est créé.

Maintenant, nous pouvons utiliser new Person() pour créer de nombreux nouveaux objets Personne :

Exemple

 const myFather = new Person("John", "Doe", 50, "blue"); 
 const myMother = new Person("Sally", "Rally", 48, "green"); 
 const mySister = new Person("Anna", "Rally", 18, "green"); 
 
 const mySelf = new Person("Johnny", "Rally", 22, "green"); 
 

Essayez-le vous-même »