L'oprateur this

Exemple interactif

const test = {
  prop: 42,
  func: function () {
    return this.prop;
  },
};

console.log(test.func());
// Expected output: 42

Syntaxe

this;

Valeur

L'objet JavaScript reprsentant le contexte dans lequel le code courant est excut.

Dans le contexte global

Dans le contexte global d'excution (c'est--dire, celui en dehors de toute fonction), this fait rfrence l'objet global (qu'on utilise ou non le mode strict).

// Si l'environnement de script est un navigateur,
// l'objet window sera l'objet global
console.log(this === window); // true

this.a = 37;
console.log(window.a); // 37

this.b = "MDN";
console.log(window.b); // "MDN"
console.log(b); // "MDN"

Dans le contexte d'une fonction

S'il est utilis dans une fonction, la valeur de this dpendra de la faon dont la fonction a t appele.

Avec un appel simple

function f1() {
  return this;
}

// Dans un navigateur
f1() === window; // true (objet global)

// Ct serveur (ex. Node)
f1() === global; // true

Dans cet exemple, la valeur de this n'est pas dfinie lors de l'appel. Le code n'tant pas en mode strict, this doit toujours tre un objet et ce sera donc l'objet global (soit window pour un navigateur).

function f2() {
  "use strict"; // on utilise le mode strict
  return this;
}

f2() === undefined; // true

En mode strict, la valeur de this est conserve (il reste le mme) entre le moment de sa dfinition et l'entre dans le contexte d'excution. S'il n'est pas dfini, il reste undefined. Il pourrait tre dfini avec n'importe quelle autre valeur, telle que null ou 42 ou "Je ne suis pas this".

call et apply

Pour passer this d'un contexte un autre, on pourra utiliser call() ou apply() :

// Un objet peut tre pass en premier argument
// de call ou de apply
var obj = { a: "Toto" };

// Ici, on dclare une variable et la variable est affecte  l'objet global window comme proprit de celui-ci
var a = "Global";

function whatsThis(arg) {
  // La valeur de this ici dpend de la faon
  // dont la fonction est appele
  return this.a;
}

whatsThis(); // 'Global' car celui-ci dans la fonction n'est pas dfini, il est donc dfini par dfaut sur l'objet global window
whatsThis.call(obj); // "Toto"
whatsThis.apply(obj); // "Toto"

Lorsque le mot-cl this est utilis dans le corps d'une fonction, il est possible d'utiliser les mthodes call() ou apply() pour lier this un objet donn. Toutes les fonctions hritent de ces mthodes grce Function.

function ajout(c, d) {
  return this.a + this.b + c + d;
}

var o = { a: 1, b: 3 };

// Le premier paramtre correspond  l'objet qu'on souhaite
// lier  'this', les paramtres suivants sont les arguments
//  utiliser dans l'appel de la fonction
ajout.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16

// Le premier paramtre correspond  l'objet qu'on souhaite
// lier  'this', le second paramtre est le tableau dont les
// les lments sont les arguments  passer  la fonction
ajout.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34

Note : En mode non-strict, si la valeur lier this, passe call ou apply, n'est pas un objet, le moteur JavaScript tentera de la convertir en un objet grce l'opration interne ToObject. Si la valeur est d'un type primitif autre qu'objet, 7 ou 'toto' par exemple, elle sera convertie en un objet grce au constructeur associ. Ainsi, on aura le nombre 7 converti en un objet grce new Number(7) et la chane 'toto' convertie en objet grce new String('toto').

function truc() {
  console.log(Object.prototype.toString.call(this));
}

truc.call(7); // [object Number]
truc.call("foo"); // [object String]

La mthode bind

Avec ECMAScript 5, une nouvelle fonction fut introduite : Function.prototype.bind(). Lorsqu'on appelle f.bind(unObjet), on cre une nouvelle fonction qui possde le mme corps et la mme porte que f, mais o this sera li, de faon permanente, au premier argument pass bind, quelle que soit la faon dont la mthode est utilise.

function f() {
  return this.a;
}

var g = f.bind({ a: "azerty" });
console.log(g()); // azerty

var h = g.bind({ a: "coucou" }); // bind ne fonctionne qu'une seule fois
console.log(h()); // azerty

var o = { a: 37, f: f, g: g, h: h };
console.log(o.a, o.f(), o.g(), o.h()); // 37, 37, azerty, azerty

Avec les fonctions flches

