javascript - 嵌套 Javascript 事件函数之间的差异

Question

以下两种格式有什么区别？只有 format2 有效。

格式一:

function test (e){
    var element = e.params.data.element;
    var $element = $(element);

    $element.detach();
    $(this).append($element);
    $(this).trigger("change");
}
$("#import-excel-id-select").on('select2:select', (e) => {
    test(e);
});

---

格式2:

$("#import-excel-id-select").on('select2:select', function (e){
    var element = e.params.data.element;
    var $element = $(element);

    $element.detach();
    $(this).append($element);
    $(this).trigger("change");
});

Answer 1

What are the differences between the following two formats? Only format2 works.

有多种，但最重要的一种，一种起作用而另一种不起作用的原因是因为两种情况下 this 的值不同。

在第二个示例中，this 指的是该函数绑定(bind)到的 DOM 元素，因为该函数用作事件处理程序。

在第一个示例中，您从事件处理程序中调用 test 作为 test(e)。当以这种方式调用函数时，this 要么引用全局对象，要么引用 undefined(在严格模式下)。 this 不引用 DOM 元素，因此所有 jQuery(?) 方法都失败。

如何调用函数在 JavaScript 中很重要。参见 MDN -this获取更多信息。

---

也没有理由让一个函数简单地调用另一个具有相同参数的函数。第一个例子可以通过 test 来修复:

$("#import-excel-id-select").on('select2:select', test);