Problème de variable "this" remplacé ou comment appeler une fonction membre?

Question

Je cette classe où je suis en utilisant une combinaison de jQuery et Prototype:

var MyClass = Class.create({ 
    initElements: function(sumEl) { 
     this.sumEl = sumEl; 
     sumEl.keyup(this.updateSumHandler); 
    }, 

    updateSumHandler: function(event) { 
     // Throws error here: "this.updateSum is not a function" 
     this.updateSum(); 
    }, 

    updateSum: function() { 
     // does something here 
    } 
}); 

Comment puis-je appeler this.updateSum() après tout?

Answer 1

Vous devez utiliser des fermetures.

initElements: function(sumEl) { 
     this.sumEl = sumEl; 
     var ref = this; 
     sumEl.keyup(function(){ref.updateSumHandler();}); 
}, 

Answer 2

Il est le fameux Javascript idiome vous devez utiliser en initElements fonction:

var that = this; 

plus tard dans votre gestionnaire juste se référer à that au lieu de this:

var MyClass = Class.create({ 
    initElements: function(sumEl) { 
     this.sumEl = sumEl; 
     var that = this; 
     sumEl.keyup(this.updateSumHandler); 
    }, 
    updateSumHandler: function(event) { 
     that.updateSum(); 
    }, 
    updateSum: function() { 
     // does something here 
    } 
}); 

Il était couvert en grand détail dans talk by Stuart Langridge sur Fermetures Javascript à Fronteers Conférence 2008

Answer 3

suggestion totalement non testé:

sumEl.keyup(this.updateSumHandler.bind(this)); 

.bind() redonne une nouvelle fonction où le premier paramètre de bind est Closured pour vous this contexte de la fonction. Il peut également fermer les paramètres, consultez le documentation.

Pour moi, Function.bind() est la meilleure fonction qui ait jamais été écrit en JavaScript :)

Answer 4

gestionnaires DOMEvent sont traditionnellement appelés avec les éléments qu'ils sont enregistrés comme contexte/« ce ». C'est ce que jQuery fait aussi.

La définir la updateHandler dans le constructeur

var MyClass = Class.create({ 
initElements: function(sumEl) { 
     this.sumEl = sumEl; 

     // save this as that so we can access it from the anonymous function 
     var that = this; 
     sumEl.keyup(function() 
     { 
      that.updateSum(); 
     }); 
}, 

updateSum: function() { 
     // does something here 
} 
}); 

option la plus facile pour vous serait d'utiliser la capacité de jQuery pour gérer les données d'événements

var MyClass = Class.create({ 
initElements: function(sumEl) { 
     this.sumEl = sumEl; 
     sumEl.bind("keyup", this, this.updateSumHandler); 
}, 

updateSumHandler: function(event) { 
    // event.data is the initial this 

    // call updateSum with correct context 
    event.data.updateSum.call(event.data); 
}, 

updateSum: function() { 
     // does something here 
} 
}); 

L'autre possibilité est d'utiliser des fermetures Ceci est un exemple de travail que l'une des autres réponses a essayé de faire. Cela fonctionne parce que la fonction anonyme peut toujours accéder aux variables dans la fonction environnante - mais cela ne fonctionne que si la fonction est réellement définie dans la fonction qui a "that" comme variable locale.