Comment puis-je conserver le contrôle du mot-clé this lors de l'extension de prototypes dans jQuery?

Question

J'implémente une structure de classe dans jQuery, mais j'ai des problèmes lorsque j'essaie d'appeler certaines de mes fonctions.

Voici comment la structure est la configuration:

MyClass = function(name) { 
    this.init(name); 
} 
$.extend(MyClass.prototype, { 
    init: function(theName) { 
     this.myFunction(); // works 
     $('.myclass').each(function(){ 
      this.myFunction(); // doesn't work 
     }); 
    }, 
    myFunction = function(){} 
}); 

Le problème que je vais avoir est que lorsque je tente d'appeler un de mes fonctions (par exemple, myFunction()) à l'intérieur d'un bloc jQuery (comme le each() construire ci-dessus), j'obtiens l'erreur "myFunction() is not a function".

Je pense que cela a quelque chose à voir avec le mot-clé this qui change sa signification dans le bloc jQuery, mais je ne suis pas sûr. Toute aide serait appréciée!

Answer 1

Vous devez affecter this à une autre variable, en raison du fonctionnement de la portée.

MyClass = function(name) { 
    this.init(name); 
} 
$.extend(MyClass.prototype, { 
    init: function(theName) { 
     this.myFunction(); // works 
     var that = this; 
     $('.myclass').each(function(){ 
       this.myFunction(); // doesn't work 
       that.myFunction(); // should work 
     }); 
    }, 
    myFunction = function(){} 
}); 

Answer 2

MyClass = function(name) { 
    this.init(name); 
} 
$.extend(MyClass.prototype, { 
    init: function(theName) { 
     this.myFunction(); // works 
     temp = this; 
     $('.myclass').each(function(){ 
       temp.myFunction(); // works 
     }); 
    }, 
    myFunction = function(){} 
}); 

essayer. :)

Answer 3

La fonction .each() modifie le contexte de this (comme n'importe quelle fonction en JavaScript).

Vous devez faire quelque chose comme ceci:

MyClass = function(name) { 
    this.init(name); 
} 
$.extend(MyClass.prototype, { 
    init: function(theName) { 
     this.myFunction(); // works 
     var myClass = this; 
     $('.myclass').each(function(){ 
       myClass.myFunction(); // doesn't work 
     }); 
    }, 
    myFunction = function(){} 
});