javascript - 当没有选择任何内容时 $(this) 如何工作

Question

我刚刚开始缓存我的 jquery 对象，但不确定在使用(this)时如何正确执行它。

此外，我知道如何使用(this)的唯一一次是当它位于点击对象或函数内部时，如下所示:

$(".trigger").click(function () {
    if ($(this).hasClass('toggle')) {
        $(this).closest("td").next().find(".clueless > div").slideUp();
        $(this).removeClass('toggle');
    } else {
        $(this).closest("td").next().find(".clueless > div").slideDown();
        $(this).addClass('toggle');
    }
});

所以如果我想缓存 $(this).closest("td").next().find(".clueless > div") 我唯一能想到的就是:

var $something = $(".trigger").find(this).closest("td").next().find(".clueless > div");

Answer 1

我不会完全重复 this 关键字的工作原理，但有一个详尽的解释 here .

在 JS 中，默认 this 行为未改变

简单起见，要知道 this 关键字引用的对象，您只需查看函数调用中 . 的左侧即可。

例如，在 myObj.someFunction() 中，someFunction 中的 this 关键字将指向 myObj (除非该函数已使用 Function.prototype.bind 绑定(bind))。

如果函数不是在对象上调用的，例如 someFunction()，则 this 将指向全局对象，即 window > 在浏览器中。

在传递的匿名函数中也是如此，除了 addEventListener 之外，它将确保处理程序中的 this 值是要接收的对象。处理程序已附加。

例如

setTimeout(function () { this; /*window*/ }, 10);

document.addEventListener('click', function (e) {  
    e.target; //the clicked DOM element
    this; //the document
});

当 API 更改 this 时

使用Function.prototype.call或 Function.prototype.apply，可以指定 this 在函数执行期间指向的对象。

一些库(例如 jQuery)正在利用该功能使 this 指向更直观的对象，而不是全局对象。

例如

$('#someEl').on('click', function (e) {
    this; //the DOM element that was clicked (not the jQuery wrapper)
});

当库以这种方式更改this时，除了查看库的文档来了解this将是什么之外，没有其他方法。

我们可以从jQuery event docs读取那:

In addition to the event object, the event handling function also has access to the DOM element that the handler was bound to via the keyword this.

重写你的函数

现在，您可以按照以下方式重写函数:

$(".trigger").click(function () {
    var $this = $(this).toggleClass('toggle'),
        $elementToSlide = $this.closest("td").next().find(".clueless > div"),
        isToggled =  !$this.hasClass('toggle'),
        slideBehavior = isToggled? 'slideUp' : 'slideDown';

    $elementToSlide[slideBehavior]();
});