Объектно-ориентированный дизайн в javascript и указатель this

Question

Я создаю объект в javascript, как это

function myobject() {
   this.myvar1 = 0;
   this.myvar2 = 0;
}

myobject.prototype.a = function(){
    this.myvar1 +=1;
    $('#button').click(function () {  // 'this' is undefined
        alert(this.myvar1)
     })
}

var mything = new myobject();
mything.a()

Как правильно передать указатель this на анонимную функцию?

Answer 1

Для обновленного вопроса: Проблема в том, что внутри этого обработчика события this относится к элементу, на который вы нажали, а не к myobject, поэтому просто сохраните ссылку на него, например, так::

myobject.prototype.a = function(){
    this.myvar1 +=1;
    var self = this;
    $('#button').click(function () {
        alert(self.myvar1)
    });
}

Вы можете проверить это здесь .

---

Для предыдущего вопроса: Что у вас должно работать (точно так же, каку вас есть) вы можете проверить это здесь .

Answer 2

Чтобы передать this внутренней функции, «сохраните» ее в другой переменной.

myobject.prototype.a = function() {
    var self = this;
    self.myvar1 += 1;

    $('#button').click(function () {
         alert(self.myvar1);
    });
}

Answer 3

Добавление следующего кода в конец фрагмента и его корректный запуск выводит предупреждение «1»:

mything.b();
alert(mything.myvar1);

Чего вы ожидали? Возможно, вы неправильно вызываете mything.b()?

Answer 4

Другие здесь проделали отличную работу, объясняя проблему и способы ее решения без добавления каких-либо зависимостей, но лично я думаю, что этот плагин является лучшим общим решением (если вы не возражаете против зависимости):

http://markdalgleish.com/projects/eventralize/

Answer 5

Здесь происходит то, что jQuery захватывает значение this в анонимной функции, используемой в качестве обработчика для события click.Это немного сбивает с толку, но поведение jQuery заключается в назначении элемента DOM, который вызвал событие, на this.Существует несколько способов явно установить значение this («контекст») для функции обратного вызова:

1. Function.prototype.bind - часть стандарта ECMAScript 5, только начинающаябыть реализовано в браузерах.Для поддержки прежних версий вы можете извлечь ее из библиотеки Prototype.
2. $. Proxy - дерьмовый эквивалент jQuery для Function.prototype.bind, который был представлен в jQuery 1.4.

Iнаписал пару постов в моем блоге, которые объясняют их более подробно, если вам интересно:

• Организация JavaScript с пространствами имен и прототипами функций
• Понимание метода $ .proxy () jQuery 1.4

В обоих случаях, поскольку this теперь будет вашим объектом, а не инициирующим элементом DOM, вы можете получить инициирующий элемент DOMпутем проверки объекта события, который будет вторым параметром для вашей функции обратного вызова.