Utiliser propriété de mon objet dans une méthode callback ?

Bonjour,

J'ai un objet contenant des propriétés et des méthodes.

Mettons par exemple une voiture :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

function Voiture(){ this.Marque = ""; this.Modele = ""; this.Places = 0; this.Vitesse = 0;   this.Init = function(marque, modele, places) { this.Marque = marque; this.Modele = modele; this.Places = places; }   this.Demarrer = function(suite) { this.Vitesse++; suite(); }   this.Accelerer = function() { this.Vitesse++; } }

---

Je l'appelle donc de la façon suivante :

Code:

---

1 2 3 4

var tt = new Voiture(); tt.Init("Audi", "TT", 2); tt.Demarrer(tt.Accelerer); alert(tt.Vitesse);

---

Et là c'est le drame : tt.Vitesse n'est pas incrémenté à 2, mais à 1.

J'ai remarqué que "this.Vitesse" était undefined dans la méthode "Accelerer". Pourquoi ? Comment faire en sorte d'accéder aux propriétés de mon objet ?

Salut,

C'est un problème de changement de contexte, difficile à déceler. La variable this se réfère à tt tant que l'on appelle les méthodes directement depuis l'objet tt. Si on passe la fonction tt.Accelerer par référence, elle n'a plus de contexte au moment de son appel, donc this dans la fonction Accelerer se réfère au contexte global (objet Window).

Des solutions possibles :

Code:

---

1 2 3 4

this.Demarrer=function(suite){ this.Vitesse++; suite.call(this); }

---

ou

Code:

---

1 2 3 4

var tt = new Voiture(); tt.Init("Audi", "TT", 2); tt.Demarrer(function(){ tt.Accelerer(); }); alert(tt.Vitesse);

---

ou

Code:

---

1 2 3 4

var tt = new Voiture(); tt.Init("Audi", "TT", 2); tt.Demarrer(tt.Accelerer.bind(tt)); alert(tt.Vitesse);

---

Trouvé un article très intéressant sur le sujet :)

http://javascriptissexy.com/understa...and-master-it/

Merci SylvainPV d'avoir répondu dans le même temps.

Mon problème n'était pas tout à fait bien posé, car mon callback venait d'un événement.

J'ai utiliser bind(this) sur la méthode à appeler, et ça fonctionne (donc mix entre la solution 2 et 3) ;)

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

function CtrLogin(parent) { this.Parent = parent;   this.Init = function() { this.Parent.innerHTML = "<input type=\"text\" id=\"txtLogin\"/><br/><input type=\"password\" id=\"txtPassword\"/><br/><input type=\"button\" value=\"Connexion\" id=\"btnConnexion\"/>"; this.TxtLogin = document.getElementById("txtLogin"); this.TxtPassword = document.getElementById("txtPassword"); this.BtnConnexion = document.getElementById("btnConnexion"); this.BtnConnexion.onclick = this.ConnexionClick.bind(this); } this.ConnexionClick = function () { ajaxFunction("service/membre.asmx/CheckLogin", "login=" + this.TxtLogin.value + "&password=" + this.TxtPassword.value, this.ConnexionRes.bind(this)); } this.ConnexionRes = function (res) { alert(res); if (true) { window.security.Connect(this.TxtLogin.value, this.TxtPassword.value); } }   this.Init(); }

---

PS : Ma classe est toujours en phase d'écriture, c'est normal qu'il n'y ait pas d'urlencode sur les valeurs et un if (true) sur le résultat du contrôle du login ;)

Personnellement, j'opterais plutôt pour

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

function Voiture(){ this.Marque = ""; this.Modele = ""; this.Places = 0; this.Vitesse = 0;   this.Init = function(marque, modele, places) { this.Marque = marque; this.Modele = modele; this.Places = places; }   this.Demarrer = function(suite) { this.Vitesse++; this[suite](); }   this.Accelerer = function() { this.Vitesse++; } }   var tt = new Voiture(); tt.Init("Audi", "TT", 2); tt.Demarrer('Accelerer'); alert(tt.Vitesse);

---