Accediendo a esto desde la función en línea de un objeto

Question

Tengo dificultades para hacer referencia a "esto" desde una función en línea de JavaScript, dentro de un método de objeto.

var testObject = { 
    oThis : this, 
    testVariable : "somestring", 
    init : function(){ 

     console.log(this.testVariable); // outputs testVariable as expected 

     this.testObject.submit(function(){ 

      var anotherThis = this; 
      console.log(this.testVariable) // undefined 
      console.log(oThis.testVariable) // undefined 
      console.log(testObject.testVariable) // outputs testVariable 
      console.log(anotherThis.testVariable) // undefined 

    } 

} 

Cómo accedo this.testVariable desde dentro de la función de enviar? También estoy usando jQuery, si eso hace la diferencia.

Me pregunto si este es el mejor enfoque - y tal vez debería haber presentar como una función separada, y después hacer referencia a que en línea, como:

init : function(){ 

    this.testObject.submit = this.submitForm; 

}, 
submitForm : function(){ 
    // do validation here 
    console.log(this.testVariable) // outputs testvariable 

    . 
    . 
    . 

    return valid; 
} 

pero esto no parece funcionar bien - y Creo que me gustaría mantener la función de envío en línea dentro de mi método init por el momento.

Answer 1

Una forma común es asignar el this que desee a una variable local.

init: function() { 
    var _this = this; 
    this.testObject.submit(function() { 
     console.log(_this.testVariable); // outputs testVariable 
    }); 
} 

Answer 2

El "este" variable está unida de forma dinámica cuando una función función — cualquier, independientemente de dónde se definió — es llamado.

Sin tener que ver qué se supone que debe hacer esa función "enviar", o dónde se supone que debe usarse, es difícil decir cómo cambiarla. Una cosa que podría hacer es definir "enviar" en su función "init":

init: function() { 
    // whatever 
    var instance = this; 
    instance.submitForm = function() { 
    console.log(instance.testVariable); 
    // ... 
    }; 
} 

Mientras "init" se llama inicialmente con "este" establecida en una instancia de uno de sus objetos, que debiera sé bueno.

Answer 3

Solo puede acceder a esta variable desde el contexto del objeto, que se pierde porque se encuentra dentro de otra función. o al crear instancias de un nuevo objeto. como esto

var testInstance = new testObject(); 

Posteriormente, se podría acceder a OTHIS mediante el uso de:

testInstance.oThis; 

pero eso sería redundante

me gustaría probar algo como esto Matt:

init: function(){ 

var self = this; // this allows you to access the parent object from different contexts 

this.testObject.submit(function(){ 

    console.log(self.testVariable); 

} 

Answer 4

Usted podría también haga esto usando las funciones de flecha ES6:

init: function(){ 
    this.testObject.submit(() => { 
     console.log(this.testVariable); 
    } 
} 

funciones Flecha capturar el valor this del contexto circundante, evitando la necesidad de asignar this a una nueva variable, o para utilizar las funciones de la envolvente.