Объем этой ссылки в jquery?

Question

var obj = {  
    doIt : function(){ 
     console.log(this) 
    } 
} 
$('a').on('click', function(){ 
    obj.doIt(); // this now refers to object  
}); 

$('a').on('click', obj.doIt); // this refers to anchor tag. 

В первом случае , это относится к объекту, но в второго случая это относится к якорь тег. Почему это изменяется на объект обратно, когда мы вызываем функцию внутри другой функции и почему ?.

Answer 1

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

Посмотрите на метод jQuery's .proxy(). Это позволит вам охватить this для ссылки на контекст obj.

$("a").on("click", $.proxy(obj.doIt, obj)); 

Чтобы понять разницу в вашей ситуации, вы должны понимать, что функция ссылается как второй аргумент (или третий ...) к методу .on() применяется/вызывается в контексте элемента DOM. То есть внутри функции относится к элементу. Однако в первом примере вы просто вызываете свой метод obj.doIt() без какого-либо предустановленного контекста, поэтому this относится к obj.