Javascript и JQuery «это» ошибки сферы применения

Question

Образец бит кода:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 

<div id="myinfo">info</div> 
<input id="clickme" type="button" value="click here to display info"/> 

<script type="text/javascript"> 
    function Fighter() { 
     this.name = "Kenny"; // fighters name 
     this.hp = 10;   // fighters hp 
     this.getHP = function() { 
      return this.hp; 
     } 

     this.getName = function() { 
      return this.name; 
     } 

     this.initUpdateButton = function(button_id) { 
      $(button_id).click(function() { 
       $("#myinfo").html("Name: "+this.getName()+"<br/>HP:"+this.getHP()); 
       // this.getName is undefined 
      }); 
     } 

    }; 

    var me = new Fighter(); 
    alert("Name: "+me.getName()+"<br/>HP:"+me.getHP()); // works properly 
    me.initUpdateButton("#clickme"); // bind it to some ID 
</script> 

Проще говоря, данный класс JavaScript с JQuery смешано, я понимаю, что на обратный вызов для функций JQuery (т.е. $.click()), что this ссылается на объект, который был нажат, и Не Функция класса или корня(). поэтому this.getName() и this.getHP() не работают.

Но каков наилучший способ обойти эту проблему?

Я видел несколько подобных сообщений, но они были бесполезны для меня, так что извините, если это сообщение и спасибо заранее.

Answer 1

this.initUpdateButton = function(button_id) { 
      var self = this; 
      $(button_id).click(function() { 
       $("#myinfo").html("Name: "+self.getName()+"<br/>HP:"+self.getHP()); 
      }); 
     }