🤯 Qu’est-ce que this ? D’où vient-il, où va-t-il ?

Un voyage en profondeur dans le personnage le plus déroutant de JavaScript 😵‍💫

Toute personne qui apprend JavaScript a déjà vécu cette scène classique :

« OK, j’ai compris this. »
(Ajoute un event listener)
« Non… en fait non. »

Parce que this est :

• Pas fixe
• Pas global (même si on le croit parfois)
• Pas déterminé par l’endroit où il est écrit
• Déterminé par la façon dont il est appelé

En bref :

this est le personnage caméléon de JavaScript 🦎

🥇 LA RÈGLE LA PLUS IMPORTANTE

(Lis ceci avant d’aller plus loin)

this n’est pas déterminé par l’endroit où il est écrit,
mais par COMMENT il est appelé.

Cette phrase est :

• Le résumé de cet article
• Le secret de this
• La cause de 90 % des bugs liés à this

Maintenant, décortiquons tout ça étape par étape, avec plein d’exemples 👇

🌍 1️⃣ this dans le scope global (version navigateur)

console.log(this);

📤 Résultat (Navigateur) :

window

🧠 Pourquoi ?

• Dans les navigateurs, l’objet global est window
• Dans le scope global, this → window

this.alert("Hello!");

C’est exactement la même chose que :

window.alert("Hello!");

📌 Astuce pratique :

• Tout ce qui est déclaré globalement est attaché à window
• C’est pour ça que this === window

⚠️ Note Node.js :
Dans Node, this global vaut {} (un objet vide).
Mais ici, on reste orientés frontend.

🧑‍💼 2️⃣ this dans les fonctions classiques (le premier piège ⚠️)

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

showThis();

📤 Résultat :

window

😵‍💫 « Mais on est dans une fonction ! »

Oui, mais :

• La fonction est appelée toute seule
• Elle n’appartient à aucun objet

Donc JavaScript dit :

« Pas de propriétaire ? OK, je la rattache au global. »

📌 Règle :

Si une fonction classique est appelée de façon indépendante,
this → objet global

😬 Exemple encore plus déroutant

const fn = function () {
  console.log(this);
};

fn();

Même résultat :

window

💡 Parce que :

• La façon dont la fonction est définie n’a pas d’importance
• La façon dont elle est appelée en a

🧑‍🤝‍🧑 3️⃣ this comme méthode d’un objet (là où tout devient logique)

const user = {
  name: "Cansu",
  age: 28,
  sayHi() {
    console.log(this.name);
  }
};

user.sayHi();

📤 Résultat :

Cansu

🧠 Que s’est-il passé ?

• sayHi est une méthode
• Elle est appelée avec un .
• this → l’objet à gauche du point

Donc :

this === user

📌 Règle d’or #2 :

Si c’est appelé comme object.method(),
this → cet objet

🎭 4️⃣ Même fonction, this différent (celui qui appelle gagne)

function showName() {
  console.log(this.name);
}

const user1 = { name: "Ali", showName };
const user2 = { name: "Cansu", showName };

user1.showName(); // Ali
user2.showName(); // Cansu

🤯 Même fonction, résultats différents !

Parce que :

• La fonction est la même
• L’appelant est différent

📌 Règle cruciale :

this ne se soucie pas de ce qu’est la fonction
Il se soucie de qui l’appelle

🏹 5️⃣ this dans les arrow functions (TRÈS important)

Les arrow functions :

• Ne créent pas leur propre this
• Héritent de this depuis le scope parent

❌ Utilisation courante mais incorrecte

const user = {
  name: "Cansu",
  sayHi: () => {
    console.log(this.name);
  }
};

user.sayHi();

📤 Résultat :

undefined

😱 Pourquoi ?

• Arrow function → pas de this
• Scope parent → global
• window.name → undefined

📌 Règle :

N’utilise PAS une arrow function comme méthode d’objet

✅ Bonne utilisation des arrow functions

const user = {
  name: "Cansu",
  sayHi() {
    const arrow = () => {
      console.log(this.name);
    };
    arrow();
  }
};

user.sayHi();

🧠 Que s’est-il passé ?

• arrow hérite de this depuis sayHi
• sayHi → user
• Résultat → 🎯

📤 Résultat :

Cansu

🧲 6️⃣ call, apply, bind — forcer this

🔹 call

function greet() {
  console.log(this.name);
}

const user = { name: "Cansu" };

greet.call(user);

📤 Résultat :

Cansu

🧠 call :

• Tu choisis explicitement this
• La fonction s’exécute immédiatement

🔹 apply (le cousin de call)

greet.apply(user);

Différence :

• Les arguments sont passés sous forme de tableau

🔹 bind (le plus professionnel)

const boundGreet = greet.bind(user);

boundGreet();

🧠 bind :

• Retourne une nouvelle fonction
• this est fixé définitivement
• Très utilisé dans les events et les callbacks

🖱️ 7️⃣ Event listeners + this (la vraie vie !)

button.addEventListener("click", function () {
  console.log(this);
});

📤 Résultat :

<button>...</button>

🧠 Pourquoi ?

• Fonction classique
• this → l’élément qui déclenche l’événement

❌ Si tu utilises une arrow function

button.addEventListener("click", () => {
  console.log(this);
});

📤 Résultat :

window

📌 Dans les event listeners :

• Besoin de this → fonction classique
• Pas besoin de this → arrow function OK

🚨 Erreurs les plus fréquentes (Alerte rouge 🚨)

❌ Utiliser des arrow functions comme méthodes
❌ Traiter this comme une variable
❌ Dire « ça dépend de l’endroit où c’est défini »
❌ Deviner sans faire console.log(this) 😄

🧩 Ultimate Cheat Sheet (à sauvegarder)

🌍 Scope global → window
🧑‍💼 Fonction classique → dépend de l’appel
🧑‍🤝‍🧑 Méthode d’objet → l’objet
🏹 Arrow function → pas de this, hérite
🧲 call/apply/bind → tu choisis this
🖱️ Event listener → la fonction classique gagne

🎯 Mot de la fin (si tu lis ça, tu es prêt·e)

this n’est :

• Pas difficile
• Juste mal expliqué

Une fois la logique comprise, tout s’assemble comme un puzzle 🧩

Souviens-toi :

this ne demande pas « Qui suis-je ? »
Il demande « Qui m’a appelé ? »