回调、匿名函数和上下文

Callbacks, anonymous functions and context

本文关键字：上下文 函数 回调      更新时间：2023-09-26

这个代码有什么区别：

$('.percentage_field').change(function() {
    update_percentage();
});
$('.inspect1').change(function(){
    show_hide_targets();
});

而这段代码：

$('.percentage_field').change(
    update_percentage
);
$('.inspect1').change(
    show_hide_targets
);

当回调响应事件时，函数内部的this设置为作为事件目标的 DOM 元素。

在第一个示例中，匿名函数获取目标元素的this，但该this不会转发到内部函数调用。相反，内部函数根据其调用方式使用this运行。（在这里，它是一个直接的"原始"调用（即，不作为成员函数调用），因此它在非脚本模式下以等于 window 的this运行。

在第二个示例中，函数update_percentage和show_hide_targets直接获取目标元素的this。

考虑一个例子：

function sayThis() { alert(this); }
someElem.addEventListener("click", function() { sayThis() });
someElem.addEventListener("click", sayThis);
someElem.addEventListener("click", function() { sayThis.call(this) });

第一个将提醒window（或在严格模式下undefined）;第二个将提醒侦听器触发的元素。第三个侦听器使用匿名函数，但它使用 .call(this) 调用内部函数，这会将原始this转发到内部函数。

相关文章：