javascript - 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.

在第一种情况中，this指的是对象，但在第二种情况中，它指的是 anchor 标记。当我们在另一个函数中调用该函数时，为什么 this 会变回对象？ 为什么？

Answer 1

this 由 jQuery 操作，因此您可以轻松访问已被选中或其事件已触发的 DOM 元素。当涉及到应用对象的方法时，这显然会导致问题，因为 this 的上下文丢失了。

看看 jQuery 的 .proxy()方法。这将允许您限定 this 的范围以引用 obj 的上下文。

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

要了解您的情况的差异，您需要了解作为 .on() 方法的第二个参数(或第三个...)引用的函数在DOM 元素的上下文。也就是说，函数中的 this 指的是元素。但是，在您的第一个示例中，您只是在没有任何预设上下文的情况下调用 obj.doIt() 方法，因此 this 指的是 obj.