La valeur de 'this' à l'intérieur d'une fonction prototype Javascript utilisée comme gestionnaire d'événements

Question

J'essaie d'utiliser l'héritage prototype en Javascript. Le problème avec mon code ci-dessous est que lorsque le bouton est cliqué et MyNamespace.MyObj.myEventHandler est appelé, la valeur de this n'est pas l'instance de MyNamespace.MyObj, mais est plutôt le bouton qui a été cliqué. Suis-je structurer les choses mal (existe-t-il un meilleur moyen)? Puis-je en quelque sorte m'assurer que this est l'instance de l'objet plutôt que le bouton appelant?

var MyNamespace.MyObj = function(myform) { 
    this.myform = myform; 
    jQuery('.mybutton', this.myform).click(this.myEventHandler); 
}; 

MyNamespace.MyObj.prototype = { 
    myEventHandler: function() { 
    this.myform.get(0).submit(); 
    } 
}; 

jQuery(document).ready(function() { 
    new MyNamespace.MyObj(jQuery('#myform')); 
}); 

Ceci est juste un exemple très abrupt que j'utilise pour apprendre l'héritage de prototype. Je me rends compte que la fonction réelle du code ci-dessus pourrait être faite simplement dans jQuery ou que je pourrais utiliser un objet littéral ou le modèle Module - mais je suis vraiment intéressé par apprendre l'héritage du prototype plutôt que d'implémenter une fonction spécifique .

Answer 1

Il existe différentes façons de préserver la valeur this, la plus simple OMI est:

var MyNamespace.MyObj = function(myform) { 
    var instance = this; // store `this` 
    this.myform = myform; 
    jQuery('.mybutton', this.myform).click(function() { 
    instance.myEventHandler(); // use the stored value 
    }); 
}; 

Answer 2

Si vous avez accès * à l'ES5 Function.prototype.bind, vous pouvez le faire:

jQuery('.mybutton', this.myform).click(this.myEventHandler.bind(this)); 

jQuery fournit , qui fait la même chose, mais avec une syntaxe différente:

jQuery('.mybutton', this.myform).click(jQuery.proxy(this.myEventHandler, this)); 

Les deux fonctionnent avec une méthode et un objet et renvoient une fonction qui appellera cette méthode sur cet objet.

Lorsque vous transmettez (ou affectez) une méthode en javascript, elle est tronquée de l'objet d'origine. C'est juste une de ces choses que vous devez savoir. (C'est la même chose qui fait fonctionner l'héritage, les méthodes sont découpées du parent, et sont invoquées dans le contexte de l'enfant.)

* Dites, via le es5 shim.