JavaScript - le mot-clé this

Bonjour à tous, aspirants développeurs JavaScript ! Aujourd'hui, nous allons entreprendre un voyage passionnant à travers le monde du mot-clé this. En tant que votre professeur de science informatique de quartier, je suis là pour vous guider à travers ce concept parfois délicat, mais toujours fascinant. Alors, prenez votre boisson favorite, installez-vous confortablement, et plongeons dedans !

Qu'est-ce que le mot-clé this ?

Imaginez que vous êtes à une fête, et que quelqu'un crie, "Hey, toi !" Qui se retournerait ? Tout le monde, non ? Mais si ils disaient, "Hey, Sarah !" seulement Sarah répondrait. En JavaScript, le mot-clé this est comme dire "Hey, toi !" à un objet. C'est un moyen de se référer à l'objet en contexte actuel.

Le mot-clé this est un identifiant spécial qui est automatiquement défini dans la portée de chaque fonction. Mais voici le piège - sa valeur est déterminée par la façon dont une fonction est appelée. Cette nature dynamique de this est ce qui le rend à la fois puissant et parfois déroutant.

À quel objet this se réfère-t-il ?

Maintenant, c'est là que les choses deviennent intéressantes. L'objet auquel this se réfère peut changer en fonction de la manière et de l'endroit où il est utilisé. C'est comme un caméléon, changeant ses couleurs en fonction de son environnement. Jetons un coup d'œil à quelques scénarios :

Syntaxe

Avant de plonger plus profondément, regardons rapidement comment nous utilisons this :

console.log(this);

Simple, n'est-ce pas ? Mais ne vous laissez pas tromper par sa simplicité. La magie (ou le malice) opère lorsque nous l'utilisons dans différents contextes.

JavaScript this dans le Scope Global

Lorsqu'il est utilisé dans le scope global (à l'extérieur de toute fonction), this se réfère à l'objet global. Dans un navigateur, c'est généralement l'objet window.

console.log(this === window); // true

this.myGlobalVar = "Je suis global !";
console.log(window.myGlobalVar); // "Je suis global !"

Ici, this est comme le passe VIP qui vous donne accès à toute la fête (scope global).

JavaScript this dans une Fonction

Lorsque this est utilisé à l'intérieur d'une fonction régulière, sa valeur dépend de la façon dont la fonction est appelée.

function showThis() {
console.log(this);
}

showThis(); // window (en mode non-strict)

Dans ce cas, this est comme un chien perdu, s'attachant à ce qui est autour - ce qui, en mode non-strict, est l'objet global.

this dans une Fonction en Mode Strict

Le mode strict est comme le professeur strict qui ne vous laisse pas échapper à rien. En mode strict, this à l'intérieur d'une fonction est undefined sauf si explicitement défini.

"use strict";
function strictThis() {
console.log(this);
}

strictThis(); // undefined

this dans une Fonction Constructeur

Lorsqu'une fonction est utilisée comme constructeur (avec le mot-clé new), this se réfère à l'objet nouvellement créé.

function Person(name) {
this.name = name;
this.greet = function() {
console.log("Bonjour, je suis " + this.name);
};
}

const john = new Person("John");
john.greet(); // "Bonjour, je suis John"

Ici, this est comme un acte de naissance, établit l'identité de l'objet nouvellement né.

this dans une Fonction Fléchée

Les fonctions fléchées sont les rebelles du monde JavaScript. Elles ne lient pas leur propre this mais l'héritent du scope englobant.

const obj = {
name: "Alice",
sayHello: () => {
console.log("Bonjour, " + this.name);
}
};

obj.sayHello(); // "Bonjour, undefined"

Dans ce cas, this dans la fonction fléchée ne se réfère pas à obj, mais au scope environnant (probablement le scope global).

this dans une Méthode d'Objet

Lorsque this est utilisé dans une méthode (une fonction qui est une propriété d'un objet), il se réfère à l'objet sur lequel la méthode a été appelée.

const car = {
brand: "Toyota",
getBrand: function() {
return this.brand;
}
};

console.log(car.getBrand()); // "Toyota"

Ici, this est comme un valet loyal, toujours se référant à son maître (l'objet).

this dans une Fonction Enfant d'une Méthode d'Objet

C'est là que les choses peuvent devenir délicates. Dans une fonction à l'intérieur d'une méthode, this ne se réfère plus à l'objet.

const restaurant = {
name: "Délices Gourmandes",
getMenu: function() {
function displayName() {
console.log(this.name);
}
displayName();
}
};

restaurant.getMenu(); // undefined

Dans ce cas, this dans displayName() se réfère à l'objet global, pas à restaurant.

JavaScript this dans les Gestionnaires d'Événements

Dans les gestionnaires d'événements, this se réfère généralement à l'élément qui a reçu l'événement.

<button id="myButton">Cliquez-moi !</button>

<script>
document.getElementById("myButton").addEventListener("click", function() {
console.log(this); // <button id="myButton">Cliquez-moi !</button>
});
</script>

Ici, this est comme un projecteur, mettant en avant la vedette du spectacle - l'élément qui a été cliqué.

Liaison de Fonction Explicite en JavaScript

Parfois, nous voulons être le patron et dire exactement à this ce qu'il doit être. Nous pouvons le faire en utilisant call(), apply() ou bind().

const person1 = { name: "Alice" };
const person2 = { name: "Bob" };

function sayHello() {
console.log("Bonjour, " + this.name);
}

sayHello.call(person1); // "Bonjour, Alice"
sayHello.apply(person2); // "Bonjour, Bob"

const boundHello = sayHello.bind(person1);
boundHello(); // "Bonjour, Alice"

Ces méthodes sont comme un réalisateur, disant à this exactement quel rôle jouer.

Précedence de Liaison de this

Maintenant, résumons la précedence de la liaison de this :

Règle	Précedence
Mot-clé new	1 (La plus haute)
Liaison explicite (call, apply, bind)	2
Invocation de méthode	3
Invocation de fonction	4 (La plus basse)

Souvenez-vous, les fonctions fléchées sont spéciales et héritent toujours this de leur scope englobant.

Et voilà, les amis ! Nous avons fait le voyage à travers le pays de this, explorant ses multiples visages et particularités. Souvenez-vous, comprendre this est comme apprendre à faire du vélo - cela peut être不稳定 au début, mais avec de la pratique, vous serez bientôt à fond la caisse. Continuez à coder, continuez à explorer, et surtout, continuez à vous amuser avec JavaScript !

Credits: Image by storyset