Различия между вложенной функцией события Javascript

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. Смотри МДН -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.