Discussion :

[Aloneghost]

Bonjour, voilà mon soucis, j'ai décidé de passer mes script Js en orienté objet pour faciliter la maintenance, mais j'ai certaines difficultés avec une classe :

La classe en question :

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
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
function CFadingMenu()
{
//Initialisation des propriétés d'instance
this.isOver = false;
this.transparence = 0;
};
//Définition des méthodes de l'objet
CFadingMenu.prototype.downOpacity = function()
{
    if (this.isOver == false)
    {
        document.getElementById("menugris").style.filter = "alpha(opacity="+this.transparence+")";
        document.getElementById("menugris").style.opacity = this.transparence / 100;
        if (this.transparence <= 100)
        {
            this.transparence += 10;
            setTimeout("this.downOpacity();",50);
        }
    }
};
 
CFadingMenu.prototype.upOpacity = function()
{
    if (this.isOver == true)
    {
        document.getElementById("menugris").style.filter = "alpha(opacity="+this.transparence+")";
        document.getElementById("menugris").style.opacity = this.transparence / 100;
        if (this.transparence >= 0)
        {
            this.transparence = this.transparence - 10;
            setTimeout("this.upOpacity();",50);
        }
    }
};
 
CFadingMenu.prototype.mouseOver = function()
{
    this.isOver = true;
    this.upOpacity();
};
 
CFadingMenu.prototype.mouseOut = function()
{
    this.isOver = false;
    this.downOpacity();
};

Me sort un message d'erreur du genre

Code :

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

1
2
this.downOpacity is not a function
[Break on this error] setTimeout("this.downOpacity();",50);

Alors je ne comprend pas où se trouve l'erreur, j'ai bien essayé de passer l'objet en paramètre mais ça n'a pas arrangé les choses :S


Merci !

[Bovino]

Tu perds manifestement la référence à this au cours de ton script.

[marcha]

Comme le dit Bovino, tu perds la référence au this

C'est du au fait que l'appel de la fonction upOpacity se
fait depuis un autre contexte (celui du timer)

Tu devrais pouvoir t'en sortir avec la closure suivante:

Code :

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

1
2
3
setTimeout(function(obj) {
  return obj.upOpacity; 
}(this), 50);

A tester

[Bovino]

Je n'avais pas développé plus ma réponse parce qu'en dehors de ce cas, je pense que d'autres se cachent dans d'autres parties du code, en particulier les appels à

Code :

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

1
2
3
4
5
6
7
8
9
10
11
CFadingMenu.prototype.mouseOver = function()
{
    this.isOver = true;
    this.upOpacity();
};
 
CFadingMenu.prototype.mouseOut = function()
{
    this.isOver = false;
    this.downOpacity();
};

dont je subodore qu'ils proviennent d'un code du type

Code :

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

HTMLElement.onmouseover = function(){...};

et pour lesquels il faut aussi passer la référence à this.

Ceci dit, personnellement, j'utilise une autre méthode : j'affecte le this à une variable (habituellement that) que j'affecte au this de la fonction avec apply :

Code :

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

1
2
3
4
5
var that = this;
var monElem = document.getElementById('element');
monElem.onmouseover = function(){
    that.maFonction.apply(that);
}

[marcha]

Ceci dit, personnellement, j'utilise une autre méthode : j'affecte le this à une variable (habituellement that) que j'affecte au this de la fonction avec apply :

Code :

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

1
2
3
4
5
var that = this;
var monElem = document.getElementById('element');
monElem.onmouseover = function(){
    that.maFonction.apply(that);
}

L'exemple que tu donnes ne nécessite pas l'usage d'apply :-(
that.maFonction() suffit. apply est nécessaire que si l'on a
la fonction sous forme d'une référence (qu'on a pas son nom)

Explications par cet exemple:

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
function MonObj() {
	this.a = 'test';
	var that = this;
	window.onclick = function() {
		that.toto(); // suffisant
		that.toto.apply(that); // redondant
 		var func_ref = MonObj.prototype.toto; // simule une référence pour mon exemple
		func_ref.apply(that); // apply nécessaire car that.func_ref() impossible
	}
}
 
MonObj.prototype.toto = function() {
	alert(this.a);
}
 
var x = new MonObj();

[Bovino]

L'exemple que tu donnes ne nécessite pas l'usage d'apply :-(

Promis, demain, j'arrête l'alcool...