En JavaScript,le mot-cléthis se comporte légèrement différemment des autres langages de programmation. Son comportement variera également légèrement selon qu'on utilise lemode strict ou le mode non-strict.

Dans la plupart des cas, la valeur dethis sera déterminée à partir de la façon dont une fonction est appelée. Il n'est pas possible de lui affecter une valeur lors de l'exécution et sa valeur peut être différente à chaque fois que la fonction est appelée. La méthodebind() a été introduite avec ECMAScript 5 pourdéfinir la valeur dethis pour une fonction, indépendamment de la façon dont elle est appelée. ECMAScript 2015 (ES6) a ajoutéles fonctions fléchées dans lesquellesthis correspond à la valeur du contexte englobant.

Exemple interactif

const test = {  prop: 42,  func: function () {    return this.prop;  },};console.log(test.func());// Expected output: 42

Syntaxe

this;

Valeur

L'objet JavaScript représentant le contexte dans lequel le code courant est exécuté.

Dans le contexte global

Dans le contexte global d'exécution (c'est-à-dire, celui en dehors de toute fonction),this fait référence à 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 globalconsole.log(this === window); // truethis.a = 37;console.log(window.a); // 37this.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 dethis dépendra de la façon dont la fonction a été appelée.

Avec un appel simple

function f1() {  return this;}// Dans un navigateurf1() === window; // true (objet global)// Côté serveur (ex. Node)f1() === global; // true

Dans cet exemple, la valeur dethis n'est pas définie 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 (soitwindow pour un navigateur).

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

En mode strict, la valeur dethis est conservée (il reste le même) entre le moment de sa définition et l'entrée dans le contexte d'exécution. S'il n'est pas défini, il resteundefined. Il pourrait être défini avec n'importe quelle autre valeur, telle quenull ou42 ou"Je ne suis pas this".

call etapply

Pour passerthis d'un contexte à un autre, on pourra utilisercall() ouapply() :

// Un objet peut être passé en premier argument// de call ou de applyvar obj = { a: "Toto" };// Ici, on déclare une variable et la variable est affectée à l'objet global window comme propriété de celui-civar a = "Global";function whatsThis(arg) {  // La valeur de this ici dépend de la façon  // dont la fonction est appelée  return this.a;}whatsThis(); // 'Global' car celui-ci dans la fonction n'est pas défini, il est donc défini par défaut sur l'objet global windowwhatsThis.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 méthodescall() ouapply() pour lierthis à un objet donné. Toutes les fonctions héritent de ces méthodes grâce àFunction.prototype.

function ajout(c, d) {  return this.a + this.b + c + d;}var o = { a: 1, b: 3 };// Le premier paramètre correspond à l'objet qu'on souhaite// lier à 'this', les paramètres suivants sont les arguments// à utiliser dans l'appel de la fonctionajout.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16// Le premier paramètre correspond à l'objet qu'on souhaite// lier à 'this', le second paramètre est le tableau dont les// les éléments sont les arguments à passer à la fonctionajout.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34

Note : En mode non-strict, si la valeur à lier àthis, passée àcall ouapply, n'est pas un objet, le moteur JavaScript tentera de la convertir en un objet grâce à l'opération interneToObject. Si la valeur est d'un type primitif autre qu'objet,7 ou'toto' par exemple, elle sera convertie en un objet grâce au constructeur associé. Ainsi, on aura le nombre7 converti en un objet grâce ànew Number(7) et la chaîne'toto' convertie en objet grâce ànew String('toto').

function truc() {  console.log(Object.prototype.toString.call(this));}truc.call(7); // [object Number]truc.call("foo"); // [object String]

La méthodebind

Avec ECMAScript 5, une nouvelle fonction fut introduite :Function.prototype.bind(). Lorsqu'on appellef.bind(unObjet), on crée une nouvelle fonction qui possède le même corps et la même portée quef, mais oùthis sera lié, de façon permanente, au premier argument passé àbind, quelle que soit la façon dont la méthode est utilisée.

