Lorsqu'on débute en JavaScript, on met un moment à bien cerner le fonctionnement de l'instruction "this". L'instruction "this" est l'un des concepts les plus importants en JavaScript et elle est utilisée pour référencer l'objet correspondant au contexte d'appel.

Dans cet article, nous allons expliquer ce que signifie "this" en JavaScript avec 4 exemples différents pour rendre cette notion de contexte moins mytérieuse.

Qu'est-ce que "this" ?

En JavaScript, "this" est une variable spéciale qui fait référence à l'objet actuel. par le terme "actuel", il faut penser à une sorte de contexte d'appel d'une fonction.

Par eexemple, lorsqu'une méthode est appelée sur un objet, le contexte est l'objet. Comme l'instruction "this" désigne le contexte d'appel, elle peut être utilisée pour accéder aux propriétés et méthodes de l'objet actuel.

La valeur de "this" dépend de la façon dont une fonction est appelée. Il existe quatre façons courantes d'appeler une fonction en JavaScript, chacune ayant sa propre valeur de "this":

Une fonction sans contexte

Lorsqu'une fonction est appelée en tant que fonction régulière, c'est-à-dire sans être attachée à un objet, la valeur de "this" est définie sur l'objet global. Dans un navigateur, l'objet global est généralement "window".

Par exemple:

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

myFunction(); // Logs "window" in a browser environment

Méthode d'un objet

Lorsqu'une fonction est appelée en tant que méthode d'un objet, la valeur de "this" est définie sur l'objet sur lequel la méthode est appelée. Dans cet exemple, "this" se réfère à l'objet "person":

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

console.log(person.fullName()); // Logs "John Doe"

Constructeur

Lorsqu'une fonction est appelée en tant que constructeur à l'aide du mot-clé "new", la valeur de "this" est définie sur l'objet nouvellement créé.

Par exemple:

function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
}

const johnDoe = new Person("John", "Doe");

console.log(johnDoe.firstName); // Logs "John"
console.log(johnDoe.lastName); // Logs "Doe"

Tordre le contexte avec call(), apply() ou bind()

Les méthodes call(), apply() et bind() sont utilisées pour définir la valeur de "this" de manière explicite. La méthode call() est utilisée pour appeler une fonction avec un objet spécifique comme "this". La méthode apply() est similaire, mais les arguments sont passés sous forme de tableau. Enfin, la méthode bind() retourne une nouvelle fonction liée à un objet spécifique comme "this".

Par exemple:

const person1 = {
  firstName: "John",
  lastName: "Doe"
};

const person2 = {
  firstName: "Jane",
  lastName: "Doe"
};

function fullName() {
  return this.firstName + " " + this.lastName;
}

console.log(fullName.call(person1)); // Logs "John Doe"
console.log(fullName.call(person2)); // Logs "Jane