Discussion :

[topolino]

Bonjour,

Dans beaucoup de code Javascript la premiere chose qui est faite est:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var that = this;

Pourquoi copier le this ?

Car toutes modifications dans le that sera copier dans le this non ?

Merci pour vos explications.

[SpaceFrog]

Cette méthode est utilisé pour des raisons de "scope" (portée) de variable.

Ma variable that n'est pas une référence à this, elle est donc attribuée à un instant donné et ne subit pas les modifications de this.

[topolino]

that est une simple copie alors ? Il n y a plus de reference entre this et that, c'est bien ca ?

[Bovino]

Si : les deux variables référencent le même objet, donc toute modification de l'une sera répercutée dans l'autre. Mais comme expliqué par Spaffy, l'appel de certaines méthodes (notamment les timers ou les événements) font que dans leur callback, this ne correspond plus au même objet, du coup, tu peux avoir besoin de conserver une référence à l'objet d'origine via une autre variable.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
window.foo = 'bar';
var Exemple = function(){
    this.foo = 'baz';
    this.timer = function(){
        var that = this; // this correspond ici à l'instance de l'objet
        console.log(this.foo);
        setTimeout(function(){
            console.log(this.foo);  // "bar"
            console.log(that.foo);  // "baz"
        });
    };
}
var monExemple = new Exemple();
mon

[Kaamo]

Ce n'est pas vraiment une copie mais une sauvegarde de la référence au this courant pour ne pas le perdre.
that est bien une référence à this. Mais pas n'importe quel this. Tu as tout compris hein ?

En fait, on ne voit cette sauvegarde de référence que dans un cas bien particulier. C'est un soucis sur la spéc des fonction imbriquées. Le this ne pointe pas sur l'objet parent de la fonction mais sur l'objet qui appelle la fonction.
Quand une fonction est exécutée, le this réfère donc à l'objet qui appelle cette fonction.

Pour compléter les compères ci-dessus, voici un petit fiddle. Si c'est encore flou, n'hésite pas

[SylvainPV]

C'est quand même mieux quand les devs prennent le temps de nommer correctement la variable: currentItem, itemInstance... Ou encore utiliser Function.prototype.bind dont le support commence à être quasi-généralisé.