- Перевод
“Толстые” стрелочные функции (=>), так же известные, как arrow функции – абсолютно новая функциональность в ECMAScript 2015 (ранее известном под именем ES6). Если верить слухам, то в ECMAScript 2015 => синтаксис стал использоваться вместо –> синтаксиса под влиянием CoffeeScript . Так же, не последнюю роль сыграла похожесть передачи контекста this.
У стрелочных функций есть две главные задачи: обеспечить более лаконичный синтаксис; обеспечить передачу лексического this с родительским scope. Давайте детально рассмотрим каждую из них!
Новый синтаксис функций
Классический синтаксис функций в JavaScript отличается ригидностью, будь это функция с одной переменной или страница с множеством функций. При каждом объявлении функци, вам необходимо писать function () {}. Потребность в более лаконичном синтаксисе функций была одной из причин, почему в свое время CoffeeScript стал очень популярен. Эта потребность особенно очевидна в случае с небольшими callback функциями. Давайте просто взглянем на цепочку Promise:function getVerifiedToken(selector) { return getUsers(selector) .then(function (users) { return users; }) .then(verifyUser) .then(function (user, verifiedToken) { return verifiedToken; }) .catch(function (err) { log(err.stack); }); }
Вверху вы видите более или менее удобоваримый код, написанный с использованием классического синтаксиса function в JavaScript. А вот так выглядит тот же самый код, переписанный с использованием стрелочного синтаксиса:
function getVerifiedToken(selector) { return getUsers(selector) .then(users => users) .then(verifyUser) .then((user, verifiedToken) => verifiedToken) .catch(err => log(err.stack)); }
Здесь надо обратить внимание на несколько важных моментов:
- Мы потеряли function и {}, потому что наши callback функции записываются в одну строку.
- Мы убрали (). Теперь они не обертывают список аргументов, когда присутствует только один аргумент (остальные аргументы проходят как исключения; например, (...args) => ...).
- Мы избавились от ключевого слова return. Убирая {}, мы позволяем однострочным стрелочным функциям провести неявный возврат (в других языках такие функции часто называют лямбда функциями).
const getVerifiedToken = selector => { return getUsers() .then(users => users) .then(verifyUser) .then((user, verifiedToken) => verifiedToken) .catch(err => log(err.stack)); }
Здесь начинается самое интересное. Так как у нашей функции есть только один оператор, мы можем убрать {}, и код будет очень похож на синтаксис CoffeeScript :
const getVerifiedToken = selector => getUsers() .then(users => users) .then(verifyUser) .then((user, verifiedToken) => verifiedToken) .catch(err => log(err.stack));
И все же код выше написан с использованием синтаксиса ES2015. (Я тоже удивился, что он прекрасно скомпилировался .) Когда мы говорим о стрелочных функциях с одним оператором, это не значит, что оператор не может занимать больше одной строки, для удобства использования.
Есть, однако, один существенный минус: убрав {} из стрелочных функций, как мы можем возвратить пустой объект? Например, тот же {}?
const emptyObject = () => {};
emptyObject(); // ?
А вот как выглядит весь код вместе:
function () { return 1; }
() => { return 1; }
() => 1
function (a) { return a * 2; }
(a) => { return a * 2; }
(a) => a * 2
a => a * 2
function (a, b) { return a * b; }
(a, b) => { return a * b; }
(a, b) => a * b
function () { return arguments; }
(...args) => args
() => {} // undefined
() => ({}) // {}
Лексический this
История о том, как this пытались протащить в JavaScript, уже покрылась пылью. Каждая function в JavaScript задает свой собственный контекст для this. Этот контекст, с одной стороны, очень легко обойти, а, с другой стороны, он крайне раздражает. На примере ниже вы видите код для часов, которые обновляют данные каждую секунду, обращаясь к jQuery:$(".current-time").each(function () { setInterval(function () { $(this).text(Date.now()); }, 1000); });
При попытке сослаться на this DOM элемента, заданный через each в callback’е setInterval, мы, к сожалению, получаем совсем другой this, – тот, который принадлежит callback. Обойти этот момент можно, задав переменную that или self:
$(".current-time").each(function () { var self = this; setInterval(function () { $(self).text(Date.now()); }, 1000); });
“Толстые” стрелочные функции могут помочь решить эту проблему, так как они не имеют this:
$(".current-time").each(function () { setInterval(() => $(this).text(Date.now()), 1000); });
Как насчет аргументов?
Одним из минусов стрелочных функций является то, что у них нет собственной переменной arguments, как у обычных функций:function log(msg) { const print = () => console.log(arguments); print(`LOG: ${msg}`); } log("hello"); // hello
Повторимся, что у стрелочных функций нет this и нет arguments. Однако, приняв это во внимание, вы все же можете получить аргументы, переданные в стрелочные функции с помощью rest-параметров (так же известны, как spread операторы):
function log(msg) { const print = (...args) => console.log(args); print(`LOG: ${msg}`); } log("hello"); // LOG: hello
Как насчет генераторов?
“Толстые” стрелочные функции не могут использоваться как генераторы. Никаких исключений и обходных путей нет. Точка.Вывод
“Толстые” стрелочные функции – одна из причин, почему я так люблю JavaScript. Очень соблазнительно просто начать использовать => вместо function. Я видел целые библиотеки, где используется только вариант =>. Не думаю, однако, что это разумно. В конце концов, у => есть много особенностей и скрытых функций. Я рекомендую использовать стрелочные функции только там, где вам нужна новая функциональность:- Функции с одиночными операторами, которые сразу же делают возврат;
- функции, которые должны работать с this с родительским scope.
ES6 сегодня
Так можно ли воспользоваться возможностями ES6 уже сегодня? Использование транспайлеров стало нормой в последние несколько лет. Ни простые разработчики, ни крупные компании не стесняются их применять.Всем привет! В этой статье мы рассмотрим, что такое стрелочные функции в ES6 и как их использовать .
Стрелочные функции – это функции, которые записываются при помощи оператора "стрелка"(=> ).
Давайте сразу рассмотрим пример:
Let add = (x, y) => x + y;
console.log(add(5, 2));
В результате выполнения данной функции в консоли мы увидим число 7.
Сначала, в круглых скобках мы передаем аргументы, далее ставим знак стрелочки, а потом пишем код самой функции. В нашем случае она просто принимает два числа и складывает их. По идее, это то же самое, что и function expression в ES5 . Если вы используете Babel или подобные компиляторы, то, скорее всего, они напишут что-то вроде этого:
Var add = function add(x, y) {
return x + y;
};
Если ваша функция принимает только один параметр, круглые скобки ставить необязательно.
Let square = x => x*x;
Такая функция принимает только один аргумент и возводит переданное число в квадрат.
Функция без параметров:
Let func = () => 77;
Если ваша функция содержит в себе несколько строк, то, во-первых, нужно использовать фигурные скобки, а во-вторых, обязательно написать, что функция возвращает, т.е. использовать ключевое слово return .
Let multiply = (x, y) => {
let result = x*y;
return result;
};
Если вам нужно вернуть литерал объекта, то его нужно обернуть в круглые скобки:
Let getObject = () => ({ brand: "BMW" });
Самовызывающаяся функция выглядит следующим образом.
Последнее обновление: 09.04.2018
Стрелочные функции (arrow functions) представляют сокращенную версию обычных функций. Стрелочные функции образуются с помощью знака стрелки (=>), перед которым в скобках идут параметры функции, а после - собственно тело функции. Например:
Let sum = (x, y) => x + y; let a = sum(4, 5); // 9 let b = sum(10, 5); // 15
В данном случае функция (x, y) => x + y осуществляет сложение двух чисел и присваивается переменной sum. Функция принимает два параметра - x и y. Ее тело составляет сложение значений этих параметров. И поскольку после стрелки фактически идет конкретное значение, которое представляет сумму чисел, то функция возвращает это значение. И мы можем через переменную sum вызвать данную функцию и получить ее результат в переменные a и b.
Если после стрелки идет операция или выражение, которое возвращает значение, то это значение фактически возвращается из стрелочной функции. Но также в качестве тела функции может примяться выражение, которое ничего не возвращает и просто выполняет некоторое действие:
Let sum = (x, y) => console.log(x + y); sum(4, 5); // 9 sum(10, 5); // 15
В данном случае функция console.log() ничего не возвращает, и соответственно функция sum также не возвращает никакого результата.
Если функция принимает один параметр, то скобки вокруг него можно опустить:
Var square = n => n * n; console.log(square(5)); // 25 console.log(square(6)); // 36 console.log(square(-7)); // 49
Если тело функции представляет набор выражений, то они облекаются в фигурные скобки:
Var square = n => { let result = n * n; return result; } console.log(square(5)); // 25
Для возвращения результата из функции в таком случае применяется стандартный оператор return .
Особо следует остановиться на случае, когда стрелочная функция возвращает объект:
Let user = (userName, userAge) => ({name: userName, age: userAge}); let tom = user("Tom", 34); let bob = user("Bob", 25); console.log(tom.name, tom.age); // "Tom", 34 console.log(bob.name, bob.age); // "Bob", 25
Объект также определяется с помощью фигурных скобок, но при этом он заключается в круглые скобки.
Если стрелочная функция не принимает никаких параметров, то ставятся пустые скобки:
Var hello = ()=> console.log("Hello World"); hello(); // Hello World hello(); // Hello World
12 ответов
Что это
Это функция стрелки. Функции стрелок - это короткий синтаксис, введенный в ECMAscript 6, который можно использовать аналогично тому, как вы использовали бы выражения функций. Другими словами, вы часто можете использовать их вместо выражений, таких как function (foo) {...} . Но у них есть некоторые важные различия. Например, они не связывают свои собственные значения this (см. Обсуждение ниже).
Функции стрелок являются частью спецификации ECMAscript 6. Они еще не поддерживаются во всех браузерах, но частично или полностью поддерживаются в Node v. 4. 0+ и в большинстве современных браузеров, используемых по состоянию на 2018. (Ниже приведен частичный список поддерживаемых браузеров).
Из документации Mozilla:
Выражение функции со стрелкой (также известное как толстая функция со стрелкой) имеет более короткий синтаксис по сравнению с выражениями функций и лексически связывает значение this (не привязывает свое собственное this , arguments , super или new.target). Функции стрелок всегда анонимны. Эти функциональные выражения лучше всего подходят для функций, не относящихся к методам, и их нельзя использовать в качестве конструкторов.
Замечание о том, как this работает в функциях со стрелками
Одна из наиболее удобных функций функции со стрелкой скрыта в тексте выше:
Функция стрелки... лексически связывает значение this (не привязывает свое собственное this ...)
Проще говоря, это означает, что функция стрелки сохраняет значение this из своего контекста и не имеет своего собственного this . Традиционная функция может привязывать this значение самостоятельно, в зависимости от того, как она определена и вызвана. Это может потребовать много гимнастики, как self = this; и т.д., чтобы получить доступ или манипулировать this из одной функции внутри другой функции. Для получения дополнительной информации по этой теме см. Объяснение и примеры в документации Mozilla .
Пример кода
Пример (также из документов):
Var a = [ "We"re up all night "til the sun", "We"re up all night to get some", "We"re up all night for good fun", "We"re up all night to get lucky" ]; // These two assignments are equivalent: // Old-school: var a2 = a.map(function(s){ return s.length }); // ECMAscript 6 using arrow functions var a3 = a.map(s => s.length); // both a2 and a3 will be equal to
Примечания по совместимости
Вы можете использовать функции стрелок в Node, но поддержка браузера не совсем корректна.
Браузерная поддержка этой функциональности значительно улучшилась, но она все еще недостаточно распространена для большинства применений на основе браузера. По состоянию на 12 декабря 2017 года он поддерживается в текущих версиях:
- Хром (против 45+)
- Firefox (против 22+)
- Край (против 12+)
- Опера (ст. 32+)
- Браузер Android (версия 47+)
- Opera Mobile (версия 33+)
- Chrome для Android (версия 47+)
- Firefox для Android (версия 44+)
- Сафари (версия 1 0+)
- iOS Safari (версия 10. 2+)
- Интернет Samsung (v. 5+)
- Baidu Browser (v. 7. 12+)
Не поддерживается в:
- IE (до ст. 11)
- Opera Mini (до версии 8.0)
- Blackberry Browser (до ст. 10)
- IE Mobile (до версии 11)
- UC Browser для Android (до версии 11.4)
- QQ (до версии 1.2)
Вы можете найти более (и более актуальную) информацию на CanIUse.com (без принадлежности).
Это известно как функция стрелки, часть спецификации ECMAScript 2015 ...
var foo = ["a", "ab", "abc"]; var bar = foo.map(f => f.length); console.log(bar); // 1,2,3
Более короткий синтаксис, чем предыдущий:
// < ES6: var foo = ["a", "ab", "abc"]; var bar = foo.map(function(f) { return f.length; }); console.log(bar); // 1,2,3
Другая удивительная вещь лексическая this ... Обычно, вы делаете что-то вроде:
function Foo() { this.name = name; this.count = 0; this.startCounting(); } Foo.prototype.startCounting = function() { var self = this; setInterval(function() { // this is the Window, not Foo {}, as you might expect console.log(this); // // that why we reassign this to self before setInterval() console.log(self.count); self.count++; }, 1000) } new Foo();
Но это можно переписать с помощью стрелки следующим образом:
function Foo() { this.name = name; this.count = 0; this.startCounting(); } Foo.prototype.startCounting = function() { setInterval(() => { console.log(this); // console.log(this.count); // 1, 2, 3 this.count++; }, 1000) } new Foo();
Это будет "выражение функции стрелки", введенное в ECMAScript 6.
Для исторических целей (если страница wiki изменяется позже), это:
Выражение функции стрелки имеет более короткий синтаксис по сравнению с выражением функции и лексически связывает это значение. Функции стрелок всегда анонимны.
Также известен как Fat Arrow Functions . Это простой и понятный способ написания выражений функций, например, function() {} .
Стрелка Функции могут устранить необходимость function , return и {} при определении функций. Они являются однострочными, похожими на лямбда-выражения в Java или Python.
Пример без параметров
const queue = ["Dave", "Sarah", "Sharon"]; const nextCustomer = () => queue; console.log(nextCustomer()); // "Dave"
Если в одной и той же функции стрелки необходимо сделать несколько операторов, в этом примере необходимо заключить queue в фигурные скобки {} . В этом случае оператор возврата не может быть опущен.
Пример с 1 параметром
const queue = ["Dave", "Sarah", "Sharon"]; const addCustomer = name => { queue.push(name); }; addCustomer("Toby"); console.log(queue); // ["Dave", "Sarah", "Sharon", "Toby"]
Вы можете опустить {} из вышеперечисленного.
Когда есть единственный параметр, скобки () вокруг параметра могут быть опущены.
Пример с несколькими параметрами
const addNumbers = (x, y) => x + y console.log(addNumbers(1, 5)); // 6
Полезный пример
const fruits = [ {name: "Apple", price: 2}, {name: "Bananna", price: 3}, {name: "Pear", price: 1} ];Если бы мы хотели получить цену каждого фрукта в одном массиве, в ES5 мы могли бы сделать:
Fruits.map(function(fruit) { return fruit.price; }); //
В ES6 с новыми функциями стрелок мы можем сделать это более кратким:
Fruits.map(fruit => fruit.price); //
Дополнительную информацию о функциях со стрелками можно найти .
Совместимость браузера
- IE: пока не поддерживается
- Край: 12+ (Все версии)
- Firefox: 22+
- Хром: 45+
- Сафари: 10+
- iOS Safari: 10. 2+
- Браузер Android: 56+
Дополнительную актуальную информацию о совместимости браузера можно найти
Как говорили другие, это новый синтаксис для создания функций.
Однако этот вид функций отличается от обычных:
Они являются неконструкторами.
Это означает, что у них нет внутреннего метода [] и, следовательно, невозможно создать экземпляр, например
Var f = a => a; f(123); // 123 new f(); // TypeError: f is not a constructor
Они связывают значение this . Как объясняется спецификация ,
Функция ArrowFunction не определяет локальные привязки для arguments , super , this или new.target . Любая ссылка на arguments , super , this или new.target в пределах функции ArrowFunction разрешите привязку в лексически окружении. типично это будет функциональная среда сразу же функция.
Даже если ArrowFunction может содержать ссылки на super , функциональный объект, созданный на этапе 4, не превращается в метод посредством выполнение MakeMethod . Функция ArrowFunction, которая ссылается на super всегда содержится внутри функции, не связанной с стрелкой, и необходимой для реализации super доступно через область, которая захваченный функциональным объектом функции ArrowFunction.
Добавление простого примера CRUD со стрелкой
//Arrow Function var customers = [ { name: "Dave", contact:"9192631770" }, { name: "Sarah", contact:"9192631770" }, { name: "Akhil", contact:"9928462656" }], // No Param READ getFirstCustomer = () => { console.log(this); return customers; }; console.log("First Customer "+JSON.stringify(getFirstCustomer())); // "Dave" //1 Param SEARCH getNthCustomer = index=>{ if(index>customers.length) { return "No such thing"; } else{ return customers; } }; console.log("Nth Customer is " +JSON.stringify(getNthCustomer(1))); //2params ADD addCustomer = (name, contact)=> customers.push({ "name": name, "contact":contact }); addCustomer("Hitesh","8888813275"); console.log("Added Customer "+JSON.stringify(customers)); //2 param UPDATE updateCustomerName = (index, newName)=>{customers.name= newName}; updateCustomerName(customers.length-1,"HiteshSahu"); console.log("Updated Customer "+JSON.stringify(customers)); //1 param DELETE removeCustomer = (customerToRemove) => customers.pop(customerToRemove); removeCustomer(getFirstCustomer()); console.log("Removed Customer "+JSON.stringify(customers));
Как и все остальные ответы, это часть синтаксиса функции ES2015. В частности, это не оператор, это токен-токен, который отделяет параметры от тела: ArrowFunction: ArrowParameters => ConciseBody . Например. (params) => { /* body */ } .
В javascript символ => является символом выражения функции стрелки. Выражение функции стрелки не имеет собственное this связывание и, следовательно, не может быть использовано в качестве функции конструктора. например:
var words = "hi from outside object"; let obj = { words: "hi from inside object", talk1: () => {console.log(this.words)}, talk2: function () {console.log(this.words)} } obj.talk1(); // doesn"t have its own this binding, this === window obj.talk2(); // does have its own this binding, this is obj
Правила использования функций стрелок:
- Если есть только один аргумент, вы можете опустить круглые скобки аргумента.
- Если вы вернете выражение и сделаете это в той же строке, вы можете опустить {} и оператор return
Например:
let times2 = val => val * 2; // It is on the same line and returns an expression therefore the {} are ommited and the expression returns implictly // there also is only one argument, therefore the parentheses around the argument are omitted console.log(times2(3));
Недоволен другими ответами. Ответ с наибольшим количеством голосов на 2019/3/13 фактически неверен.
Короткий лаконичный вариант того, что => означает, что ярлык написание функции и для его связывания с током this
Const foo = a => a * 2;
Эффективно ярлык для
Const foo = function(a) { return a * 2; }.bind(this);
Вы можете увидеть все вещи, которые были сокращены. Нам не нужно ни function , ни return ни.bind(this) ни скобок или скобок
Немного более длинный пример функции со стрелкой может быть
Const foo = (width, height) => { const area = width * height; return area; };
Показано, что если нам нужно несколько аргументов функции, нам нужны круглые скобки, а если мы хотим написать больше, чем одно выражение, нам нужны фигурные скобки и явный return .
Важно понимать.bind часть и это большая тема. Это связано с тем, что this значит в JavaScript.
ВСЕ функции имеют неявный параметр с именем this . Как this установить при вызове функции, зависит от того, как эта функция вызывается.
принимать
Function foo() { console.log(this); }
Если вы называете это нормально
Function foo() { console.log(this); } foo();
this будет глобальный объект.
Если вы в строгом режиме
"use strict"; function foo() { console.log(this); } foo(); // or function foo() { "use strict"; console.log(this); } foo();
Будет undefined
Вы можете установить this непосредственно с помощью call или apply
Function foo(msg) { console.log(msg, this); } const obj1 = {abc: 123} const obj2 = {def: 456} foo.call(obj1, "hello"); // prints Hello {abc: 123} foo.apply(obj2, ["hi"]); // prints Hi {def: 456}
Вы также можете установить this неявно, используя оператор точки.
Function foo(msg) { console.log(msg, this); } const obj = { abc: 123, bar: foo, } obj.bar("Hola"); // prints Hola {abc:123, bar: f}
Проблема возникает, когда вы хотите использовать функцию в качестве обратного вызова или слушателя. Вы создаете класс и хотите назначить функцию в качестве обратного вызова, который обращается к экземпляру класса.
Class ShowName { constructor(name, elem) { this.name = name; elem.addEventListener("click", function() { console.log(this.name); // won"t work }); } }
Приведенный выше код не будет работать, потому что когда элемент вызывает событие и вызывает функцию, this значение не будет экземпляром класса.
Одним из распространенных способов решения этой проблемы является использование.bind
Class ShowName { constructor(name, elem) { this.name = name; elem.addEventListener("click", function() { console.log(this.name); }.bind(this); // <=========== ADDED! =========== } }
Поскольку синтаксис стрелки делает то же самое, что мы можем написать
Class ShowName { constructor(name, elem) { this.name = name; elem.addEventListener("click",() => { console.log(this.name); }); } }
bind эффективно делает новую функцию. Если бы bind не существовала, вы могли бы сделать свое собственное так
Function bind(funcitonToBind, valueToUseForThis) { return function(...args) { functionToBind.call(valueToUseForThis, ...args); }; }
В старом JavaScript без оператора распространения это было бы
Function bind(funcitonToBind, valueToUseForThis) { return function() { functionToBind.apply(valueToUseForThis, arguments); }; }
Понимание того, что код требует понимания замыканий, но короткая версия bind создает новую функцию, которая всегда вызывает исходную функцию с привязанным к ней значением this . Функция стрелки делает то же самое, так как они являются ярлыком для bind(this)
Стрелка функции, которая обозначается символом (=>), помогает вам создавать анонимные функции и методы. Это приводит к более короткому синтаксису. Например, ниже приведена простая функция "Добавить", которая возвращает сложение двух чисел.
Function Add(num1 , num2){ return num1 + num2; }
Вышеуказанная функция становится короче с использованием синтаксиса "Стрелка", как показано ниже.
Код выше состоит из двух частей, как показано на рисунке выше:
Ввод: - В этом разделе указываются входные параметры для анонимной функции.
Логика: - Этот раздел идет после символа "=>". Этот раздел имеет логику реальной функции.
Многие разработчики считают, что функция стрелки делает ваш синтаксис короче, проще и, следовательно, делает ваш код читабельным.
Если вы верите в приведенное выше предложение, то позвольте мне заверить вас, что это миф. Если вы на мгновение думаете, что правильно написанная функция с именем гораздо читабельнее, чем загадочные функции, созданные в одну строку с помощью символа стрелки.
Основное использование функции стрелки - убедиться, что код выполняется в контексте вызывающих.
Посмотрите код ниже, в котором определена глобальная переменная "context", эта глобальная переменная доступна внутри функции "SomeOtherMethod", которая вызывается из другого метода "SomeMethod".
Этот SomeMethod имеет локальную переменную context. Теперь, поскольку SomeOtherMethod вызывается из "SomeMethod", мы ожидаем, что он отображает "локальный контекст", но он отображает "глобальный контекст".
Var context = "global context"; function SomeOtherMethod(){ alert(this.context); } function SomeMethod(){ this.context = "local context"; SomeOtherMethod(); } var instance = new SomeMethod();
Но если заменить вызов с помощью функции стрелки, он будет отображать "локальный контекст".
Var context = "global context"; function SomeMethod(){ this.context = "local context"; SomeOtherMethod = () => { alert(this.context); } SomeOtherMethod(); } var instance = new SomeMethod();
Я бы посоветовал вам прочитать эту ссылку (функция Arrow в JavaScript), которая объясняет все сценарии контекста javascript и в каких случаях контекст вызывающего не соблюдается.
Вы также можете увидеть демонстрацию функции Arrow с javascript в этом видео на YouTube, которое демонстрирует практически термин Context.
Они стали очень модными, мы видим их во всех новых статьях. И, если вы не привыкли к ним, вам будет трудно понимать современный (на ES6) код, содержащий стрелочные функции.
Данная статья не направлена на то, чтобы сказать, когда и как их использовать. Я только попытаюсь объяснить новый синтаксис для тех, кто видит его в первый раз. Будете вы его использовать или нет, - не важно, но рано или поздно вы все равно столкнетесь с ним где-нибудь. Так что лучше понимать механику этого нового синтаксиса.
Вот небольшой пример:
Const addOne = function(n) { return n + 1; }
Приведенный выше код можно записать так:
Const addOne = (n) => { return n + 1; }
Или, в данном случае, еще короче:
Const addOne = (n) => n + 1;
Второй пример использует { ... } фигурные скобки, но, поскольку, в нем всего одна строка кода, фигурные скобки могут быть опущены и возврат подразумевается сам собой, как видно из третьего примера.
Один параметр
Когда стрелочная функция имеет один параметр, скобки можно опустить:
// Было: someCallBack((results) => { ... }) // Стало: someCallBack(results => { ... })
Но, если нет никаких параметров, вы должны использовать открывающую и закрывающую скобки:
SomeCallBack(() => { ... })
Функции обратного вызова
Стрелки функции особенно полезны для обратных вызовов. Те, кто знаком с JavaScript, знакомы с его лексической областью видимости, которая довольно хороша, но может проделывать такие трюки как этот (this ):
Var _this = this; someCallBack(function() { _this.accessOuterScope(); })
Существует несколько вариаций этого «_this» (например, «self» или «that»), но идея та же. В функциях обратного вызова нам нужен доступ к версии внешней области видимости, но идея та же. В функциях обратного вызова нам нужен доступ к версии внешней области видимости this , которая теперь отличается от предыдущей, поскольку мы говорим о функции обратного вызова.
С помощью стрелочных функций , мы получаем "block scope" (блочную область видимости) и «this», которые являются одним и тем же «this» в обоих случаях. Это означает, что код сверху можно переписать без _this = this:
SomeCallBack(() => { this.accessOuterScope(); })
"Обертка"
Давайте представим ситуацию, как в React, где событие onClick должно вызывать doSomething() , (), но также должно передавать аргументы в doSomething() (например ID). Этот пример на самом деле не работает:
Код запустится, но технически он будет вызывать doSomething() сразу же при загрузке страницы. Чтобы решить эту проблему, некоторые разработчики ссылаются на функцию-обертку:
Const User = React.createClass(function() { render: function() { return
Отсутствие круглой скобки в this.onClick означает, что это просто отсылка к функции, а не вызов ее.
Функция onClick() теперь является чем-то вроде «обертки» для doSomething() . Со стрелочными функциями можно делать «обертки» такого типа:
Const User = React.createClass(function() { render: function() { return
Как альтернативу, - мы могли бы также использовать.bind() , который не требует никаких оберток (стрелочных функций и прочего):
Const User = React.createClass(function() { render: function() { return
Браузерная поддрержка стрелочных функций
Если вам нужна поддержка браузеров помимо последних версий Chrome и Firefox , воспользуйтесь Babel транспайлер , чтобы конвертировать написанный вами ES6-код в ES5.
