Accesso a questa funzione dalla funzione inline dell'oggetto

Question

Ho difficoltà a fare riferimento a "questo" all'interno di una funzione in linea javascript, all'interno di un metodo oggetto.

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 

    } 

} 

Come posso accedere this.testVariable dall'interno della funzione di presentare? Sto anche usando jQuery, se questo fa la differenza.

Mi chiedo se questo è l'approccio migliore - e forse avrei dovuto presentare come una funzione separata, e quindi fare riferimento che in linea, come:

init : function(){ 

    this.testObject.submit = this.submitForm; 

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

    . 
    . 
    . 

    return valid; 
} 

ma questo non sembra funzionare sia - e Penso che mi piacerebbe solo mantenere la funzione di invio in linea all'interno del mio metodo init per ora.

Answer 1

Un modo comune è assegnare lo this a una variabile locale.

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

Answer 2

Il "questa" variabile è legato dinamicamente quando una funzione funzione — qualsiasi, indipendentemente da dove è stato definito — è chiamato.

Senza vedere cosa dovrebbe fare la funzione "submit", o dove dovrebbe essere utilizzata, è difficile dire come cambiarlo. Una cosa che si potrebbe fare è quello di definire "submit" nella funzione "init":

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

Finché "init" viene chiamato inizialmente con "questo" impostato su un'istanza di uno dei tuoi oggetti, si dovrebbe essere buono.

Answer 3

È possibile accedere alla variabile oThis solo dal contesto dell'oggetto, che viene perso perché ci si trova all'interno di un'altra funzione. o attraverso l'istanziazione di un nuovo oggetto. Ti piace questa

var testInstance = new testObject(); 

Poi si potrebbe accedere OTHIS utilizzando:

testInstance.oThis; 

ma che sarebbe ridondante

vorrei provare qualcosa di simile 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

Si potrebbe esegui anche questa operazione utilizzando le funzioni freccia ES6:

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

funzioni Arrow catturano il valore this del contesto racchiude, evitando la necessità di assegnare this a una nuova variabile, oppure utilizzare le funzioni associate.