Question

我已将一个小脚本放在一个较大的测验项目的一部分中，并且很难理解为什么在调用它之前在函数中设置了this关键字。这是我的代码：

$(document).ready(function ($) {

     function nextCard() {
         console.log('yes');
         $(this).closest('.card').hide();
         $(this).parent().next().show();
     }

    $("#start").on('click', function (e) {
        e.preventDefault();

        //First card to appear
        nextCard();
    });

    $("#next").on('click', function (e) {
        e.preventDefault();
        nextCard();
    });
});

为什么这个＆＃39;例如，没有设置为元素#start？

Answer 1

在nextCard()内，this会引用window，因为这是默认范围。因此，您的DOM遍历方法很可能无法按预期工作。

假设您希望函数中的this引用所点击的#start或#next元素，您可以提供nextCard()的参考到事件处理程序方法，如下所示：

$(function($) {
  function nextCard(e) {
    e.preventDefault();
    console.log('yes');
    $(this).closest('.card').hide();
    $(this).parent().next().show();
  }

  $("#start, #next").on('click', nextCard);
});

Answer 2

为什么'this'不能设置为#start元素？

为什么会这样？并不是说它能感知你想要它做什么。

使用Function#call定义呼叫期间应指向的对象this。如果您没有明确定义它，this将默认为全局对象（浏览器中为Window）。

$(document).ready(function ($) {

    function nextCard() {
        console.log('yes');
        $(this).closest('.card').hide();
        $(this).parent().next().show();
    }

    $("#start").on('click', function (e) {
        e.preventDefault();

        //First card to appear
        nextCard.call(this);
    });

    $("#next").on('click', function (e) {
        e.preventDefault();
        nextCard.call(this);
    });
});

使用someFunction.call(this);将有效地“转移this的当前含义”到被调用函数，或者更技术上，在任何对象someFunction的上下文中调用this现在参考。

jQuery会自动执行上述操作 - 它会在调用事件处理程序时为您设置this正确的DOM元素。您可以使用自动this处理，例如@Rory McCrossan's answer节目 - 或者您自己处理this。

＆＃39;这＆＃39;可重用函数中的绑定？

2 个答案: