Chargement...

Le mot-clé this

La même fonction d’étiquette peut dire tasse, puis rater l’objet, puis dire gobelet. Les accolades n’ont pas bougé. L’appel, lui, a changé. JavaScript choisit this au moment de l’appel, pas pendant que vous tapez la fonction.

Après l’appel de méthode simple

La page des méthodes a posé une fonction sur l’objet et l’a lancée avec product.tag(). Sous cette forme, this était l’objet devant le point. La page s’arrêtait là. Ici la fonction reste, et l’appel change : détaché de l’objet, visé avec call, verrouillé avec bind, ou écrit en flèche.

Cinq façons dont l’appel fixe this

📊 Méthode, nu, call, bind, flèche

Forme	Exemple	Où this se pose
méthode	`product.tag()`	l’objet devant le point
nu	`let show = product.tag; show()`	pas cet objet (`undefined` en mode strict)
call	`product.tag.call(cup)`	l’objet que vous donnez à `call`, pour ce passage seulement
bind	`product.tag.bind(product)`	verrouillé sur cet objet pour les appels suivants
flèche	`() => this.name` dans une autre fonction	le this de la fonction extérieure, pas l’objet devant le point

Nommez l’appel avant de lire this. Poser la fonction sur l’objet ne fige pas this. C’est l’appel qui décide. bind décide à l’avance pour un appel ultérieur. Une flèche ignore l’appel et lit la fonction qui l’entoure.

Appel de méthode — this est l’objet devant le point

javascript

"use strict";
let product = {
name: "Mug",
tag() {
return this.name;
}
};
console.log(product.tag());

Le point nomme encore l’objet

product.tag() lance tag et place this sur product. La console écrit Mug. C’est la règle de la page des méthodes, gardée ici comme ligne de base. Les quatre appels suivants quittent cette ligne exprès.

Appel nu — l’objet n’est plus là

javascript

"use strict";
let product = {
name: "Mug",
tag() {
if (this == null) {
return "missing";
}
return this.name;
}
};
let show = product.tag;
console.log(show());

Détachez la fonction, la tasse part avec le point

show et product.tag sont la même fonction. show() n’a pas d’objet devant un point, donc en mode strict this vaut undefined. Le garde renvoie missing. Sans le garde, this.name lève une erreur. Cette page reste en mode strict pour que le résultat soit prévisible. Un script souple peut pointer un appel nu vers l’objet global.

Viser this vers un autre objet avec call

javascript

"use strict";
let product = {
name: "Mug",
tag() {
return this.name;
}
};
let cup = { name: "Cup" };
console.log(product.tag.call(cup));

call emprunte la fonction pour un seul objet

product.tag.call(cup) exécute encore le tag de la tasse, mais this est cup pour ce passage seulement. La console écrit Cup. product.name reste Mug. call ne colle pas la fonction sur cup. apply fait le même travail quand les arguments en plus sont dans un tableau — cette étiquette n’en a pas besoin.

Verrouiller l’objet avec bind

javascript

"use strict";
let product = {
name: "Mug",
tag() {
return this.name;
}
};
let show = product.tag.bind(product);
console.log(show());

bind garde l’objet pour un appel nu plus tard

bind renvoie une fonction neuve. Dedans, this reste product même si show() n’a pas de point. La console écrit Mug. Le tag d’origine ne change pas. Prenez bind quand un bouton, un minuteur ou une autre fonction appellera la méthode sans l’objet devant.

La flèche prend this dans la fonction extérieure

javascript

"use strict";
let shelf = {
name: "Shelf",
make() {
let product = {
name: "Mug",
tag: () => this.name
};
return product.tag();
}
};
console.log(shelf.make());

Une flèche ne prend pas this au point

product.tag() a l’air d’un appel de méthode, pourtant tag est une flèche. Une flèche n’a pas de this à elle. Elle prend le this de make, et make a tourné comme shelf.make(), donc this est shelf. La console écrit Shelf, pas Mug. Une méthode ordinaire sur product aurait écrit Mug. Les flèches sont apparues plus tôt ; cette page montre seulement leur effet sur this.

