Discussion :

[Invit�]

Bonjour,

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

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
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

[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.

[Invit�]

Merci beaucoup, mais �a ne fonctionne pas. C'est toujours UNDEFINED...

[le_chomeur]

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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

[florent.blin]

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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();

[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

[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 )

[Invit�]

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

[Invit�]

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

alert(obj.param);

par exemple, puisqu'il a fallu rempacer :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

this.param = variable;

par

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

var param = variable;

De plus si je passe ma fonction open en prototype, 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
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.

[nod__]

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
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�.

[marcha]

Salut,

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

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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 :-)

[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 )

[marcha]

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

qu'est-ce ? �a semble int�ressant tu peux d�tailler ?

[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.

[le_chomeur]

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

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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 :

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
<!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.

[nod__]

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

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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

[le_chomeur]

tu peux expliciter ? un exemple concret ??
avec une variable incr�ment�

[nod__]

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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

[le_chomeur]

Sous FF ;-) mais ne marche pas sous IE and cie

[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