Variable me retourne undefined

Version imprimable

Bonjour, je suis actuellement un tuto en ligne mais j'ai un soucis avec le code d'exemple

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function Tileset(url) {
	// Chargement de l'image dans l'attribut image
	this.image = new Image();
	this.image.referenceDuTileset = this;
	this.image.onload = function() {
		if(!this.complete) 
			throw new Error("Erreur de chargement du tileset nommÃ© \"" + url + "\".");
		// Largeur du tileset en tiles
		this.referenceDuTileset.largeur = this.width / 32;
    }
	this.image.src = "tilesets/" + url;
}
// MÃ©thode de dessin du tile numÃ©ro "numero" dans le contexte 2D "context" aux coordonnÃ©es xDestination et yDestination
Tileset.prototype.dessinerTile = function(numero, context, xDestination, yDestination) {
	var xSourceEnTiles = numero % this.largeur;
    console.log(this);
    console.log(this.largeur);
	if(xSourceEnTiles == 0) xSourceEnTiles = this.largeur;
	var ySourceEnTiles = Math.ceil(numero / this.largeur);
	var xSource = (xSourceEnTiles - 1) * 32;
	var ySource = (ySourceEnTiles - 1) * 32;
	context.drawImage(this.image, xSource, ySource, 32, 32, xDestination, yDestination, 32, 32);
}

Output pour le console.log(this)

Citation:

Tileset
image: img
largeur: 6
__proto__: Tileset

Output pour le console.log(this.largeur)

Citation:

undefined

Voila si vous avez une petite idée du problème.

Site de l'exemple fonctionnel ou le code est le même : Exemple

27/03/2014, 11h59
Bovino

C'est tout à fait normal.

Code:

this.image.onload

Ici, l'événement onload n'est pas déclenché par ton objet mais par l'objet HTML image or this correspond toujours à l'objet qui a appelé la méthode en question (ce qui explique que dans la fonction de rappel, tu peux utiliser this.complete). C'est d'ailleurs ce que t'indiquent les messages dans la console : this est bien l'objet image et un objet image ne possède pas de propriété largeur, qui vaut donc undefined.

J'avais compris le code comme ceci :
Code:

1 2 this.image.referenceDuTileset = this; // ajoute une propriété referenceTileset à this.image (this étant le Tileset) qui pointe vers this (this étant le Tileset) this.referenceDuTileset.largeur = this.width / 32; // ajoute une propriété largeur à this.referenceDuTileset (this étant image et reférenceDuTileset étant le pointeur vers Tileset) donc rajouter une propriété largeur au Tileset
Car quand je vérifie sur le site je ne vois aucune différence dans le code et pourtant cela fonctionne bien.

Je m'excuse d'avance si j'emploi des termes peut être inadapté au langage.