Accordez l’appel au travail

L’objet est devant le point ? Lisez this comme cet objet. Vous avez détaché la fonction sans la verrouiller ? N’attendez pas l’objet. Un autre objet, un seul passage ? Utilisez call. Un appel plus tard, sans point, doit encore voir la tasse ? bind d’abord. Vous avez écrit une flèche ? Regardez vers l’extérieur, vers la fonction qui l’entoure, pas vers l’objet devant le point. Le constructeur et la classe règlent aussi this, et ils attendent une page plus loin. Ensuite vient JSON : du texte qui décrit des données, pas une autre règle pour this.

Posez une étiquette verrouillée sur la page

Verrouillez tag sur la tasse avec bind, puis appelez cette fonction neuve sans point. Écrivez le résultat dans un paragraphe.

Démo de page — étiquette verrouillée

html

<!DOCTYPE html>
<html>
<head>
<title>this-keyword — page</title>
</head>
<body>
<p id="line">…</p>
<script>
"use strict";
let product = {
name: "Mug",
tag() {
return this.name;
}
};
let show = product.tag.bind(product);
let box = document.getElementById("line");
box.textContent = show();
</script>
</body>
</html>

Le paragraphe affiche Mug. show() n’a pas d’objet devant un point, et la ligne nomme quand même la tasse parce que bind a verrouillé this. Changez seulement product.name, rechargez, et le paragraphe suit. Leçon suivante : JSON en JavaScript — du texte qui décrit des données, pas une règle nouvelle pour this.

Étapes d’exercice

Appelez product.tag() et lisez Mug.
Copiez la fonction dans show, appelez show() en mode strict et lisez missing.
Appelez product.tag.call(cup) et lisez Cup.
Verrouillez tag sur product, appelez la fonction neuve sans point et lisez Mug.
Lancez shelf.make() et lisez Shelf, pas Mug.
Dans la démo HTML, changez seulement product.name, rechargez et lisez le paragraphe.

Faux pas fréquents

Tenir this pour figé parce que la fonction est posée sur l’objet
Appeler show() en mode strict et attendre encore Mug
Croire que call copie tag sur cup
Attendre que bind réécrive le tag d’origine au lieu de renvoyer une fonction neuve
Écrire une flèche à la place de la méthode et attendre l’objet devant le point
Lire la page suivante comme une autre règle de this — JSON est un format de texte pour des données

En bref

C’est l’appel qui choisit this, pas les accolades
object.method() place this sur l’objet devant le point
Un appel nu en mode strict ne pointe pas this vers cet objet
call place this sur l’objet que vous passez, pour ce passage seulement
bind renvoie une fonction dont this reste verrouillé
Une flèche prend this dans la fonction qui l’entoure
Un appel verrouillé peut remplir une ligne de la page
Ensuite : JSON, du texte qui décrit des données

🧠 Testez Vos Connaissances

Prêt à Commencer

Testez Vos Connaissances

Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet

❓

Questions

🎯

70%

Pour Réussir

♾️

∞

Temps

🔄

∞

Tentatives

📝 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

Le mot-clé this

Après l’appel de méthode simple

Cinq façons dont l’appel fixe this

📊 Méthode, nu, call, bind, flèche

Appel de méthode — this est l’objet devant le point

Le point nomme encore l’objet

Appel nu — l’objet n’est plus là

Détachez la fonction, la tasse part avec le point

Viser this vers un autre objet avec call

call emprunte la fonction pour un seul objet

Verrouiller l’objet avec bind

bind garde l’objet pour un appel nu plus tard

La flèche prend this dans la fonction extérieure

Une flèche ne prend pas this au point

Accordez l’appel au travail

Posez une étiquette verrouillée sur la page

Démo de page — étiquette verrouillée

Étapes d’exercice

Faux pas fréquents

En bref

🧠 Testez Vos Connaissances

Testez Vos Connaissances

📝 Instructions

🚧 Cours Bientôt Disponible

Course Name

Être Notifié Quand Disponible

Disponible Maintenant

Coming Soon

Course Name