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

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

2 个答案: