为什么我不能在我的javascript代码中使用事件绑定来访问“内部变量”？

Question

我是JavaScript编程新手。以下是我的代码，非常简单。我只是不知道为什么c.calculate()会提示正确的编号（5），但如果点击按钮，将会提示undefined。以及如何更改代码以让“点击”提醒数字5？

//testing 
var Cal = function(){ 
    this.x = 5;    
} 

Cal.prototype.calculate = function(){ 
    alert(this.x); 
} 

Cal.prototype.add_button = function(){ 
    var mybutton = $("<button id='test'>test</button>").appendTo('body'); // I am using Jquery 
    mybutton.bind('click',this.calculate); 
} 

var c = new Cal();   
c.add_button(); // when click on the 'test' button, will alert "undefined" 
c.calculate(); // will alert '5' 

Answer 1

要（只要你已经在使用jQuery）设置你可以使用一个正确的上下文：

mybutton.bind('click', $.proxy(this.calculate, this)); 

或

mybutton.bind('click', this.calculate.bind(this)); 

后者的支持是有限的，但（见https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind#Browser_compatibility）

Answer 2

正如SLaks所说，this指向的其他对象不是c。试试这个：

Cal.prototype.add_button = function(){ 
    var mybutton = $("<button id='test'>test</button>").appendTo('body'); // I am using Jquery 
    var that = this; //important 
    mybutton.bind('click',function(){ 
     return that.calculate(); 
    }); 
}