Objets JavaScript

Table des matières

Objets, propriétés et méthodes de la vie réelle

Dans la vraie vie, une voiture est un objet.

Une voiture possède des propriétés telles que le poids et la couleur, ainsi que des méthodes telles que le démarrage et l'arrêt :

Object	Properties	Methods
	car.name = Fiat car.model = 500 car.weight = 850kg car.color = white	car.start() car.drive() car.brake() car.stop()

Toutes les voitures ont les mêmes propriétés, mais les valeurs des propriétés diffèrent d'une voiture à l'autre.

Toutes les voitures ont les mêmes méthodes, mais les méthodes sont exécutées à des moments différents.

Objets JavaScript

Vous avez déjà appris que les variables JavaScript sont conteneurs pour les valeurs de données.

Ce code attribue une valeur simple (Fiat) à une variable nommée car :

let car = "Fiat";

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Variables</h2>

<p id="demo"></p>

<script>
// Create and display a variable:
let car = "Fiat";
document.getElementById("demo").innerHTML = car;
</script>

</body>
</html>

Les objets sont aussi des variables. Mais les objets peuvent contenir plusieurs valeurs.

Ce code attribue de nombreuses valeurs (Fiat, 500, blanc) à un variable voiture nommée :

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

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>

<p id="demo"></p>

<script>
// Create an object:
const car = {type:"Fiat", model:"500", color:"white"};

// Display some data from the object:
document.getElementById("demo").innerHTML = "The car type is " + car.type;
</script>

</body>
</html>

Les valeurs sont écrites sous forme de paires nom:valeur (nom et valeur séparés par un côlon).

Il est courant de déclarer des objets avec le mot-clé const.

Apprenez-en davantage sur l'utilisation de const avec des objets dans le chapitre : JS Const.

Définition d'objet

Vous définissez (et créez) un objet JavaScript avec un littéral d'objet :

Exemple

const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>

<p id="demo"></p>

<script>
// Create an object:
const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

// Display some data from the object:
document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>

</body>
</html>

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

Exemple

const person = {
    firstName: "John",
    lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>

<p id="demo"></p>

<script>
// Create an object:
const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};

// Display some data from the object:
document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>

</body>
</html>

Propriétés de l'objet

Les paires nom:valeurs dans les objets JavaScript sont appelées propriétés :

firstName: John
lastName: Biche
age: 50
eyeColor: bleu

Accès aux propriétés d'un objet

Vous pouvez accéder aux propriétés des objets de deux manières :

objectName.propertyName

objectName["propertyName"]

Exemple 1

person.lastName;

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>

<p>There are two different ways to access an object property.</p>

<p>You can use person.property or person["property"].</p>

<p id="demo"></p>

<script>
// Create an object:
const person = {
  firstName: "John",
  lastName : "Doe",
  id     :  5566
};

// Display some data from the object:
document.getElementById("demo").innerHTML =
person.firstName + " " + person.lastName;
</script>

</body>
</html>

Exemple2

person["lastName"];

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>

<p>There are two different ways to access an object property.</p>

<p>You can use person.property or person["property"].</p>

<p id="demo"></p>

<script>
// Create an object:
const person = {
  firstName: "John",
  lastName : "Doe",
  id     :  5566
};

// Display some data from the object:
document.getElementById("demo").innerHTML =
person["firstName"] + " " + person["lastName"];
</script>

</body>
</html>

Les objets JavaScript sont des conteneurs de valeurs nommées appelées propriétés.

Méthodes d'objet

Les objets peuvent également avoir des méthodes.

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

Les méthodes sont stockées dans les propriétés en tant que fonction définitions.

firstName: John
lastName: Biche
age: 50
eyeColor: bleu
fullName: function() {return this.firstName + " " + this.lastName;}

Une méthode est une fonction stockée sous forme de propriété.

Exemple

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

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

C'EST À DIRE. this.firstName désigne la propriété firstName de this.

C'EST À DIRE. this.firstName désigne la propriété firstName de personne.

Qu'est-ce que ce ?

En JavaScript, le mot clé this fait référence à un objet.

Quel objet dépend de la façon dont ce est invoqué (utilisé ou appelé).

Le mot-clé this fait référence à différents objets selon la manière dont il est utilisé :

Dans une méthode objet, this fait référence à l'objet.
Seul, this fait référence à l'objet global.
Dans une fonction, this fait référence à l'objet global.
Dans une fonction, en mode strict, ce est non défini.
Dans un événement, this fait référence à l'élément qui a reçu l'événement.
Des méthodes telles que call(), apply() et bind() peut faire référence à ce à n'importe quel objet.

Note

ce n'est pas une variable. C'est un mot clé. Vous ne pouvez pas modifier la valeur de this.

Voir également:

Le didacticiel JavaScript ce

Le mot clé this

Dans une définition de fonction, this fait référence au "propriétaire" de la fonction.

Dans l'exemple ci-dessus, this est l'objet personne qui "possède" le Fonction fullName.

En d'autres termes, this.firstName signifie la propriété firstName de cet objet.

Apprenez-en davantage sur ce dans le didacticiel JavaScript this.

Accéder aux méthodes objet

Vous accédez à une méthode objet avec la syntaxe suivante :

objectName.methodName()

Exemple

name = person.fullName();

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>
<p>An object method is a function definition, stored as a property value.</p>

<p id="demo"></p>

<script>
// Create an object:
const person = {
  firstName: "John",
  lastName: "Doe",
  id: 5566,
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
};

// Display data from the object:
document.getElementById("demo").innerHTML = person.fullName();
</script>

</body>
</html>

Si vous accédez à une méthode sans les parenthèses(), elle renverra la définition de la fonction :

Exemple

name = person.fullName;

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>

<p>If you access an object method without (), it will return the function definition:</p>

<p id="demo"></p>

<script>
// Create an object:
const person = {
  firstName: "John",
  lastName : "Doe",
  id     : 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

// Display data from the object:
document.getElementById("demo").innerHTML = person.fullName;
</script>

</body>
</html>

Ne déclarez pas les chaînes, les nombres et les booléens comme objets !

Lorsqu'une variable JavaScript est déclarée avec le mot-clé "new", la variable est créé comme un objet:

x = new String();        // Declares x as a String object
y = new Number();        // Declares y as a Number object
z = new Boolean();       // Declares z as a Boolean object

Évitez les objets String, Number et Boolean . Ils compliquent votre code et ralentissent vitesse d'exécution.

Vous en apprendrez davantage sur les objets plus loin dans ce didacticiel.