En utilisant les fonctions flches, this correspond la valeur de this utilis dans le contexte englobant. Lorsqu'on utilise une fonction flche dans du code global, this sera l'objet global :

var objetGlobal = this;
var toto = () => this;
console.log(toto() === objetGlobal); // true

Peu importe la faon dont toto sera appele, this sera toujours l'objet global. Cela est galement valable pour les mthodes d'objet (o gnralement this correspond l'objet courant) ou lorsque call, apply ou bind sont utiliss :

// Appel comme la mthode d'un objet
var obj = { toto: toto };
console.log(obj.toto() === objetGlobal); // true

// Ici on utilise call
console.log(toto.call(obj) === objetGlobal); // true
// L on utilise bind
toto = toto.bind(obj);
console.log(toto() === objetGlobal); // true

Quelle que soit la mthode utilise le this de toto sera dfini avec la valeur qu'il avait lors de la cration (dans l'exemple prcdent, il s'agit de l'objet global). Cela vaut galement pour les fonctions flches cres dans d'autres fonctions : this prendra la valeur de this dans le contexte englobant.

// On cre un objet obj qui a une mthode truc
// qui renvoie une fonction qui renvoie la
// valeur de this.
// La fonction qui est renvoye est cre sous
// la forme d'une fonction flche. this est
// donc fix de faon permanente avec la valeur
// de this du contexte englobant.
var obj = {
  truc: function () {
    var x = () => this;
    return x;
  },
};
// On appelle truc comme une mthode d'obj, this
// vaudra donc obj. On rcupre la fonction
// renvoye par truc et on en stocke une rfrence
// avec la variable fn
var fn = obj.truc();

// On appelle fn sans dfinir this, par dfaut
// en mode strict cela correspondrait  l'objet
// global ou  undefined
console.log(fn() === obj); // true

// Attention  ne pas rfrence la mthode d'obj
// sans l'appeler
var fn2 = obj.truc;
// Appeler le this de la fonction flche dans ce contexte
// renverra window car c'est le this associ  fn2 (qui
// correspond au contexte global)
console.log(fn2()() == window); // true

Dans l'exemple prcdent, la fonction affecte obj.truc renvoie une autre fonction cre sous la forme d'une fonction flche. Par consquent, this vaut toujours obj.truc lorsque la fonction est appele. Lorsque la fonction est renvoye, this continue de correspondre la valeur initiale. Dans ce code, this vaut obj et garde cette valeur, mme lorsqu'il est appel plus tard.

En tant que mthode d'un objet

Lorsqu'une fonction est appele comme mthode d'un objet, this correspondra l'objet possdant la mthode qu'on appelle.

Ainsi, dans l'exemple suivant, lorsqu'on appelle o.f(), le this contenu l'intrieur de la fonction correspond l'objet o.

var o = {
  prop: 37,
  f: function () {
    return this.prop;
  },
};

console.log(o.f()); // 37

On notera que ce comportement n'est pas du tout affect par la faon ou l'endroit de la dfinition de la fonction. Dans l'exemple prcdent, on aurait trs bien pu dfinir la fonction plus tard et la rattacher une proprit de o plutt que de la dclarer de cette faon. On aura le mme rsultat en faisant ainsi :

var o = { prop: 37 };

function indpendante() {
  return this.prop;
}

o.f = indpendante;

console.log(o.f()); // 37

On voit ici que ce qui importe est la faon dont la fonction est appele et non pas la faon dont elle est dfinie. Ici la fonction est appele comme une proprit (mthode) de o.

De la mme faon, this n'est affect que par la rfrence la plus proche. Autrement dit, dans l'exemple suivant quand on appelle la fonction o.b.g, on appelle la mthode g de l'objet o.b. Ainsi, au moment de l'excution, this fera rfrence o.b. Le fait que cet objet soit une proprit de o n'a aucun impact : seule la rfrence objet la plus proche compte.

o.b = { g: indpendante, prop: 42 };
console.log(o.b.g()); // 42

this sur la chane de prototypes de l'objet

