Le mot-clé this en JavaScript

Introduction au mot-clé this

En JavaScript, le mot-clé this peut avoir plusieurs significations en fonction du contexte d'exécution. La plupart du temps, il est utilisé dans une méthode d'un objet pour retourner l'instance de cet objet dont la fonction est exécutée, mais ce que this retourne peut varier selon le contexte.

Utilisation de this dans un contexte global

Lorsque utilisé dans un contexte global, this renvoie l'objet global. Dans un navigateur web, il s'agit de l'objet window, tandis que dans Node.js, il fait référence à l'objet global.

// Ces sorties supposent que ce code est exécuté dans un contexte global dans un navigateur
console.log(this === window); // Sortie : true
this.prop = 'value';
console.log(window.prop); // Sortie : value

Utilisation de this dans une fonction

En JavaScript, il existe différentes manières d'appeler une fonction, ce qui influence le comportement de this:

• Invocation de fonction
• Invocation de méthode
• Invocation de constructeur
• Invocation indirecte
• Fonctions fléchées

Chaque méthode a son propre contexte.

Invocation de fonction de base

this se comporte différemment en mode strict par rapport à non-strict. Dans le mode non-strict, il renvoie l'objet global.

// Mode non-strict dans un navigateur
function example() {  console.log(this === window);}
example(); // Sortie : true

En mode strict, this est indéfini.

// Mode strict dans un navigateur
'use strict';
function example() {  console.log(this === undefined);}
example(); // Sortie : true

Invocation de méthode

Dans une méthode d'un objet, this renvoie l'objet appelant la fonction, ce qui est similaire au comportement dans d'autres langages de programmation.

const obj = {  someValue: 100,  someFunc: function () {    return this.someValue;  }};
console.log(obj.someFunc()); // Sortie : 100
obj.someValue = 23;
console.log(obj.someFunc()); // Sortie : 23

Cependant, si la fonction est exécutée en dehors de l'objet, elle se comportera comme une invocation de fonction, renvoyant l'objet global sans la propriété someValue.

const obj = {  someValue: 100,  someFunc: function () {    return this.someValue;  }};
let getValue = obj.someFunc;
console.log(getValue()); // Sortie : undefined

Modification du comportement avec .bind()

Le comportement de this peut être modifié à l'aide de la méthode .bind(). Cette méthode permet de spécifier l'objet auquel this fera référence lors de la création d'une fonction.

const obj = {  someValue: 100,  someFunc: function () {    return this.someValue;  }};
let getValue = obj.someFunc.bind(obj); // GetValue saura que 'this' se réfère à obj
console.log(getValue()); // Sortie : 100

Invocation de constructeur

Lorsque le mot-clé new est utilisé pour créer une instance d'un objet fonctionnel, this fait référence au nouvel objet créé.

function Obj(value) {  this.someValue = value;}
let obj = new Obj(100);
console.log(obj.someValue); // Sortie : 100

Invocation indirecte avec .call() et .apply()

Les méthodes .call() et .apply() de la fonction permettent également de définir this dans un contexte spécifique et d'exécuter la fonction, contrairement à .bind() qui retourne une nouvelle fonction.

function showProp(prefix) {  console.log(prefix + this.someProperty);}
let obj1 = {  someProperty: 23};
let obj2 = {  someProperty: 37};
showProp.call(obj1, 'La propriété est '); // Sortie : La propriété est 23
showProp.call(obj2, 'La propriété est '); // Sortie : La propriété est 37
showProp.apply(obj1, ['La propriété est ']); // Sortie : La propriété est 23
showProp.apply(obj2, ['La propriété est ']); // Sortie : La propriété est 37

Utilisation des fonctions fléchées

Les fonctions fléchées n'ont pas leur propre contexte pour this. La valeur de this est héritée de la fonction englobante.

// Utilisation du contexte global
let someFunction = () => this;
console.log(someFunction() === window); // Sortie : true

// Utilisation du contexte constructeur
function Obj() {  let someFunction = () => this;  someFunction().someProperty = 25;}
let obj = new Obj();
console.log(obj.someProperty); // Sortie = 25;