Вопрос:

ключевое слово this переопределяется в классе JavaScript при обработке событий jQuery

javascript jquery oop prototype

611 просмотра

2 ответа

4519 Репутация автора

Я определил класс в 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();
};

Когда я нажимаю кнопку, он не может сказать:

У объекта # нет метода 'showText'

Похоже, что thisв jQuery обработчик события click ссылается на сам HTML-элемент и не ссылается на экземпляр MyClassобъекта.

Как я могу решить эту ситуацию?

Доступно jsFiddle: http://jsfiddle.net/wLH8J/

Автор: German Latorre Источник Размещён: 15.05.2012 08:18

Ответы (2)


11 плюса

48291 Репутация автора

Решение

Это ожидаемое поведение, попробуйте:

function MyClass(text) {
    var self = this;

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

или в новых браузерах (используя bind ):

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

дальнейшее чтение:

Автор: Yoshi Размещён: 15.05.2012 08:20

2 плюса

696163 Репутация автора

thisопределяется, когда вызывается функция, а не когда она определена. Вы скопировали функцию в обработчик кликов, поэтому, когда она вызывается, она не связана MyClassи thisне является тем, чем вы хотите.

Вам нужно использовать замыкание для хранения значения thisв другой переменной.

function MyClass(text) {
    this.text = text;
    var self = this;
    var click_handler = function () { self.button_click(); };
    $('#myButton').click(click_handler);
}
Автор: Quentin Размещён: 15.05.2012 08:21
Вопросы из категории :
32x32