Смешивание jQuery, prototype и 'this'

Question

Я работаю над проектом, который использует некоторые прототипы JS и jQuery.

Моя проблема, я считаю, заключается в том, как это используется.

В моем коде у меня есть jQuery в функции, которую я буду прототипировать. JQuery выглядит следующим образом: (в этом коде, «цель» представляет собой объект JQuery передается при IMAGE_UPLOADER сначала создается.)

document.getElementById(target.find('.file_selector').prop('id')).addEventListener("change", this.FileSelectHandler, false); 

В этом случае слушатель, есть функция называется FileSelectHandler. Эта функция называется просто отлично. Однако внутри этой функции есть вызов второй функции. Вот короткая версия функции:

FILE_UPLOADER.prototype.FileSelectHandler = function(e) { 

this.FileDragHover(e); 
} 

Здесь возникает ошибка. JS жалуется, что функция FileDragHover не существует. Это, конечно, существует и определяется следующим образом:

FILE_UPLOADER.prototype.FileDragHover = function(e) {} 

Я надеюсь, что это достаточно информации, чтобы понять проблему. Если нет, сообщите мне, и я могу добавить еще.

Answer 1

Вы можете использовать $.proxy() передать обработчик выполнения обработчик событий, this внутри обработчика событий ссылается на йот элемент, к которому подключен слушатель - это то же самое, но Function.bind() JQuery версии supports IE < 9.

document.getElementById(target.find('.file_selector').prop('id')).addEventListener("change", $.proxy(this.FileSelectHandler, this), false); 

регистрации обработчика может быть упрощена с помощью JQuery для

target.find('.file_selector').change($.proxy(this.FileSelectHandler, this)) 

Answer 2

Если объект obj имеет функцию func и вы obj.func() функция вызывается в контексте obj где this в этой функции то referes до obj.

Однако, если вы делаете что-то вроде этого:

var callback = obj.func; 
callback(); 

Тогда callback не вызывается в контексте obj больше. Для браузеров контекст - это window. Это то, что происходит, если вы передадите функцию в качестве обратного вызова на addEventListener. В зависимости от того, как используется ваш обратный вызов, он может быть с именем с другим контекстом, для прослушивателей событий это элемент DOM, поэтому this в вашем коде относится к элементу DOM.

Чтобы решить эту проблему, вы можете использоваться Function.prototype.bind (вы должны проверить поддержку браузера, если она может использоваться для вас или использовать polyfill для него, который можно найти на странице MDN), вы можете использовать jQuery.proxy или создать закрывать и поддерживать контекст самостоятельно.

Answer 3

Переменная this относится к вызывающему объекту, а не к объекту, в котором объявлен метод. Поэтому, если у меня есть someObject.someFunction();, тогда someObject является вызывающим объектом и значением this в функции.

Чтобы продемонстрировать:

var obj1 = { 
    name:"obj1", 
    say:function(){ 
    console.log(this.name); 
    } 
}; 
var obj2 = {name:"obj2"}; 
obj2.say = obj1.say; 
obj2.say()//logs obj2 

В приведенном выше коде говорят, был объявлен на obj1 но вызывается из obj2.

Подробнее об этом значении, функциях и прототипе конструктора here.