Accéder à une variable en JS OO

Version imprimable

Bonjour,

Dans le script suivant, je n'arrive pas à afficher correctement la variable this.param dans le contexte d'une requête Ajax :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 function MaClasse (variable) { this.param = variable; this.open = function () { new Ajax.Request('action.php', { method : 'POST', onSuccess : function(xhr) { alert(this.param); }); } } var obj = new MaClasse('var_1'); obj.open();
Merci d'avance à qui pourra bien m'aider.

Fabien

18/06/2009, 17h01
florent.blin

Salut,

L'instruction 'this' référence les propriétés de la fonction dans laquelle l'instruction est jouée.

Essai ça : alert(this.parent.param)

Cordialement.
18/06/2009, 17h05
Invité

Merci beaucoup, mais ça ne fonctionne pas. C'est toujours UNDEFINED...
18/06/2009, 17h15
le_chomeur
Code:

1 2 3 function(xhr) { alert(this.param); }
fait référence a la méthode et non plus a l'objet , il te faut donc passer en paramètre param :)

Le problème vient de la portée de la variable param.

Est-ce que en la déclarant en variable globale, cela fonctionne mieux ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function MaClasse (variable) {
param = variable;		
this.open = function () {
	new Ajax.Request('action.php', {
		method : 'POST',
		onSuccess : function(xhr) {				
		  alert(param);
		});
	}
}
 
var param;
var obj = new MaClasse('var_1');
obj.open();

18/06/2009, 17h27
SpaceFrog

bein entendu avec une variable globale ça passe mais c'est risqué en cas d'instances multiples à moins de pusher un array ...

je tentais l'opération avec call ou apply , mais a priori ça n'a pas l'air de vouloir :(
18/06/2009, 17h28
le_chomeur

oui ça marche , mais ce n'est pas le but :)
donc passe la en closure ( je te renvois vers les tutoriels de la section JS ;) )
18/06/2009, 17h33
Invité

Merci à vous, je vais jeter un coup d'œil aux tuts, je reviens vers vous en cas de besoins. ;)

le chomeur, j'ai testé ta méthode, ça fonctionne par contre, je ne peux pas exploiter le contenu de la variable param en dehors de l'objet :

Code:

alert(obj.param);

par exemple, puisqu'il a fallu rempacer :

Code:

this.param = variable;

par

Code:

var param = variable;

De plus si je passe ma fonction open en prototype, comme ceci :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 function MaClasse (variable) { this.param = variable; } MaClasse.prototype.open = function () { new Ajax.Request('action.php', { method : 'POST', onSuccess : function(xhr) { alert(this.param); }); } var obj = new MaClasse('var_1'); obj.open();
Ça ne fonctionne plus.

Je débute dans le JSOO avec l'excellent tutoriel de votre site, et j'essaie de mettre à jour des scripts à moi avec cette méthode, avec plus ou moins de réussite. :)

Encore merci d'avance.

Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 function MaClasse (variable) { var that = this; this.param = variable; this.open = function () { new Ajax.Request('action.php', { method : 'POST', onSuccess : function(xhr) { alert(that.param); // mais c'est naze autant passer "variable" directement à ta fonction… }); } } var obj = new MaClasse('var_1'); obj.open();
ton "this" correspondait à l'objet que tu passes en paramètre à "Ajax.Request". pas à ce que tu pensait.

Petite précision ce n'est pas une classe que tu définit, c'est un constructeur. Les classes n'existent pas en javascript (et c'est très bien comme ça), c'est juste une vue de l'esprit erroné.

Salut,

Pour que this représente bien ton instance dans un callback
tu peux utiliser ceci:
Code:

1 2 3 4 5 6 7 Function.prototype.bind = function(context) { var m = this; // référence l'instance de Function return function() { return m.apply(context, arguments); } }
Ici on définit une méthode propre à l'objet Function en l'ajoutant
à son prototype, toutes les instances de Function existantes ou
futures disposent de la méthode bind, c'est à dire, toutes les
fonctions javascript en général.

Cette méthode sauve this dans une variable m (this représentant l'instance
de la fonction sur laquelle on appelle bind), puis elle retourne une fonction
interne qui appelle l'instance originale de la fonction "bindée" via apply,
ce qui permet de fixer le context du this pour le code de la fonction à ce
que l'on souhaite.

le paramètre context est visible de la fonction interne grâce à une closure.

A l'usage cela devient assez simple:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 function MaClasse (variable) { this.param = variable; this.open = function () { new Ajax.Request('action.php', { method : 'POST', onSuccess : function(xhr) { alert(this.param); }.bind(this)); } } var obj = new MaClasse('var_1'); obj.open();
Mais je pense qu'utiliser javascript pour produire du code 'genre POO'
c'est passer à coté d'une autre forme de programmation pour laquelle
javascript est bien plus adapté (je pense aux closures et imbrication de
callbacks)

Dans ce goût là:
Code:

1 2 3 4 5 6 7 8 9 function faireQqch(param1) { AjaxRequest('action1.php', {...}, function(reponse1) { var x = ...; // traiter la réponse 1 AjaxRequest('action2.php', {...}, function(reponse2) { // traiter la réponse 2 }); }); }
Ici dans le contexte de la fonction callback(reponse2) nous
avons accès à toutes les variables des fonctions englobantes
param1, reponse1, reponse2, x

En englobant ainsi, le simple appel à faireQqch crée une forme
d'instance avec ses variables propres.

De plus l'indentation donne une idée de l'ordre d'exécution des
fonctions dans le temps.

Dans le cas typique des appels et traitement Ajax je trouve
cette manière de coder plus légère que le POO like. (le débat
est ouvert :-)

19/06/2009, 08h43
le_chomeur

c'est ce que je disais , un passage de paramètre en closure , ou via une fonction anonyme ;-)

interessant la méthode de binding marcha , je l'utilisais pour gérér des variable dans des boucles ( les fameux for(){} avec i lié a un instant T )
19/06/2009, 09h05
marcha

Citation:

Envoyé par le_chomeur

les fameux for(){} avec i lié a un instant T

qu'est-ce ? ça semble intéressant tu peux détailler ?
19/06/2009, 09h35
DoubleU

Par ailleurs, vu que tu utilises visiblement la librairie prototype, tu devrais jeter un oeil à la méthode bindAsEventListener qui fait a peu près la même chose que la méthode proposée par marcha mais dans l'api prototype.

alors dans l'ordre un exemple de closure sans utiliser de bind :

Code:

1
2
3
4
5
 
var me = this;
				var action = function(){(function(){
					me.yearsBefore();
				})(me)};

et un exemple un peu plus complet pour comprendre le fonctionnement :

Code:

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Untitled Document</title>
	</head>
	<body>
 
 
		<a href="#">test</a><br />
		<a href="#">test</a><br />
		<a href="#">test</a><br />
		<a href="#">test</a><br />
		<a href="#">test</a><br />
		<a href="#">test</a><br />
		<input type="button" onclick="test2()" value="test avec la fonction 2" />
		<script type="text/javascript">
			function test1(){
				var ListeLien = document.getElementsByTagName("a");
				for(var i = 0 , l = ListeLien.length; i < l ; i++){
					var t = i ;
					ListeLien[i].onclick = function(){alert(t);return false;};
				}
			}
			test1();
 
			function test2(){
				var ListeLien = document.getElementsByTagName("a");
				for (var i = 0, l = ListeLien.length; i < l; i++) {
 
					var action = function(){
						var t = i ;
						return function(){
							alert(t)
						};
					}(i);
 
					ListeLien[i].onclick = action;
				}
			}
		</script>
	</body>
</html>

on peut passer un paramètre à la deuxiemme méthode , mais ce sera l'évènement.

19/06/2009, 10h01
nod__
oui enfin pour les boucles autant utiliser les trucs standards, c'est a dire :
Code:

1 2 monArray = []; monArray.forEach(function (valeur, index, tableau) {});
On peut l'utiliser dans IE et les autres en augmentant le prototype de l'objet Array (normalement, j'ai pas IE pour retester) ou au moins ajouter la méthode (qui existe sous Mozilla) à l'objet Array. Voir la doc pour les détails.
Code:

1 2 monArray = []; Array.forEach(monArray, function (valeur, index, tableau) {});
La closure est faite toute seule et c'est du JS standard. Mieux que du bricolage :)
19/06/2009, 10h02
le_chomeur

tu peux expliciter ? un exemple concret ??
avec une variable incrémenté :)

Code:

1
2
3
4
5
6
7
            function test2(){
                var ListeLien = document.getElementsByTagName("a");
 
                Array.forEach(ListeLien, function (lien, index) {
                    lien.onclick = function () {alert(index);};
                });
            }

A tester sous FF bien évidement. Ça peut être implémenté facilement pour les autres :)

19/06/2009, 10h22
le_chomeur

Sous FF ;-) mais ne marche pas sous IE and cie ;)
19/06/2009, 10h32
nod__

oui mais je viens de te dire que ça s'implémente facilement sous IE et Co. Ça fait (ou va très bientôt faire) parti de la spec Ecmascript donc bon…
19/06/2009, 10h36
le_chomeur

Quid des performances entre un for et un foreach ? ;-)
19/06/2009, 10h41
nod__

Tu es passé sur la page de MDC pour voir la doc de la méthode ?
https://developer.mozilla.org/En/Cor.../Array/ForEach

je pense que ça va répondre à ta question… ils disent que ça fait pas parti d'un standard ecmascript puisque celui sur lequel la méthode figure est encore un draft.
19/06/2009, 11h41
marcha
Citation:
Envoyé par le_chomeur

Code:

1 2 3 4 5 6 7 var action = function(){ var t = i ; return function(){ alert(t) }; }(i);
Merci le_chomeur, je vois bien ce que tu veux dire. Une petite remarque concernant
ton exemple:

Tu appelle la fonction associée à action avec la notation (i) après l'accolade fermante
mais tu ne déclare pas de paramètre dans ta fonction. Si bien que la variable i utilisée
n'est pas le paramètre mais la variable i de la boucle.

Ton code fonctionne très bien aussi ainsi:
Code:

1 2 3 4 5 6 7 var action = function(){ var t = i ; return function(){ alert(t) }; }(); // sans rien passer
Moi je préfère passer explicitement un paramètre ce qui évite la variable
Code:

1 2 3 4 5 6 var action = function(t){ return function(){ alert(t) }; }(i);
Ainsi i passe dans t et c'est t qui est "closuré", marche aussi avec t nommé i
car il s'agirait d'une variable locale qui a priorité sur le i exterieur.

@DoubleU en effet, la fonction bind présentée dans mon exemple est issue de prototype elle est d'ailleur utilisable dans le cas de l'exemple de funewik.

bindAsEventListener est similaire mais passe le paramètre 'event' avant les arguments
(si mes souvenir de prototype sont bons :-) et je pense que si on l'utilise dans ce cas
alors 'xhr' vaudrait 'undefined' à vérifier.
19/06/2009, 11h54
le_chomeur
effectivement marcha :D

juste a faire TRES attention de ne pas passer :
Code:

1 2 3 4 5 var action = function(){ return function(t){ alert(t) }; }(i);
qui sera l'évènement sinon :) ( juste une précision pour les autres ^^ )
19/06/2009, 12h16
marcha
Citation:
Envoyé par nod__

oui enfin pour les boucles autant utiliser les trucs standards, c'est a dire :

Code:

1 2 monArray = []; monArray.forEach(function (valeur, index, tableau) {});

...
La closure est faite toute seule et c'est du JS standard. Mieux que du bricolage :)
D'accord quand on manipule des Array, mais document.getElementsByTagName() ne
retourne pas un Array donc j'éviterai d'utiliser des méthodes d'Array pour manipuler
des non Array (ou alors les convertir avant, mais ça alourdi le code)
19/06/2009, 12h55
nod__

Citation:

Envoyé par marcha

D'accord quand on manipule des Array, mais document.getElementsByTagName() ne
retourne pas un Array donc j'éviterai d'utiliser des méthodes d'Array pour manipuler
des non Array (ou alors les convertir avant, mais ça alourdi le code)

"Array.forEach" (qui est le même que Array.prototype.forEach) est fait pour manipuler tout ce qui "ressemble" à un array. C'est a dire des index numérique et un "length". Pas besoin de les convertir. Voir l'exemple que le_chomeur m'a demandé.

Tous les truc du DOM qui ont un ".length" sont ennumérables avec ça, magie.
https://developer.mozilla.org/en/Cor...y-like_objects
19/06/2009, 14h54
marcha
Citation:

Envoyé par nod__

"Array.forEach" (qui est le même que Array.prototype.forEach) est fait pour manipuler tout ce qui "ressemble" à un array. C'est a dire des index numérique et un "length". Pas besoin de les convertir.

Nous sommes tout a fait d'accord sur le fait que cela fonctionne.

Mais je suis pas d'accord que tu as qualifie de "Bricolage" la technique
qui consiste à itérer un ArrayLike avec une boucle for par rapport
à l'utilisation de Array.forEach

Moi je pense que c'est plutôt une mauvaise habitude, un exemple:
Code:

1 2 3 function show(toto) { Array.forEach(toto, function(e) { alert(e); }); }
Six mois plus tard, quelqu'un d'autre relis ce code et doit implémenter un affichage
inversé, il serait tenté de modifier la fonction ainsi:
Code:

1 2 3 4 5 function show(toto, reverse) { if(reverse) Array.reverse(toto); Array.forEach(toto, function(e) { alert(e); }); }
si forEach fonctionne pour les ArrayLike ce n'est pas le cas de Array.reverse
c'est pourquoi je pense que c'est une mauvaise pratique que de mélanger ces
deux types.

C'est pour faire face à ce genre de risque que je parlais de convertir des
ArrayLike en vrai Array avant d'utilser des méthodes de Array dessus.
19/06/2009, 15h13
nod__

ok, vu comme ça.

Perso je n'ecris presque plus de boucle for. Je suis d'accord avec ta signature :p
19/06/2009, 15h14
le_chomeur

+1 marcha ,

de plus j'ajouterais qu'a l'heure actuelle il vaut mieux se baser sur des références CROSSBROWSER :ccool:
19/06/2009, 15h31
nod__
Array.prototype.forEach :
Opera, WebKit, FF.

Array.forEach :
FF.
en rajoutant ces 5 misérables lignes :
Code:

1 2 3 4 5 if (!Array.forEach) { Array.forEach = function (array, callback, context) { Array.prototype.forEach.call(array, callback, context); } }
Opera, WebKit.

Pour que IE le supporte c'est grand max 10 lignes. C'est encore plus crossbrowser que les getter / setter pour les objets perso, on a vu pire.

Pour des trucs fun sur les énummérations :
http://dean.edwards.name/weblog/2006/07/enum/

( edit ) J'insiste parce que ça me rend fou cet immobilisme. On peut faire énormément de choses du même genre que ce que jQuery propose en natif. Il suffit de le savoir, et c'est pas en restant sur une boucle for que on va faire bouger les choses. Si assez de monde l'utilise, IE l'implémentera. C'est aussi simple que ça.
19/06/2009, 16h13
DoubleU

En même temps, c'est pas le sujet du topic...

Et ca reste du sucre syntaxique, donc bon, c'est ptete pas la peine d'épiloguer pendant 20 posts...
19/06/2009, 16h35
grunk

Citation:

Envoyé par DoubleU

Par ailleurs, vu que tu utilises visiblement la librairie prototype, tu devrais jeter un oeil à la méthode bindAsEventListener qui fait a peu près la même chose que la méthode proposée par marcha mais dans l'api prototype.

A ce propos , il existe un article très intéressant qui en gros dit que bindasEventlistener ne sert quasi jamais et qu'il faut lui préférer bind()

http://proto-scripty.wikidot.com/pro...seventlistener