Функции-стрелки JavaScript

Стрелочные функции были введены в ES6.

Стрелочные функции позволяют нам писать более короткие функции:

Грамматика

let myFunction = (a, b) => a * b;

Попробуйте сами

Раньше:

hello = function() {
  return "Hello World!";
}

Попробуйте сами

После использования стрелочных функций:

hello = () => {
  return "Hello World!";
}

Попробуйте сами

Действительно, если функция содержит только одно предложение и это предложение возвращает значение, можно удалить скобки и return Ключевое слово:

Стандартное значение возвращаемого значения стрелочных функций:

hello = () => "Hello World!";

Попробуйте сами

Комментарий:Это действует только в том случае, если функция содержит только одно предложение.

Если у вас есть параметры, передайте их внутрь скобок:

Стрелочные функции с параметрами:

hello = (val) => "Hello " + val;

Попробуйте сами

Фактически, если у вас есть один параметр, вы также можете пропустить скобки:

Стрелочные функции без скобок:

hello = val => "Hello " + val;

Попробуйте сами

это что делать?

По сравнению с обычными функциями, стрелочные функции по это также различается.

Короче говоря, использование стрелочных функций не требует обработки это связано.

В обычных функциях слово это является объектом, который вызывает функцию, может быть окно, документ, кнопка или что-то еще.

Для стрелочных функций,это Ключевое слово всегда означает объект, определяющий стрелочную функцию.

Давайте рассмотрим два примера, чтобы понять разницу.

Эти два примера вызывают методы два раза, первый раз при загрузке страницы,第二次 при单击 пользователем кнопки.

В первом примере используется обычная функция, а во втором примере используется стрелочная функция.

Результат показывает, что в первом примере возвращаются два разных объекта (window и button), а во втором примере возвращается два раза объект window, так как объект window является "владельцем" функции.

пример

Для обычных функций, слово this означает объект, который вызывает эту функцию:

// Обычные функции:
hello = function() {
  document.getElementById("demo").innerHTML += this;
}
// Вызов функции через объект window:
window.addEventListener("load", hello);
// Вызов функции через объект button:
document.getElementById("btn").addEventListener("click", hello);

Попробуйте сами

пример

используя стрелочные функции, то это 表示函数的所有者：

// Стрелочная функция:
hello = () => {
  document.getElementById("demo").innerHTML += this;
}
// Вызов функции через объект window:
window.addEventListener("load", hello);
// Вызов функции через объект button:
document.getElementById("btn").addEventListener("click", hello);

Попробуйте сами

Помните эти различия при использовании функций. В некоторых случаях поведение обычных функций может быть именно тем, что вам нужно, если это не так, используйте стрелочные функции.

Поддержка браузеров

В таблице ниже указаны версии браузеров,首家完全支持 JavaScript стрелочных функций:

Chrome IE Firefox Safari Opera
Chrome 45 Edge 12 Firefox 22 Safari 10 Opera 32
Сентябрь 2015 года Июль 2015 года Май 2013 года Сентябрь 2016 года Сентябрь 2015 года