Avoir la valeur correcte de « ceci » dans JS

Question

J'ai deux Javascript « objets » semblables à so ....

var Object2 = new (function() { 
    this.FetchData = function(callback) { 
     // do some stuff 
     callback(data); 
    }; 
}); 

var Object1 = new (function() { 

    this.DisplayStuff = function() { 

    }; 

    this.LoadData = function() { 
     Object2.FetchData(this.OnData); 
    }; 

    this.OnData = function(data) { 
     // this == window 
     this.DisplayStuff(); // doesn't work 
    }; 

}); 

Lorsque Object1 reçoit le rappel à OnData, la valeur de « ce » est réglé à la fenêtre. Est-il possible de contourner ce problème afin que la valeur de "this" à l'intérieur de OnData soit l'instance de Object1 au lieu de window?

Answer 1

La façon simple de le faire est de stocker une référence à cette dans une variable, puis en utilisant la méthode call():

this.LoadData = function() { 
    var self = this; 
    Object2.FetchData(function() { self.OnData.call(self) }); 
}; 

Si vous faites cela beaucoup, vous voudrez peut-être envisager d'utiliser la méthode .bind() sur le prototype de fonction dans ECMAScript 5ème édition. Cette méthode peut être mise en œuvre lorsque non pris en charge:

// From Prototype.js 
if (!Function.prototype.bind) { // check if native implementation available 
    Function.prototype.bind = function(){ 
    var fn = this, args = Array.prototype.slice.call(arguments), 
     object = args.shift(); 
    return function(){ 
     return fn.apply(object, 
     args.concat(Array.prototype.slice.call(arguments))); 
    }; 
    }; 
} 

Et l'appel de fonction résultante:

this.LoadData = function() { 
    Object2.FetchData(this.OnData.bind(this)); 
}; 

PrototypeJS - bind()

Answer 2

La solution de base consiste à forcer le contexte sur le rappel avec apply. (Ou call La différence réside dans la façon dont les paramètres sont transmis: soit un tableau, soit «normalement») Voir la documentation MDC.

Answer 3

Pour un rappel, vous êtes coincé avec 'ceci' étant la fenêtre (généralement). Cependant, vous pouvez ajouter un membre à Object1 pointant sur lui-même (un grand nombre de fois il obtient appelez 'self', c'est-à-dire "var self = this;"), puis utilisez-le, c'est-à-dire self.DisplayStuff().

Answer 4

Une technique couramment utilisée dans les cadres est de permettre à l'appelant de décider de ce que le this contexte devrait être pour la fonction de rappel. Ainsi, la fonction FetchData ressemble (grâce à @Andy pour me dire au sujet de la portée par défaut lorsque le contexte est nul ou non défini - il est l'objet global),

this.FetchData = function(callback, context) { 
    callback.call(context, data); 
}; 

Lorsque vous appelez FetchData, passer Object1 que le contexte de la rappel,

Object2.FetchData(this.OnData, this); 

---

Une autre option consiste à se lier à la fonction OnData avec Object1 utilisant Function.prototype.bind

Object2.FetchData(this.onData.bind(this)); 

Answer 5

L'ambiguïté de "ceci" est vraiment ennuyante avec javascript. Donc j'évite juste "ceci" autant que possible. Je le fais de cette façon:

var Object2 = (function() { // no need for a "new" keyword any more 

    var self = {}; // instead of the auto-supplied "this", create my own "self" 

    self.FetchData = function(callback) { 
     // do some stuff 
     callback(data); 
    }; 
    return self; // don't forget to return "self" 
}); 

var Object1 = (function() { 

    var self = {}; // instead of the auto-supplied "this", create my own "self" 

    self.DisplayStuff = function() { 

    }; 

    self.LoadData = function() { 
     Object2.FetchData(this.OnData); 
    }; 

    self.OnData = function(data) { 
     self.DisplayStuff(); 
    }; 

    return self; // don't forget to return "self" 

}); 

Vous perdez la possibilité d'utiliser Object.prototype avec cette technique, vous perdez la possibilité de tester en utilisant « instanceof », mais vous ne jamais avoir à penser à ce que « cela » est.