Cómo llamar a un método en un objeto de javascript

Question

sólo estoy aprendiendo sobre cómo organizar mejor mi código Javascript, y que tenía una pregunta con respecto a esta pequeña pieza de código que he escrito:

var reportsControllerIndex = { 
    plotMapPoints: function(data) { 
     //plots points 
    }, 

    drawMap: function() { 
     $.getJSON('/reports.json', function(data) { 
      reportsControllerIndex.plotMapPoints(data);   
     }); 
    }, 

    run: function() { 
     reportsControllerIndex.drawMap(); 
    } 
}; 

La pregunta es con respecto a llamar a otra función de reportsControllerIndex desde dentro del objeto reportsControllerIndex. Primero probé la siguiente pieza de código para la función de ejecución:

run: function() { 
    this.drawMap(); 
} 

que funcionó a la perfección. Sin embargo, me encontré luego rápidamente haciendo esto para la función drawMap:

drawMap: function() { 
    $.getJSON('/reports.json', function(data) { 
     this.plotMapPoints(data);   
    }); 
} 

no funciona, ya que "esto" se refieren ahora a la función de devolución de llamada de la llamada getJSON.

Mi solución fue simplemente colocar reportsControllerIndex en frente de todos los métodos que deseo llamar, pero tenía curiosidad: ¿hay una forma más relativa de llamar funciones dentro de un objeto general como este (al igual que lo haría con una clase en un idioma OO estándar)? ¿O estoy obligado a hacerlo como lo estoy haciendo ahora, simplemente llamando a los métodos a través del nombre del objeto?

Answer 1

Desea almacenar el enlace this en una variable.

drawMap: function() { 
    var _this = this; 
    $.getJSON('/reports.json', function(data) { 
     _this.plotMapPoints(data);   
    }); 
} 

Answer 2

Es necesario utilizar una referencia variable para this fuera de la función getJSON. getJSON establece el contexto de la devolución de llamada dentro de jquery.

De esta manera:

var self = this; 
$.getJSON('/reports.json', function(data) { 
    self.plotMapPoints(data);   
}); 

Answer 3

respuesta tardía, pero jQuery tiene un método called jQuery.proxy() que está hecho para este fin. Usted le transfiere la función junto con el valor de this que desea conservar, y devolverá una función que asegura que this es correcto.

De esta manera no es necesario definir una variable.

drawMap: function() { 
    $.getJSON('/reports.json', $.proxy(function(data) { 
     this.plotMapPoints(data);   
    }, this)); 
} 

Answer 4

plotMapPoints: function(data) { 
    //plots points 
}.bind(this) 

la hora de definir su función, puede simplemente añadir .bind (este) para establecer el contexto correcto para esa función.

Answer 5

Puede escribirlo le gusta esto:

var reportsControllerIndex = new function() { 

    var self = this; 

    self.plotMapPoints = function (data) { 
     //plots points 
    }, 

    self.drawMap = function() { 
     $.getJSON('/reports.json', function (data) { 
      self.plotMapPoints(data);   
     }); 
    }, 

    self.run = function() { 
     self.drawMap(); 
    } 
}; 

Esta voluntad de clase funciona como lo mismo que lo hizo, y todavía se puede llamar al método de clase por:

reportsControllerIndex.run() 

En este paradigma, me definió self apuntando a la clase en sí, para que pueda llamar al self donde quiera en la clase.

---

Más lejos, este paradigma puede resolver el problema this en la función que traiga como devolución de llamada a otro Funciton:

plotMapPoints: function(data) { 
    console.log(this); 
    // Need a this referring to the class itself 
    // It's inconvenient to bring this as parameter 
},