Discussion :

[soa]

Bonjour

Je suis entrain de lire un bouquin sur Javascript. Et comme d'hab dans ce genre de livre, le code source qu'il contient ne fonctionne pas....
Le code est le suivant:

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
function User( properties ) {
for ( var x in properties ) { (function(){

this[ "get" + x ] = function() {
return properties[x];
};

this[ "set" + x ] = function(val) {
properties[x] = val;
};
})(); }
}

var user = new User({
name: "Bob",
age: 44
});
// Just note that the name property does not exist, as it's private
// within the properties object
alert( user.name == null );
// However, we're able to access its value using the new getname()
// method, that was dynamically generated
alert( user.getname() == "Bob" );
// Finally, we can see that it's possible to set and get the age using
// the newly generated functions
user.setage( 22 );
alert( user.getage() == 22 );

En gros c'est tout con. Il crée des méthode, en l'occurrence des getter et setter de façon dynamique en fonction des propriétés de l'objet passées à sa création.

Alors ca ne marche pas parce qu'il ne reconnait pas la méthode "getname()".
Logiquement je me suis dit c'est surement à cause de l'encapsulation dans une fonction anonyme. Parce que si j'ai bien compris les fonctions anonymes sont là pour définir le scope des variables, en d'autre terme pour empêcher que les variables créées dans la fonction anonyme soient visibles de l'extérieur. Or comme c'est des fonctions dynamiques qu'on y crée il me semble normal qu'elles doivent être accessible de l'extérieur.

Mais voilà, si j'enlève la fonction anonyme ca marche mieux, sauf qu'un nouveau problème apparaît.
Les fonctions getter et setter existent, ce qui est une bonne chose. Le problème c'est que le "getname()" qui normalement devrait me donner la valeur "Bob" me renvoie "44", en d'autre terme la même valeur que pour l'âge.

Alors j'imagine que ca doit être un problème de référence mais je vois pas trop où.

Voilà si quelqu'un pourrait me montrer l'erreur ca serait sympa

Merci

[gwyohm]

Salut,

Tu as tout à fait raison, dans le cadre d'une fonction anonyme, on perd la référence à this. La solution la plus simple consiste à variabiliser this (généralement en that puis à l'utiliser).

Sinon le "truc", c'est de ne pas utiliser la référence x, de passer par une fonction (comme l'auteur a fait d'ailleurs, pour laquelle tu passes la valeur x en paramètre :

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
 
function User( properties ) {
  var that = this;
  for ( var x in properties ) { (function(prop){
    that[ "get" + prop ] = function() {
      return properties[prop];
    };
 
    that[ "set" + prop ] = function(val) {
      properties[prop] = val;
    };
  })(x);}
}
 
var user = new User({
name: "Bob",
age: 44
});
user.getname()

[soa]

Ah ouais d'accord je vois déjà un peu plus clair.

(C'est quand même bien tordu Javascript quand même )

Une question encore. Pourquoi ca ca ne marche pas???

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
function User( properties ) {
	for (var x in properties ) { 
		this[ "get" + x ] = function() {
			return properties[x];
		};
 
		this[ "set" + x ] = function(val) {
			properties[x] = val;
		};	
	 } 
}

[polkduran]

ça ne marche pas à cause de la boucle, encore un autre truc tordu du js
en fait, étant donné que dans la boucle tu construis une fonction anonyme qui utilise la valeur courante de la variable qui s'incrémente dans la boucle, la fonction anonyme n'est pas en quelque sorte construite séquentiellement dans les instructions de ta boucle, c'est à dire que lorsque ta fonction anonyme utilise la valeur de 'x' elle peut avoir été modifiée par un autre passage de la boucle, c'est pour cela que dans l'exemple du bouquin ils ont mis tout dans l'appel d'une autre fonction anonyme qui reçoit comme paramètre la valeur de 'x' donc la valeur de 'x' est copiée et pas utilisée directement. je ne sais pas si je me suis bien exprimé, c'est vrai que ce n'est pas évident au premier abord
fait un test avec ces deux exemples de code et tu verra le résultat, normalement on penserait qu'ils devront afficher 1,2,3...8 chaque seconde, mais tu verra que ce n'est pas le cas pour l'un des deux

Code :

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

1
2
3
4
5
 
var tab = [1,2,3,4,5,6,7,8];
for(var i in tab){
    setTimeout(function(){alert(tab[i]);},1000);
}

Code :

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

1
2
3
4
5
 
var tab = [1,2,3,4,5,6,7,8];
for(var i in tab){
    (function(j){setTimeout(function(){alert(tab[j]);},1000);})(i);
}

[soa]

Ok merci pour ces précisions.

Vais continuer à lire le bouquin alors, ces spécificités n'ont pas encore été décrites en détail.