Méthodes d’objet
Le nom et le prix du mug sont déjà côte à côte. Il manque à la page un petit travail qui appartient à ce mug : fabriquer son étiquette, augmenter un compteur de panier, saluer l’acheteur. Cette fonction se pose sur l’objet. C’est une méthode.
Après les clés et les listes
La leçon sur les propriétés ajoutait un champ, en retirait un, interrogeait avec in, entrait dans un objet imbriqué et listait les noms avec Object.keys. Aucune fonction n’y tournait. Ici, la valeur d’une propriété est une fonction, et on la lance depuis l’objet qui la porte.
Cinq gestes avec une méthode
📊 Stocker, appeler, forme courte, this, argument
| Geste | Syntaxe | Ce que vous obtenez |
|---|---|---|
| stocker | greet: function () { return "Hi"; } |
une fonction posée sur l’objet |
| appeler | product.greet() |
la fonction s’exécute et vous avez son résultat |
| forme courte | label() { return this.name; } |
la même sorte de fonction, écrite plus court |
| this | this.name dans la méthode |
l’objet qui était avant le point |
| argument | cart.add(3) |
une entrée en plus pour cet appel seulement |
Nommez le geste, puis tapez la ligne. Stocker n’exécute pas la fonction. La forme courte n’est pas un nouveau type de valeur. this n’est pas un nom de produit global que l’on espère trouver. Un argument est l’entrée de cet appel, pas un second objet.
let product = {
name: "Mug",
greet: function () {
return "Hi";
}
};
console.log(typeof product.greet);
La valeur peut être une fonction
name garde une chaîne. greet garde une fonction. typeof product.greet vaut "function". Rien n’a encore tourné, donc Hi n’apparaît pas. Le nom du mug reste à côté de la fonction.
let product = {
name: "Mug",
greet: function () {
return "Hi";
}
};
console.log(product.greet());
Les parenthèses sont le bouton de départ
product.greet() entre dans la fonction. La console affiche Hi. Sans les parenthèses, vous regardez la fonction elle-même, pas ce qu’elle renvoie. Le point dit à quel objet l’appel appartient.
let product = {
name: "Mug",
label() {
return this.name;
}
};
console.log(product.label());
La forme courte n’est qu’une écriture plus ramassée
Dans les accolades, label() { ... } pose une fonction sur la clé label. Même sorte de propriété que greet: function () { ... }, avec moins de frappe. product.label() l’exécute. Le corps lit this.name, la console affiche Mug.
let product = {
name: "Mug",
price: 8,
tag() {
return this.name + " — " + this.price;
}
};
console.log(product.tag());
Dans un appel simple, this est l’objet avant le point
product.tag() signifie : exécute tag, et que this soit product. Alors this.name et this.price sont les champs de ce mug. La console affiche Mug — 8. Un name nu dans la méthode est une autre recherche, pas la propriété. Quand l’appel n’a plus la forme object.method(), this peut viser ailleurs — c’est la leçon suivante. Cette page reste sur l’appel simple.
let cart = {
count: 2,
add(extra) {
this.count = this.count + extra;
return this.count;
}
};
console.log(cart.add(3));
La méthode prend une entrée pour cet appel
add attend extra. cart.add(3) transmet 3, l’ajoute à count et renvoie le nouveau total. La console affiche 5. Le panier garde ce count mis à jour. L’argument vit le temps de l’appel ; il ne devient une propriété que si vous le rangez vous-même.
Choisissez le geste qui correspond au travail
La fonction doit vivre sur l’objet ? Stockez-la, forme longue ou courte. Vous voulez le résultat ? Appelez avec (). Vous voulez les champs de l’objet ? Lisez-les via this. Il vous faut un nombre seulement pour cette exécution ? Passez un argument. Object.keys listait les noms à la page précédente. La suivante reste avec this quand la forme de l’appel change.
Posez l’étiquette de la méthode sur la page
Donnez au produit name, price et tag. Écrivez product.tag() dans un paragraphe.
<!DOCTYPE html>
<html>
<head>
<title>object-methods — page</title>
</head>
<body>
<p id="line">…</p>
<script>
let product = {
name: "Mug",
price: 8,
tag() {
return this.name + " — " + this.price;
}
};
let box = document.getElementById("line");
box.textContent = product.tag();
</script>
</body>
</html>
Le paragraphe affiche Mug — 8. tag a bâti cette chaîne à partir des champs du produit. Changez seulement name ou price, rechargez, lisez la nouvelle ligne. Leçon suivante : le mot-clé this — où pointe this quand l’appel n’est plus un simple object.method().
Étapes d’exercice
- Posez une fonction sur
greetet afficheztypeofde cette propriété. - Appelez
product.greet()et lisezHi. - Écrivez
labelen forme courte et affichezproduct.label(). - Construisez
tagpour quethis.nameetthis.priceforment une chaîne. - Partez de
countà 2, appelezadd(3)et lisez5. - Dans la démo HTML, ne changez que
nameouprice, rechargez, lisez le paragraphe.
Faux pas fréquents
- Afficher
product.greetsans()en attendantHi - Prendre la forme courte
label() {}pour une propriété texte - Écrire un
namenu dans la méthode au lieu dethis.name - Croire que
cart.add(3)laissecountà 2 - Aller vers
Object.keysalors que vous vouliez appeler une méthode - Glisser une fonction flèche comme méthode de cette page — la leçon suivante suit
thisquand la forme de l’appel change
En bref
- Une méthode est une fonction stockée comme propriété
object.method()l’exécute et vous donne la valeur renvoyée- La forme courte
name() {}stocke la même sorte de fonction - Dans un appel simple,
thisest l’objet avant le point - Le paramètre reçoit l’argument de cet appel
- La chaîne de la méthode peut remplir une ligne de la page
- Ensuite : le mot-clé
this, quand l’appel n’est pasobject.method()
🧠 Testez Vos Connaissances
Testez Vos Connaissances
Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet
📝 Instructions
- Lisez chaque question attentivement
- Sélectionnez la meilleure réponse pour chaque question
- Vous pouvez refaire le quiz autant de fois que vous le souhaitez
- Votre progression sera affichée en haut