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…