mozilla
Vos résultats de recherche

    L'opérateur this

    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 le mode strict ou le mode non-strict.

    Dans la plupart des cas, la valeur de this 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éthode bind a été introduite avec ECMAScript 5 pour définir la valeur de this pour une fonction, indépendamment de la façon dont elle est appelée.

    Syntaxe

    this

    Dans le contexte global

    Dans le contexte d'exécution global (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).

    console.log(this.document === document); // true
    
    // 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
    

    Dans le contexte d'une fonction

    S'il est utilisé dans une fonction, la valeur de this dépendra de la façon dont la fonction a été appelée.

    Avec un appel simple

    function f1(){
      return this;
    }
    
    f1() === window; // objet global
    

    Dans cet exemple, la valeur de this 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.

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

    En mode strict, la valeur de this 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 reste undefined. Il pourrait être défini avec n'importe quelle autre valeur, telle que null ou 42 ou "Je ne suis pas this".

    Note : Dans ce deuxième exemple,this vaut undefined car f2 a été appelé sans « base » (ex. : window.f2()). Cette fonctionnalité ne fut pas correctement implémentée dans certains navigateurs aux débuts du mode strict, en effet, certains renvoyaient alors l'objet window.

    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 appelle o.f(), le this contenu à l'intérieur de la fonction correspond à l'objet o.

    var o = {
      prop: 37,
      f: function() {
        return this.prop;
      }
    };
    
    console.log(o.f()); // affiche 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é de o 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()); // affiche 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) de o.

    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 fonction o.b.g, on appelle la méthode g de l'objet o.b. Ainsi, au moment de l'exécution, this fera référence à o.b. Le fait que cet objet soit une propriété de o 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()); // logs 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 variable p 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 de this 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, aussi this fera référence à l'objet représenté par p. Autrement dit f étant appelé comme une méthode de p, this fera ici référence à p. Cette fonctionnalité fait partie des caractéristiques l'héritage prototypique de JavaScript.

    this dans un getter ou setter

    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 son this 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), le this correspondant sera lié au nouvel objet en train d'être construit.

    Note : Par défaut, un constructeur renverra l'objet auquel this fait référence. Cependant si la valeur de retour du constructeur est définie et est un objet, ce sera elle qui sera renvoyée (sinon ce sera la valeur de this).

    /*
     * Les constructeurs fonctionnent de la façon suivante :
     *
     * function MonConstructeur(){
     *   // le corps de la fonction
     *   // on crée des propriété 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); // logs 37
    
    
    function C2(){
      this.a = 37;
      return {a:38};
    }
    
    o = new C2();
    console.log(o.a); // logs 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.)

    call et apply

    Lorsque le mot-clé this est utilisé dans le corps d'une fonction, il est possible d'utiliser les méthodes call et apply pour lier this à 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 fonction
    ajout.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 fonction
    ajout.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34
    

    Note : Si la valeur à lier à this, passée à call ou apply, n'est pas un objet, le moteur JavaScript tentera de la convertir en un objet grâce à l'opération interne ToObject. 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 nombre 7 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]
    

    La méthode bind

    Avec ECMAScript 5, une nouvelle fonction fut introduite : Function.prototype.bind. Lorsqu'on appelle f.bind(unObjet), on crée une nouvelle fonction qui possède le même corps et la même portée que f, 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()); // azerty
    
    var o = {a:37, f:f, g:g};
    console.log(o.f(), o.g()); // 37, azerty
    

    En tant que gestionnaire d'événement DOM

    Lorsqu'une fonction est utilisée comme gestionnaire d'événement (event handler), le this 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 bleu
    function 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 document
    var elements = document.getElementsByTagName('*');
    
    // On ajout le listener bluify pour réagier au clic
    // Quand on clique sur un élément, il deviendra bleu
    for(var i=0 ; i<elements.length ; i++){
      elements[i].addEventListener('click', bluify, false);
    }

    En tant que gestionnaire d'événements in-line

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

    <button onclick="alert(this.tagName.toLowerCase());">
      Afficher this
    </button>
    

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

    <button onclick="alert((function(){return this}()));">
      Afficher le this interne
    </button>
    

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

    Spécifications

    Spécification Statut Commentaires
    Première édition d'ECMAScript. Standard Définition initiale. Implémentée avec JavaScript 1.0
    ECMAScript 5.1 (ECMA-262)
    La définition de 'The this keyword' dans cette spécification.
    Standard  
    ECMAScript 6 (ECMA-262)
    La définition de 'The this keyword' dans cette spécification.
    En cours de validation comme recommandation  

    Compatibilité des navigateurs

    Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari
    Support simple (Oui) (Oui) (Oui) (Oui) (Oui)
    Fonctionnalité Android Chrome pour Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    Support simple (Oui) (Oui) (Oui) (Oui) (Oui) (Oui)

    Voir aussi

    Étiquettes et contributeurs liés au document

    Contributors to this page: SphinxKnight, teoli
    Dernière mise à jour par : SphinxKnight,
    Masquer la barre latérale