Qu’est-ce que le mot-clé THIS dans JavaScript ?

Le mot-clé THIS

THIS est un mot-clé très répandu en JavaScript. Il pointe systématiquement vers l’objet qui l’exécute.

Pour bien comprendre, nous allons utiliser plusieurs exemples et nous verrons ensemble que THIS désigne un objet bien spécifique selon le contexte.

THIS dans le contexte global

Voyons le premier exemple. Sur quoi pointe THIS dans le contexte global.

var thisGlobal = this;

console.log(thisGlobal);

Lorsque ce bout de code est exécuté, l’objet window apparaît lorsque nous utilisons un navigateur.

THIS dans une fonction JavaScript

Que se passe-t-il si nous créons une fonction et qu’on l’exécute dans le contexte global ?

function thisFonction() {

  console.log(this);

}

thisFonction();

Aucun changement par rapport au code précédent, on ne retrouve pas l’objet window sur la console du navigateur.

THIS dans un objet

Essayons maintenant avec un objet.

var unObjet = {

  propriete1: 1,
  propriete2: 2,
  methode: function() {
    console.log(this);
  }

};

unObjet.methode();

Dans un nouvel objet, le THIS correspond à l’objet. Dans la console nous retrouvons donc les méthodes et les propriétés de l’objet "unObjet". Par conséquent nous pouvons modifier ou utiliser une propriété (ou méthode) de cet objet grâce à THIS. Par exemple nous allons changer la donnée de la propriété "propriete1".

var unObjet = {

  propriete1: 1,
  propriete2: 2,
  methode: function() {
    this.proprieté1 = 3;
    console.log(this.proprieté1)
  }

};

unObjet.methode();

La console nous renvoit 3 (et non 1 car nous avons modifié "propriete1").

Quel est le comportement de THIS dans une classe ?

THIS dans une classe ES6

Préparons une classe que nous allons instancier juste après. Le but on le rappelle est de connaître la valeur de THIS dans ce contexte.

class UneClass {

  constructor(param) {

    this.param = param;
    this.data1 = 1;
    this.data2 = 2;

  }

  getThis() {

    console.log(this)

  }

}

var inst = new UneClass('inst');

inst.getThis();

Le THIS dans ce contexte pointe directement vers la classe. C’est d’ailleurs pour cela que nous l’avons utilisé pour créer les propriétés de cette classe.

Particularité d’une fonction fléchée (arrow function)

Lorsque l’on exécute une fonction fléchée dans le contexte global, aucun changement avec une fonction normal. Le THIS renvoie à l’objet window du navigateur. Par contre lorsqu’une fonction fléchée est dans une méthode d’un objet alors le THIS ne pointe pas sur l’objet comme c’est le cas pour une fonction normale, mais sur l’objet window.

var unObjet = {

  propriete1: 1,
  propriete2: 2,
  methode: function () {
    console.log(this);
  }

};

// L’objet unObjet apparaît
unObjet.methode();

var unAutreObjet = {

  propriete1: 1,
  propriete2: 2,
  methode: () => {
    console.log(this);
  }

};

// L’objet window apparait
unAutreObjet.methode();

Résumé

// Contexte global

var thisGlobal = this;
console.log(thisGlobal); // THIS = window


// --------------------


// Fonction

function thisFonction() {

  console.log(this);

}

thisFonction(); // THIS = window


// --------------------


// Objet

var unObjet = {

  propriete1: 1,
  propriete2: 2,
  methode: function() {
    this.proprieté1 = 3;
    console.log(this.proprieté1)
  }

};


unObjet.methode(); // THIS = unObjet


var unAutreObjet = {

  propriete1: 1,
  propriete2: 2,
  methode: () => {
    console.log(this);
  }

};

unAutreObjet.methode(); // THIS = window


// --------------------


// Une classe

class UneClass {

  constructor(param) {

    this.param = param;
    this.data1 = 1;
    this.data2 = 2;

  }

  getThis() {

    console.log(this)

  }

}

var inst = new UneClass('inst');

inst.getThis(); // THIS = UneClasse

Source

Le mot-clé THIS - John Codeur