function f() {  return this.a;}var g = f.bind({ a: "azerty" });console.log(g()); // azertyvar h = g.bind({ a: "coucou" }); // bind ne fonctionne qu'une seule foisconsole.log(h()); // azertyvar 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 fléchées

En utilisantles fonctions fléchées,this correspond à la valeur dethis utilisé dans le contexte englobant. Lorsqu'on utilise une fonction fléchée dans du code global,this sera l'objet global :

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

Peu importe la façon donttoto sera appelée,this sera toujours l'objet global. Cela est également valable pour les méthodes d'objet (où généralementthis correspond à l'objet courant) ou lorsquecall,apply oubind sont utilisés :

// Appelé comme la méthode d'un objetvar obj = { toto: toto };console.log(obj.toto() === objetGlobal); // true// Ici on utilise callconsole.log(toto.call(obj) === objetGlobal); // true// Là on utilise bindtoto = toto.bind(obj);console.log(toto() === objetGlobal); // true

Quelle que soit la méthode utilisée lethis detoto sera défini avec la valeur qu'il avait lors de la création (dans l'exemple précédent, il s'agit de l'objet global). Cela vaut également pour les fonctions fléchées créées dans d'autres fonctions :this prendra la valeur dethis dans le contexte englobant.

// On crée un objet obj qui a une méthode truc// qui renvoie une fonction qui renvoie la// valeur de this.// La fonction qui est renvoyée est créée sous// la forme d'une fonction fléchée. this est// donc fixé de façon permanente avec la valeur// de this du contexte englobant.var obj = {  truc: function () {    var x = () => this;    return x;  },};// On appelle truc comme une méthode d'obj, this// vaudra donc obj. On récupère la fonction// renvoyée par truc et on en stocke une référence// avec la variable fnvar fn = obj.truc();// On appelle fn sans définir this, par défaut// en mode strict cela correspondrait à l'objet// global ou à undefinedconsole.log(fn() === obj); // true// Attention à ne pas référence la méthode d'obj// sans l'appelervar fn2 = obj.truc;// Appeler le this de la fonction fléchée 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 précédent, la fonction affectée àobj.truc renvoie une autre fonction créée sous la forme d'une fonction fléchée. Par conséquent,this vaut toujoursobj.truc lorsque la fonction est appelée. Lorsque la fonction est renvoyée,this continue de correspondre à la valeur initiale. Dans ce code,this vautobj et garde cette valeur, même lorsqu'il est appelé plus tard.

En tant que méthode d'un objet

Lorsqu'une fonction est appelée comme méthode d'un objet,this correspondra à l'objet possédant la méthode qu'on appelle.

Ainsi, dans l'exemple suivant, lorsqu'on appelleo.f(), lethis contenu à l'intérieur de la fonction correspond à l'objeto.

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 façon ou l'endroit de la définition de la fonction. Dans l'exemple précédent, on aurait très bien pu définir la fonction plus tard et la rattacher à une propriété deo plutôt que de la déclarer de cette façon. On aura le même résultat en faisant ainsi :

var o = { prop: 37 };function indépendante() {  return this.prop;}o.f = indépendante;console.log(o.f()); // 37

On voit ici que ce qui importe est la façon dont la fonction est appelée et non pas la façon dont elle est définie. Ici la fonction est appelée comme une propriété (méthode) deo.

De la même façon,this n'est affecté que par la référence la plus proche. Autrement dit, dans l'exemple suivant quand on appelle la fonctiono.b.g, on appelle la méthodeg de l'objeto.b. Ainsi, au moment de l'exécution,this fera référence ào.b. Le fait que cet objet soit une propriété deo n'a aucun impact : seule la référence objet la plus proche compte.

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

this sur la chaîne de prototypes de l'objet

