javascript - 为什么我无法在我的 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();
    });
}