javascript - JQuery 函数的持久化

Question

我正在尝试为 HTML 设置点击回调，使另一个节点可见。一路走来，我惊讶地发现下面两个语句并不等价:

$("#title").click($("#content").toggle);
$("#title").click(function() {
    $("#content").toggle();
}

当最终单击该元素时，第一个语句最终会导致 TypeError，并显示一条消息“undefined is not a function”，我推测这表明我分配给 onclick 回调的任何内容最终都是未定义的，不知何故不会保留在内存中。

解决方法很简单(只需使用第二种形式的语句)，但我真正想了解的是为什么将切换函数作为对象传递在最终被调用时不起作用.我可以看到两者在语义上是不同的:第一个在绑定(bind)事件时执行 $("#content") 调用，另一个在事件发生时执行，但我不明白为什么这很重要。

如果它与答案相关，则有问题的代码位于函数内部(该函数可能在用户可以单击任何内容时返回)。

Answer 1

在第一个示例中，您传递了 jQuery 的 toggle 函数以作为事件处理程序执行。

但是，当 jQuery 执行事件处理程序时，它会将 this 的值设置为触发事件的 DOM 元素。

但是，

toggle 期望它是 jQuery 对象(如果正常调用，它会是)，因为它使用 this.animate() in its implementation。 .

这就是为什么您会看到“undefined is not a function”，因为 this.animate 是“undefined”，而您正试图将其作为函数调用。

---

重要的是要理解函数内部 this 的解析被推迟到函数被执行。这意味着单个函数可以在两次调用之间看到不同的 this 值。可以使用 bind()、new、call()、apply 更改 this 的值() 或通过不同方式引用对象；有关详细信息，请参阅 here , 或 How does the "this" keyword work?