Ce qui a été vu ci-avant est également applicable pour les méthodes qui sont présentes sur la chaîne de prototypes de l'objet. Si une méthode se situe sur la chaîne de prototype,this fera référence à l'objet appelant (de la même façon que si la méthode était une propriété 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 variablep ne possède pas directement la propriétéf, il en hérite de par son prototype. Cela n'impacte en rien la détermination dethis car la recherche de la propriétéf remonte le long de la chaîne de prototype et s'arrête ào. Au début de cette recherche, on a une référence àp.f, aussithis fera référence à l'objet représenté parp. Autrement ditf étant appelé comme une méthode dep,this fera ici référence àp. Cette fonctionnalité fait partie des caractéristiques de l'héritage prototypal de JavaScript.

this dans ungetter ousetter

Ici aussi, on a le même principe lorsque la fonction est appelée à partir d'un accesseur (getter) ou d'un mutateur (setter). Une fonction utilisée comme accesseur ou mutateur verra sonthis lié à l'objet à partir duquel on souhaite accéder/changer la propriété.

function moduleRéel() {  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, "moduleRéel", {  get: moduleRéel,  enumerable: true,  configurable: true,});console.log(o.phase, o.moduleRéel); // logs -0.78 1.4142

En tant que constructeur

Lorsqu'une fonction est utilisée comme constructeur (c'est-à-dire qu'elle est invoquée avec le mot-clénew), lethis correspondant sera lié au nouvel objet en train d'être construit.

/* * Les constructeurs fonctionnent de la façon suivante : * * function MonConstructeur(){ *   // le corps de la fonction *   // on crée des propriétés 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 résultat de *   // l'expression |new|. *   // Sinon, le résultat sera l'objet *   // lié à |this| *   // (ce second cas est celui qu'on rencontre *   // fréquemment). * } */function C() {  this.a = 37;}var o = new C();console.log(o.a); // 37function 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 exécutée, elle n'aura aucun effet de bord.)

En tant que gestionnaire d'événement DOM

Lorsqu'une fonction est utilisée comme gestionnaire d'événement (event handler), lethis correspondant prendra la valeur de l'élément ayant déclenché l'événement (certains navigateurs ne suivent pas cette convention et les gestionnaires sont ajoutés dynamiquement avec d'autres méthodes qu'addEventListener()).

// Lorsque cette fonction est appelée// comme listener, l'élément associé// sera coloré en bleufunction bluify(e) {  // Cette proposition est toujours vraie  console.log(this === e.currentTarget);  // true lorsque currentTarget et target correspondent  // au même objet  console.log(this === e.target);  this.style.backgroundColor = "#A5D9F3";}// On obtient une liste de tous les éléments// contenus dans le documentvar elements = document.getElementsByTagName("*");// On ajout le listener bluify pour réagier au clic// Quand on clique sur un élément, il deviendra bleufor (var i = 0; i < elements.length; i++) {  elements[i].addEventListener("click", bluify, false);}

En tant que gestionnaire d'événementsin-line

Lorsque le code est appelé depuis un gestionnaire d'événement « en ligne » (in-line), la valeur dethis correspondra à l'élément du DOM sur lequel on a placé lelistener. Ainsi :

<button>  Afficher this</button>

montrera le textebutton lorsqu'on cliquera dessus. Attention, seul le code externe verra la valeur dethis affectée de cette façon :

<button>  Afficher le this interne</button>

Ici, on utilisethis à l'intérieur d'une fonction et il n'est pas défini en amont. Il renvoie donc l'objet global (l'objetwindow pour un navigateur avec du code non-strict).

Spécifications

Compatibilité des navigateurs

Voir aussi

• Le mode strict
• this & les prototypes objet de Kyle Simpson sur GitHub (en anglais)
• Un article explicatif surthis (en anglais)
• La propriétéglobalThis qui permet d'accéder à l'objet globalthis