Discussion :

[threonine]

Bonjour,

J'ai récemment décidé de me mettre à la "POO" avec Javascript. J'utilise donc le prototypage, mais j'ai un soucis au niveau du code suivant (version simplifiée de mon code) :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var maClasse = function(cadreCible){
	this.cadre = cadreCible;
	this.boite = this.add();
}
 
maClasse.prototype = {
	add : function(){
		// Divers opérations dont celle ci-dessous
		monBouton.addEventListener('click',this.remove,false);
	}
	remove : function(){
		this.cadre.removeChild(this.boite);
	}
}

Lorsque je créé une instance de cette classe, je passe en argument un cadre (div), que j'affecte à la propriété cadre. La méthode add est alors appelée, ajoute des éléments au DOM, et renvoie l'élément principal ajouté à la propriété boite.

Dans la méthode add, je fais appel à un addEventListener pour executer une fonction au clic sur un bouton.

Le soucis est le suivant : dans la méthode remove, this ne fait plus référence à ma classe mais à monBouton.

Sauriez vous comment je pourrais faire référence aux propriétés cadre et boite dans la méthode remove ?

Je vous remercie d'avance.

[p3ga5e]

Salut !

En JavaScript utilisation du mot clef this dans une fonction, référence l’instance de l’objet qui maintien la référence sur cette fonction.

Je m’explique, le gestionnaire d’événement du bouton garde une référence sur ta fonction remove, c’est donc le bouton qui appelle la fonction remove, changeant ainsi le context d’appelle , this référence donc le bouton .

Il existe plusieurs méthodes pour sauvegarder le context d’appelle (this) , personnellement j’utilise le prototypage de fonction pour y ajouter une mécanique de delegate, comme ce ci :

Code :

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

1
2
3
4
5
Function.prototype.Delegate = function(obj)
{
    var method = this;
    return function() { return method.apply(obj, arguments); };
};

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var maClasse = function(cadreCible){
	this.cadre = cadreCible;
	this.boite = this.add();
}
 
maClasse.prototype = {
	add : function(){
		// Divers opérations dont celle ci-dessous
		monBouton.addEventListener('click',this.remove.Delegate(this),false);
	},
	remove : function(){
		this.cadre.removeChild(this.boite);
	}
}

[Bovino]

Une autre technique consiste à conserver la référence à this dans une 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
15
var maClasse = function(cadreCible){
	var me = this;
	this.cadre = cadreCible;
	this.boite = this.add();
}
 
maClasse.prototype = {
	add : function(){
		// Divers opérations dont celle ci-dessous
		monBouton.addEventListener('click',me.remove,false);
	},
	remove : function(){
		this.cadre.removeChild(this.boite);
	}
}

Sans oublier de mettre une virgule entre les membres de l'objet prototype

[Invité]

La dernière ne marchera pas, me n'est pas dans le même scope. Par contre l'idée est la même :

Code :

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

1
2
3
4
function add(){
 var me = this;
 monBouton.addEventListener('click',me.remove,false);
}

[RomainVALERI]

Moi c'est plutot ce passage qui me chiffonne >>> this.boite = this.add(); .

Dans la mesure où la fonction add ne retourne aucune valeur... pourquoi vouloir stocker "rien" dans une propriété de l'objet ?
(si c'est parce que tu voulais à la fois créer cette propriété tout en laissant une valeur "undefined" ET que tu as voulu "gagner" une ligne, ne me l'avoue surtout pas ça va me faire du mal )

[p3ga5e]

La dernière ne marchera pas, me n'est pas dans le même scope. Par contre l'idée est la même :

Code :

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

1
2
3
4
function add(){
 var me = this;
 monBouton.addEventListener('click',me.remove,false);
}

Desolé mais cela ne resou pas le probleme initial !
le branchement de la méthode remove a l'evenement "Click" du bouton ne pose aucun problème ... mais c'est lors de l’exécution de la méthode remove que le problème survient !

tu doit confondre avec la technique de la fonction "anonyme" :

Code :

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

1
2
3
4
5
6
7
8
9
10
function add()
{
	var me = this;
	monBouton.addEventListener('click',
	function () // remove en fonction anonyme
	{
		me.cadre.removeChild(me.boite);
	},
	false);
}

pour moi cette technique ressemble plus a un Hack car on perd la mutualisation de la méthode remove!

l'autre technique viable, dont parlé Bovino, est de sauvegarder le context this dans une variable de la fonction contructeur
mais contrairement a son exemple il faut tous déclarer dans le contructeur,meme les methodes, et bannir l'utilisation du mot clef this
comme ceci :

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 maClasse = function(cadreCible)
{
	var me = this;
	// mot clef this est bannit a partir d'ici ...
	me.add = function()
	{
		// Divers opérations dont celle ci-dessous
		monBouton.addEventListener('click',me.remove,false);
	};
 
	me.remove = function()
	{
		me.cadre.removeChild(me.boite);
	};
 
	me.cadre = cadreCible;
	me.boite = me.add();
 
}

cette technique a l'avantage de garantir que me reference bien un type maClasse
mais ne support pas le prototypage

[Invité]

Desolé mais cela ne resou pas le probleme initial !

Comme tu las dit le probleme survient sur lexec du callback de onclick.

Lorsque add est appelée, on peut oser espérer que c'est sur maClasse.
Donc me=this pointe bien sur maClasse.

A fortiori lorsque me.remove est appelé, this réfère me, qui réfère bien maClasse.