Ce qui a t vu ci-avant est galement applicable pour les mthodes qui sont prsentes sur la chane de prototypes de l'objet. Si une mthode se situe sur la chane de prototype, this fera rfrence l'objet appelant (de la mme faon que si la mthode tait une proprit directe de l'objet).

var o = {
  f: function () {
    return this.a + this.b;
  },
};
var p = Object.create(o);
p.a = 1;
p.b = 4;

console.log(p.f()); // 5

Dans cet exemple, l'objet qui est affect la variable p ne possde pas directement la proprit f, il en hrite de par son prototype. Cela n'impacte en rien la dtermination de this car la recherche de la proprit f remonte le long de la chane de prototype et s'arrte o. Au dbut de cette recherche, on a une rfrence p.f, aussi this fera rfrence l'objet reprsent par p. Autrement dit f tant appel comme une mthode de p, this fera ici rfrence p. Cette fonctionnalit fait partie des caractristiques de l'hritage prototypal de JavaScript.

this dans un getter ou setter

Ici aussi, on a le mme principe lorsque la fonction est appele partir d'un accesseur (getter) ou d'un mutateur (setter). Une fonction utilise comme accesseur ou mutateur verra son this li l'objet partir duquel on souhaite accder/changer la proprit.

function moduleRel() {
  return Math.sqrt(this.re * this.re + this.im * this.im);
}

var o = {
  re: 1,
  im: -1,
  get phase() {
    return Math.atan2(this.im, this.re);
  },
};

Object.defineProperty(o, "moduleRel", {
  get: moduleRel,
  enumerable: true,
  configurable: true,
});

console.log(o.phase, o.moduleRel); // logs -0.78 1.4142

En tant que constructeur

Lorsqu'une fonction est utilise comme constructeur (c'est--dire qu'elle est invoque avec le mot-cl new), le this correspondant sera li au nouvel objet en train d'tre construit.

/*
 * Les constructeurs fonctionnent de la faon suivante :
 *
 * function MonConstructeur(){
 *   // le corps de la fonction
 *   // on cre des proprits sur |this|
 *   // par exemple
 *   this.fum = "nom";
 *   // etc.
 *
 *   // Si la fonction utilise une instruction de
 *   // retour (return) et renvoie un objet
 *   // ce sera cet objet qui sera le rsultat de
 *   // l'expression |new|.
 *   // Sinon, le rsultat sera l'objet
 *   // li  |this|
 *   // (ce second cas est celui qu'on rencontre
 *   // frquemment).
 * }
 */

function C() {
  this.a = 37;
}

var o = new C();
console.log(o.a); // 37

function C2() {
  this.a = 37;
  return { a: 38 };
}

o = new C2();
console.log(o.a); // 38

Dans le dernier exemple (C2), on renvoie un objet lors de la construction. L'objet qui tait li this est alors abandonn. (L'instruction "this.a = 37;" devient alors totalement inutile, bien qu'elle soit excute, elle n'aura aucun effet de bord.)

En tant que gestionnaire d'vnement DOM

Lorsqu'une fonction est utilise comme gestionnaire d'vnement (event handler), le this correspondant prendra la valeur de l'lment ayant dclench l'vnement (certains navigateurs ne suivent pas cette convention et les gestionnaires sont ajouts dynamiquement avec d'autres mthodes qu'addEventListener()).

// Lorsque cette fonction est appele
// comme listener, l'lment associ
// sera color en bleu
function bluify(e) {
  // Cette proposition est toujours vraie
  console.log(this === e.currentTarget);

  // true lorsque currentTarget et target correspondent
  // au mme objet
  console.log(this === e.target);

  this.style.backgroundColor = "#A5D9F3";
}

// On obtient une liste de tous les lments
// contenus dans le document
var elements = document.getElementsByTagName("*");

// On ajout le listener bluify pour ragier au clic
// Quand on clique sur un lment, il deviendra bleu
for (var i = 0; i < elements.length; i++) {
  elements[i].addEventListener("click", bluify, false);
}

En tant que gestionnaire d'vnements in-line

Lorsque le code est appel depuis un gestionnaire d'vnement en ligne (in-line), la valeur de this correspondra l'lment du DOM sur lequel on a plac le listener. Ainsi :

<button >
  Afficher this
</button>

montrera le texte button lorsqu'on cliquera dessus. Attention, seul le code externe verra la valeur de this affecte de cette faon :

<button >
  Afficher le this interne
</button>

Ici, on utilise this l'intrieur d'une fonction et il n'est pas dfini en amont. Il renvoie donc l'objet global (l'objet window pour un navigateur avec du code non-strict).

Spcifications

Compatibilit des navigateurs

Voir aussi

• Le mode strict
• this & les prototypes objet de Kyle Simpson sur GitHub (en anglais)
• Un article explicatif sur this (en anglais)
• La proprit globalThis qui permet d'accder l'objet global this