javascript – 了解jQuery中的$.proxy()

一个常见的例子是在单击处理程序内发生的setTimeout.

拿着这个：

$('#myElement').click(function() {
        // In this function,"this" is our DOM element.
    $(this).addClass('aNewClass');
});

意图很简单.单击myElement时,它应该获取类aNewClass.在处理程序内部,它表示被单击的元素.

但是如果我们在添加课程之前想要一个短暂的延迟呢？我们可能会使用setTimeout来完成它,但问题是无论我们为setTimeout提供什么函数,该函数内部的值都将是window而不是我们的元素.

$('#myElement').click(function() {
    setTimeout(function() {
          // Problem! In this function "this" is not our element!
        $(this).addClass('aNewClass');
    },1000);
});

所以我们可以做的是调用$.proxy(),向它发送函数和我们想要赋值给它的值,它将返回一个保留该值的函数.

$('#myElement').click(function() {
   // ------------------v--------give $.proxy our function,setTimeout($.proxy(function() {
        $(this).addClass('aNewClass');  // Now "this" is again our element
    },this),1000);
   // ---^--------------and tell it that we want our DOM element to be the
   //                      value of "this" in the function
});

因此,在我们给$.proxy()函数和我们想要的值之后,它返回了一个函数,以确保正确设置它.

它是如何做到的？它只返回一个匿名函数,该函数使用.apply()方法调用我们的函数,该方法允许它显式设置它的值.

简要回顾一下返回的函数可能如下所示：

function() {
    // v--------func is the function we gave to $.proxy
    func.apply( ctx );
    // ----------^------ ctx is the value we wanted for "this" (our DOM element)
}

所以这个匿名函数被赋予setTimeout,它所做的就是用正确的上下文执行我们的原始函数.