Question

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

格式1：

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

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

有多个，但最重要的一个，一个是有效的，另一个没有的原因是因为this的值在两种情况下都不同。

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

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

如何调用函数在JavaScript中很重要。有关详细信息，请参阅MDN -this。

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

来修复

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

Answer 2

格式1是另一种写作方式：

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

但在function test()内，$(this)可能不是您所期望的。

所以，一种解决方法

$("#import-excel-id-select").on('select2:select', function (e) { test.call(this, e); // or test.bind(this)(e); });

并且，() => {}仅在支持ES6的新浏览器上运行。

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

2 个答案: