Javascript setInterval y `this` solución

Question

necesito para acceder a this de mi setInterval manejador

prefs: null, 
startup : function() 
    { 
     // init prefs 
     ... 
     this.retrieve_rate(); 
     this.intervalID = setInterval(this.retrieve_rate, this.INTERVAL); 
    }, 

retrieve_rate : function() 
    { 
     var ajax = null; 
     ajax = new XMLHttpRequest(); 
     ajax.open('GET', 'http://xyz.com', true); 
     ajax.onload = function() 
     { 
      // access prefs here 
     } 
    } 

cómo puedo acceder a this.prefs en ajax.onload?

Answer 1

La línea setInterval debería tener este aspecto: -

this.intervalID = setInterval(
    (function(self) {   //Self-executing func which takes 'this' as self 
     return function() { //Return a function in the context of 'self' 
      self.retrieve_rate(); //Thing you wanted to run as non-window 'this' 
     } 
    })(this), 
    this.INTERVAL  //normal interval, 'this' scope not impacted here. 
); 

Editar: El mismo principio se aplica a las el "onload". En este caso es común que el código "externo" haga poco, simplemente configura la solicitud y luego la envía. En este caso, la sobrecarga adicional es innecesaria una función adicional como en el código anterior. Su retrieve_rate debe mirar más a esto: -

retrieve_rate : function() 
{ 
    var self = this; 
    var ajax = new XMLHttpRequest(); 
    ajax.open('GET', 'http://xyz.com', true); 
    ajax.onreadystatechanged= function() 
    { 
     if (ajax.readyState == 4 && ajax.status == 200) 
     { 
      // prefs available as self.prefs 
     } 
    } 
    ajax.send(null); 
} 

Answer 2

Eso no es una solución belleza, sino que es de uso común:

var self = this; 
var ajax = null; 
//... 
ajax.onload = function() { 
    self.prefs....; 
} 

Answer 3

prefs: null, 
startup : function() 
    { 
     // init prefs 
     ... 
     this.retrieve_rate(); 
     var context = this; 
     this.intervalID = setInterval(function() 
             { 
              context.retrieve_rate(); 
             }, this.INTERVAL); 
    }, 

retrieve_rate : function() 
    { 
     var ajax = null; 
     ajax = new XMLHttpRequest(); 
     ajax.open('GET', 'http://xyz.com', true); 
     var context = this; 
     ajax.onload = function() 
     { 
      // access prefs using context. 
      // e.g. context.prefs 
     } 
    } 

Answer 4

El comportamiento predeterminado de setInterval es para enlazar con el contexto global. Puede llamar a una función miembro guardando una copia del contexto actual. Dentro de retrieve_rate, la variable this se vinculará correctamente al contexto original. Esto es lo que el código se vería así:

var self = this; 
this.intervalID = setInterval(
    function() { self.retrieve_rate(); }, 
    this.INTERVAL); 

Consejo adicional: Para una referencia a una función normal (en comparación con una referencia de objeto que tiene una función miembro) puede cambiar el contexto mediante el uso de call o apply métodos de JavaScript.

Answer 5

this.intervalID = setInterval(this.retrieve_rate.bind(this), this.INTERVAL); 

Answer 6

Esta sería la solución más limpia, ya que la mayoría de las veces que realmente quieren cambiar el este contexto para el método consecutiva llama:

También es más fácil de entender el concepto de.

// store scope reference for our delegating method 
    var that = this; 
    setInterval(function() { 
     // this would be changed here because of method scope, 
     // but we still have a reference to that 
     OURMETHODNAME.call(that); 
    }, 200); 

Answer 7

Con la mejora del navegador admite ahora es el momento bueno utilizar la mejora EcmaScript 6, el método flecha =>, para preservar this correctamente.

startup : function() 
    { 
     // init prefs 
     ... 
     this.retrieve_rate(); 
     this.intervalID = setInterval(() => this.retrieve_rate(), this.INTERVAL); 
    }, 

Usando => método preserva la this cuando retrieve_rate() es llamado por el intervalo. No hay necesidad de auto funky o pasar this en los parámetros

Answer 8

window.setInterval(function(){console.log(this)}.bind(this), 100)

esto es legal en javascript y ahorra un montón de código :)