“这个”关键字处理jQuery的事件时，重写的JavaScript类('this'

我已经定义在JavaScript中的一类具有一个方法：

function MyClass(text) {
    this.text = text;
}

MyClass.prototype.showText = function() {
    alert(this.text);
}

然后，我定义充当一个click事件，使用jQuery处理程序的方法：

function MyClass(text) {
    this.text = text;
    $('#myButton').click(this.button_click);
}

MyClass.prototype.showText = function() {
    alert(this.text);
};

MyClass.prototype.button_click = function() {
    this.showText();
};

当我按一下按钮，它没有说：

对象＃<HTMLInputElement>没有方法 'showText'

这似乎是this在jQuery的单击事件处理程序指的HTML元素本身，它不是指的实例MyClass对象。

我怎样才能解决这种情况呢？

可用的jsfiddle： http://jsfiddle.net/wLH8J/

Answer 1:

这是一个预期的行为，请尝试：

function MyClass(text) {
    var self = this;

    this.text = text;
    $('#myButton').click(function () {
      self.button_click();
    });
}

或在新的浏览器（使用绑定 ）：

function MyClass(text) {
    this.text = text;
    $('#myButton').click(this.button_click.bind(this));
}

或使用jQuery 代理 ：

function MyClass(text) {
    this.text = text;
    $('#myButton').click($.proxy(this.button_click, this));
}

延伸阅读：

• http://www.quirksmode.org/js/this.html

Answer 2:

this是当一个函数被调用，而不是当它被定义来确定。 已复制功能，单击处理程序，所以当它被称为是没有关联MyClass和this是不是你希望它是什么。

你需要使用闭包，它的值存储this在一个不同的变量。

function MyClass(text) {
    this.text = text;
    var self = this;
    var click_handler = function () { self.button_click(); };
    $('#myButton').click(click_handler);
}

文章来源: 'this' keyword overriden in JavaScript class when handling jQuery events