Discussion :

[iluv]

Bonjour,

J'essaye de mettre à jour une variable lorsque je capture un click sur la page.

J'ai créé la classe suivante :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
function test()
{
    this.j = 0;
 
    function init()
    {
        window.onclick = this.inc;
    }
 
    function inc()
    {
        this.j += 1;
    }
 
    this.inc = inc;
    this.init = init;
}

Puis je teste avec le code suivant :

Code :

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

1
2
3
4
5
 
t = new test();
t.init();
t.inc();
t.inc();

Lorsque, avec firebug, je regarde mon objet t, je vois bien que j a été incrémenté deux fois lors des appels à la main à inc, mais quand je clique sur la page, rien ne se passe (pourtant, si je met un alert dans ma fonction inc, je vois qu'elle est bien appelée lors d'un clic sur la fenêtre).


Sauriez vous pourquoi, et surtout, sauriez vous comment faire pour que ça ait le comportement que je veux ?


Merci d'avance,

iLUV

[Bovino]

Salut,
Lorsque tu définis la fonction comme tu le fais puis que tu l'appelles, le code de la fonction est exécuté puis la fonction termine son exécution et son contexte disparait.
Pour pouvoir affecter des comportements spécifiques, tu dois déclarer ta fonction comme une variable, dont le code ne sert qu'à l'initialisation. Les fonctions définies à l'intérieur ne seront disponibles qu'à la création. Pour pouvoir y appliquer des fonctions en dehors du constructeur, il faut les définir comme méthodes du prototype de ta variable. Enfin, quand tu écris :

Code :

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

1
2
3
4
function init()
{
    window.onclick = this.inc;
}

le this dans la fonction correspond au this du contexte de cette fonction, pas de celui du constructeur, pour pallier à ce problème, on passe habituellement par une variable locale récupérant le contexte du constructeur, souvent appelée that :

Code :

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

1
2
3
4
5
var that = this;
function init()
{
    window.onclick = that.inc;
}

Ceci est possible car même si la référence à this est perdue, en revanche la fonction appelée hérite du contexte de la fonction appelante (au passage, c'est la raison pour laquelle le contexte de l'objet window est global puisque toutes les fonctions en héritent).
Donc, pour résumer :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
var test = function()
{
    this.j = 0;
    var that = this;
    function init()
    {
        window.onclick = that.inc;
    }
    init();
}
test.prototype.inc = function(){
    this.j++;
}

Dans cet exemple, la fonction init() est lancée à chaque création d'une instance test et au click, la méthode inc de l'objet test est appelée.

[iluv]

Bonsoir,

Merci pour cette rapide réponse, je me doutais un peu qu'il sagissait d'une histoire de contexte.

Je ne connaissait pas du tout cette méthode pour écrire des classes. A vrai dire, j'ai plus l'habitude d'utiliser des frameworks, ce qui m'évite assez souvent d'avoir à faire ce genre de choses.

Je comprends le concept de la solution que tu proposes, mais par contre, je ne comprends pas pourquoi ça ne marche pas.

Firebug ne m'affiche aucune erreur, mais j'ai beau cliquer, le j reste à 0.

Voici ce que je fais :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
var test = function()
{
    this.j = 0;
    var that = this;
    function init()
    {
        window.onclick = that.inc;
    }
    init();
}
test.prototype.inc = function(){
    this.j++;
}
 
t = new test();

Puis je clique comme un fou sur la page et j'inspecte mon objet t avec firebug, qui me dit que le j est toujours à 0.

Il me semble que init n'est pas appelé.

Un idée ?

[Bovino]

Oui, j'ai été un peu vite

Code :

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

1
2
3
test.prototype.inc = function(){
    this.j++;
}

Ca c'est pas terrible

Code :

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

1
2
3
test.prototype.inc = function(){
    this.j += 1;
}

devrait mieux le faire

[iluv]

Oui, j'ai été un peu vite

Code :

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

1
2
3
test.prototype.inc = function(){
    this.j++;
}

Ca c'est pas terrible

Code :

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

1
2
3
test.prototype.inc = function(){
    this.j += 1;
}

devrait mieux le faire

nope

Je pensais que la méthode init n'était pas appelée, mais en fait avec le code suivant je vois qu'elle l'est :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
var test = function()
{
    this.j = 0;
    var that = this;
 
    function init()
    {
        alert('init');
        window.onclick = that.inc;
    }
 
    init();
}
test.prototype.inc = function(){
    alert("j: " + this.j);
    this.j += 1;
}
 
t = new test();

Par contre, lorsque je clique sur la page, le message de l'alert m'indique que j est undefined.

J'ai essayé avec that pour voir, mais là c'est that qui est undefined.

[Bovino]

C'est normal :

Code :

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

window.onclick = that.inc;

l'objet window ne gère pas l'événement onclick, il faut passe par l'objet document

Code :

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

document.onclick = that.inc;

[iluv]

C'est normal :

Code :

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

window.onclick = that.inc;

l'objet window ne gère pas l'événement onclick, il faut passe par l'objet document

Code :

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

document.onclick = that.inc;

Toujours pas

La méthode inc est bien appelée (je le vois avec mon alert), c'est juste que pour une raison qui m'échappe, j n'est pas considéré comme défini (même en remplacent window par document).

edit:

Bon, ça marche maintenant, je ne sais pas exactement quel changement à fait que ça soit le cas, mais je suis content.

Voici mon code final, qui permet de gérer d'accéder aux attributs d'un objet javascript lors de la gestion d'un évènement :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
var c = function()
{
    var that = this;
    this.t = "kikou";
    this.j = 1;
 
    document.onclick = function() {
        that.dikikou();
    }
 
    this.dikikou = function() {
        this.a.push(this.j);
        this.j += 1;
        alert(this.t + " " + this.j);
    }
}

Merci beaucoup pour ton aide Bovino, tu m'a permis de découvrir un aspect de javascript qui m'était assez méconnu.