javascript - jQuery 事件中的自调用函数不起作用

Question

在 jQuery 事件中定义的自调用函数不起作用，但为什么？

$('div').on('click', function(){
  $('div').text($('div').text() + 1)
  (function(){
    $('div').text($('div').text() + 0)
  })();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>text</div>

编辑:下面的答案集中在 this 关键字上，所以我将 this 参数更改为 'div'。还是不行。

Answer 1

在 IIFE 中，this 引用另一个上下文。每个函数都有自己的上下文。您可以使用 arrow function , explicitly binding of the context或者只是将 this 引用保存到另一个变量中并使用它。还有一件事，您错过了在第一个语句之后放置 ;，这会导致错误。

也不要在代码 $('div') 中使用这种样式，这会找到所有 div，但会得到第一个 div 的文本，所以你做的工作比它需要的多。

箭头函数

$('div').on('click', function() {
    $(this).text($(this).text() + 1);
    (() => {
      $(this).text($(this).text() + 0)
    })();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>text</div>

上下文的显式绑定(bind)

$('div').on('click', function(){
    $(this).text($(this).text() + 1);
    (function() {
        $(this).text($(this).text() + 0)
    }).bind(this)();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>text</div>

将引用保存到另一个变量中

$('div').on('click', function(){
    const that = this;
    $(that).text($(that).text() + 1);
    (function(){
      	$(that).text($(that).text() + 0)
    })();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>text</div>