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

【问题标题】：Differences Between Nested Javascript Event Function嵌套 Javascript 事件函数之间的差异
【发布时间】：2016-12-15 03:45:22
【问题描述】：

以下两种格式有什么区别？只有 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");
});

【问题讨论】：

见What's the meaning of "=>" (an arrow formed from equals & greater than) in JavaScript? & When should I use Arrow functions in ECMAScript 6?
你也可以使用$("#import-excel-id-select").on('select2:select', test);
这是完整的代码吗？你在处理程序中使用this 吗？
第一个如何“不起作用”？您可以发布错误消息吗？考虑创建一个Minimal, Complete, Verifiable Example。
@Tushar 我添加了完整的代码，我确实使用了'this'

标签： javascript dom-events

【解决方案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);

【讨论】：

【解决方案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 的新浏览器上运行。

【讨论】：