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()); 
      }); 
     }