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

Всем привет! В этой статье мы рассмотрим, что такое стрелочные функции в 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" });

Самовызывающаяся функция выглядит следующим образом.

В ES6 есть новый способ создания функций - С помощью оператора Стрелка => . Такие функции называются стрелочные. Они предлагают более компактный синтаксис. Они не имеют имени и они по-своему работают с this .

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

Откроем папку проекта в командной строке (КС). Вводим команду:

И нажать Enter

В папке src создадим файл arr.js и сразу укажу его в файле index.html

</script>

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

Давайте напишем функцию, которая складывает два числа и возвращает их сумму. Назовем функцию add .

Function add (x, y) { return x + y; } console.log (add (3, 6));

В консоли мы увидим результат - 9

Теперь, давайте переведем эту функцию стрелочную.

Уберем слово function , уберем имя функции и уберем фигурные скобки, и слово - return . После параметров поставим стрелку.

Let add = (x, y) => x + y; console.log (add (4, 6));

Если посмтреть на тип переменной add используя оператор typeof:

Console.log(typeof(add));

То мы увидим в консоли function

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

"use strict"; var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; var add = function add(x, y) { return x + y; }; console.log(add(4, 6)); console.log(typeof add === "undefined" ? "undefined" : _typeof(add));

Мы видим, что Babel превратил наш код в простое выражение функцией.

Давайте напишем простую функцию которая будет возводить заданное число в квадрат.

Let add = (x, y) => x + y; console.log (add (4, 6)); console.log(typeof(add)); let square = function(a) { return a * a; } console.log(square (4));

Посмотрим в консоли:

Стрелочная функция будет выглядеть вот так:

Let square = x => x * x;

Если стрелочная функция принимает только один параметр, то нет необходимости заключать его в скобки!

Давайте напишем функцию которая вообще не принимает параметров.

Function givNumer () { return 33; } console.log(givNumer ());

Эта функция просто выводит в консоль число 33. Стрелочная:

Let givNumer = () => 33; console.log(givNumer ());

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

Let log = function () { console.log("Hello World!"); }; log();

Стрелочная:

Let log = () => console.log("Hello World!!!"); log();

Создадим функцию тело которой будет состоять из двух строк.

Функция будет принимать два параметра. Теле функции создадим переменную. После этого вернём результат.

Let mult = function (a, b) { let result = a * b; return result; } console.log(mult (4, 5));

Если в стрелочной функции несколько строк, то фигурные скобки - {} обязательны! И обязательно определить то, что возвращает эта функция, используя ключевое слово return

Стрелочная:

Let mult = (a, b) => { let result = a * b; return result; } console.log(mult (4, 5));

Теперь создадим функцию, которая возвращает литерал объекта:

Let literal = function () { return { name: "John"}; } console.log (literal ());

В консоли мы увидим:

Теперь попробуем создать стрелочную функцию, которая будет возвращать литерал объекта.

Следует помнить, что если стрелочная функция возвращает литерал объекта, то нужны круглые скобки - ()

Стрелочная функция возвращающая литерал объекта:

Let literal = () => ({ name: "John"}); console.log (literal ());

Теперь попробуем использовать стрелочную функцию в качестве IIFE - Immediately-invoked function expression

Если сказать коротко, то это функция, которая выполняется сразу после объявления

Это выглядит вот так:

(function () { console.log("IIFE"); })();

Стрелочная IIFE - функция будет выглядеть вот так:

(() => console.log("IIFE"))();

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

Её нельзя просто так взять и спустить на строку ниже. Выдаст ошибку!

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

Давайте создадим массив с некоторыми числами и назовем его numbers . Я думаю что вы знаете, что у массивов есть полезные методы, которые позволяют это массив перебирать, фильтровать и т.д.

Давайте вы считаем сумму всех переменных массива. Для этого я объявлю еще одну переменную - let sum = 0;

Воспользуемся методом forEach() который есть у каждого массива, мы переберем элементы и прибавим к сумме.

Let numbers = ; let sum = 0; numbers.forEach(function(num) { sum += num; }); console.log (sum);

В консоли мы увидим 55 . Давайте превратим эту функцию в стрелочную: numbers.forEach(num => sum += num); console.log(sum);

Таким образом, то что у нас ранее занимало три строки, теперь занимает одну.

Также мы можем возвести в квадрат каждый элемент массива.

Let squared = numbers.map(n => n * n); console.log (squared);

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

У объекта person будет свойство name со значением ‘Bob’ и свойства greet - поприветствовать.В консоль выведем приветствие также посмотрим назначение this .

Let person = { name: "Bob", greet: function () { console.log("Hello! My name is " + this.name); console.log(this); } }; person.greet();

В консоли браузера мы увидим приветствие и сам объект person .

Теперь мы заменим функцию на стрелочную и посмотрим, что произойдет с this .

Let person = { name: "Bob", greet: () => { console.log("Hello! My name is " + this.name); console.log(this); } }; person.greet();

Теперь мы не получили значение имени и в качестве значения this - window !

Но почему? Дело в том, что значение this берется из контекста в котором функция объявлена. ! Независимо от того, где эта функция будет выполнена. Это можно увидеть на картинке:

У нас есть программа.

В ней пока что кроме объекта window ничего нет. Добавили объект person. Заметьте, что у метода мы используем стрелочную функцию. Как мы и говорили - значение this будет браться из контекста. Контекст это окружение. В данном случае окружением объекта person , всех его свойств и методов, будет являться объект window . И если значение this будет браться из контекста, то this будет ссылаться на объект window .

Если мы рассмотрим обычную функцию, то мы знаем, что this ссылается на сам объект person . Вы можете спросить, почему значение this в стрелочных функциях берется из контекста? А ответ очень простой - их так сделали! :-) Дело в том, что стрелочные функции были созданы для решения проблем в другой ситуации. Давайте посмотрим на примере. Для того, чтобы увидеть проблему мы вернемся к нашей стрелочной функции.

Let person = { name: "Bob", greet: function () { console.log("Hello! My name is " + this.name); console.log(this); } };

Представим, что наш Bob достаточно занятой и ему нужно пара секунд, чтобы завершить свою работу. Ожидание в 2 сек. мы симулируем с помощью функции setTimeout(); .В качестве первого параметра эта функция принимает функцию и вторым параметром - количество миллисекунд, которые необходимо подождать.

Let person = { name: "Bob", greet: function () { setTimeout(function () { console.log("Hello! My name is " + this.name); console.log(this); }, 2000); } }; person.greet();

Если у вас есть опыт работы с JavaScript, то я думаю, что вы понимаете в чем заключается проблема. Все равно, давайте посмотрим на то, что будет в браузере. Ровно две секунды спустя мы увидим в браузере такую картину.

Но почему? Если посмотреть наш код, то логично предположить. что this ссылается на объект person , так как мы используем обычную функцию. Дело в том, что setTimeout() принадлежит объекту window . Если написать так: window.setTimeout() , то как вы думаете на что ссылается thus ? И в консоли мы получим тот же самый результат! В ES5 есть несколько способов решить эту проблему. Мы рассмотрим самый распространенный: Перед setTimeout() я объявлю еще одну переменную that и в качестве значения присвоим this . И теперь, в теле функции вместо this мы укажем that .

Let person = { name: "Bob", greet: function () { let that = this; setTimeout(function () { console.log("Hello! My name is " + that.name); console.log(that); }, 2000); } }; person.greet();

Теперь благодаря замыканию Функция которую мы отправляем в setTimeout() будет иметь доступ к переменной that , значением которой будет this , то есть, в данном случае, объект person .

Можно для наглядности посмотреть на то, что ссылаются наши that и this .

Let person = { name: "Bob", greet: function () { let that = this; setTimeout(function () { console.log("Hello! My name is " + that.name); console.log("It is my That = " + that); console.log("It is my This = " + this); }, 2000); } }; person.greet();

В консоли мы увидим подтверждение:

Мы видим, что this будет объектом окна - This = , а that будет объектом нашего person - That = .

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

Let person = { name: "Bob", greet: function () { setTimeout(() => { console.log("Hello! My name is " + this.name); console.log("It is my This = " + this); }, 2000); } }; person.greet();

В результате мы в консоли увидим:

В графическом примере для стрелочной функции контекстом будет служить объект person , а не объект window . именно поэтому this будет ссылаться на person .

Помимо компактного синтаксиса, стрелочные функции были введены для решения таких вот проблем.

В качестве ознакомления, вы можете посмотреть как решил это Babel

Var person = { name: "Bob", greet: function greet() { var _this = this; setTimeout(function () { console.log("Hello! My name is " + _this.name); console.log("It is my This = " + _this); }, 2000); } }; person.greet(); Babel использовал тот же самый метод, что и мы в ES5. Вся разница в том, что мы называли переменную that , а Babel назвал - _this . Благодаря замыканию, функция которую мы отправляем в setTimeout , будет иметь доступ к переменной _this и как следствие - к объекту person .

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

Еще некоторые особенности стрелочных функций:
Еще информацию по ES6 и стрелочным функциям вы можете посмотреть в моем посте

An arrow function expression is a syntactically compact alternative to a regular function expression , although without its own bindings to the this , arguments , super , or new.target keywords. Arrow function expressions are ill suited as methods, and they cannot be used as constructors.

Syntax Basic syntax (param1, param2, …, paramN) => { statements } (param1, param2, …, paramN) => expression // equivalent to: => { return expression; } // Parentheses are optional when there"s only one parameter name: (singleParam) => { statements } singleParam => { statements } // The parameter list for a function with no parameters should be written with a pair of parentheses. () => { statements } Advanced syntax // Parenthesize the body of a function to return an object literal expression: params => ({foo: bar}) // Rest parameters and default parameters are supported (param1, param2, ...rest) => { statements } (param1 = defaultValue1, param2, …, paramN = defaultValueN) => { statements } // Destructuring within the parameter list is also supported var f = ( = , {x: c} = {x: a + b}) => a + b + c; f(); // 6 Description

Two factors influenced the introduction of arrow functions: the need for shorter functions and the behavior of the this keyword.

Shorter functions var elements = [ "Hydrogen", "Helium", "Lithium", "Beryllium" ]; // This statement returns the array: elements.map (function(element) { return element.length; }); // The regular function above can be written as the arrow function below elements.map((element) => { return element.length; }); // // When there is only one parameter, we can remove the surrounding parentheses elements.map (element => { return element.length; }); // // When the only statement in an arrow function is `return`, we can remove `return` and remove // the surrounding curly brackets elements.map(element => element.length); // // In this case, because we only need the length property, we can use destructuring parameter: // Notice that the `length` corresponds to the property we want to get whereas the // obviously non-special `lengthFooBArX` is just the name of a variable which can be changed // to any valid variable name you want elements.map (({ length:lengthFooBArX }) => lengthFooBArX); // // This destructuring parameter assignment can also be written as seen below. However, note that in // this example we are not assigning `length` value to the made up property. Instead, the literal name // itself of the variable `length` is used as the property we want to retrieve from the object. elements.map (({ length }) => length); // No separate this

Before arrow functions, every new function defined its own this value based on how the function was called:

A new object in the case of a constructor.
undefined in strict mode function calls.
The base object if the function was called as an "object method".

This proved to be less than ideal with an object-oriented style of programming.

Function Person() { // The Person() constructor defines `this` as an instance of itself. this.age = 0; setInterval(function growUp() { // In non-strict mode, the growUp() function defines `this` // as the global object (because it"s where growUp() is executed.), // which is different from the `this` // defined by the Person() constructor. this.age++; }, 1000); } var p = new Person();

In ECMAScript 3/5, the this issue was fixable by assigning the value in this to a variable that could be closed over.

Function Person() { var that = this; that.age = 0; setInterval(function growUp() { // The callback refers to the `that` variable of which // the value is the expected object. that.age++; }, 1000); } "use strict"; var obj = { a: 10 }; Object.defineProperty(obj, "b", { get: () => { console.log(this.a, typeof this.a, this); // undefined "undefined" Window {...} (or the global object) return this.a + 10; // represents global object "Window", therefore "this.a" returns "undefined" } });

Use of the new operator

Arrow functions cannot be used as constructors and will throw an error when used with new .

Var Foo = () => {}; var foo = new Foo(); // TypeError: Foo is not a constructor

Use of prototype property

Arrow functions do not have a prototype property.

Var Foo = () => {}; console.log(Foo.prototype); // undefined

Use of the yield keyword

The yield keyword may not be used in an arrow function"s body (except when permitted within functions further nested within it). As a consequence, arrow functions cannot be used as generators.

Function body

Arrow functions can have either a "concise body" or the usual "block body".

In a concise body, only an expression is specified, which becomes the implicit return value. In a block body, you must use an explicit return statement.

Var func = x => x * x; // concise body syntax, implied "return" var func = (x, y) => { return x + y; }; // with block body, explicit "return" needed

Returning object literals

Keep in mind that returning object literals using the concise body syntax params => {object:literal} will not work as expected.

Var func = () => { foo: 1 }; // Calling func() returns undefined! var func = () => { foo: function() {} }; // SyntaxError: function statement requires a name

This is because the code inside braces ({}) is parsed as a sequence of statements (i.e. foo is treated like a label, not a key in an object literal).

You must wrap the object literal in parentheses:

Var func = () => ({ foo: 1 });

Line breaks

An arrow function cannot contain a line break between its parameters and its arrow.

Var func = (a, b, c) => 1; // SyntaxError: expected expression, got "=>"

However, this can be amended by putting the line break after the arrow or using parentheses/braces as seen below to ensure that the code stays pretty and fluffy. You can also put line breaks between arguments.

Var func = (a, b, c) => 1; var func = (a, b, c) => (1); var func = (a, b, c) => { return 1 }; var func = (a, b, c) => 1; // no SyntaxError thrown

Parsing order

Although the arrow in an arrow function is not an operator, arrow functions have special parsing rules that interact differently with operator precedence compared to regular functions.

Let callback; callback = callback || function() {}; // ok callback = callback || () => {}; // SyntaxError: invalid arrow-function arguments callback = callback || (() => {}); // ok

More examples // An empty arrow function returns undefined let empty = () => {}; (() => "foobar")(); // Returns "foobar" // (this is an Immediately Invoked Function Expression) var simple = a => a > 15 ? 15: a; simple(16); // 15 simple(10); // 10 let max = (a, b) => a > b ? a: b; // Easy array filtering, mapping, ... var arr = ; var sum = arr.reduce((a, b) => a + b); // 66 var even = arr.filter(v => v % 2 == 0); // var double = arr.map(v => v * 2); // // More concise promise chains promise.then(a => { // ... }).then(b => { // ... }); // Parameterless arrow functions that are visually easier to parse setTimeout(() => { console.log("I happen sooner"); setTimeout(() => { // deeper code console.log("I happen later"); }, 1); }, 1); Specifications Specification Status Comment

ECMAScript 2015 (6th Edition, ECMA-262)	Standard	Initial definition.
ECMAScript Latest Draft (ECMA-262) The definition of "Arrow Function Definitions" in that specification.	Draft

Browser compatibility

The compatibility table on this page is generated from structured data. If you"d like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub

Desktop Mobile Server Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet Node.js Arrow functions Trailing comma in parameters

Chrome Full support 45

Edge Full support Yes

Firefox Full support 22

Notes

Full support 22

Notes

Notes Prior to Firefox 39, a line terminator (\n) was incorrectly allowed after arrow function arguments. This has been fixed to conform to the ES2015 specification and code like () \n =>

IE No support No

Opera Full support 32

Safari Full support 10

WebView Android Full support 45

Chrome Android Full support 45

Firefox Android Full support 22

Notes

Full support 22

Notes

Notes The initial implementation of arrow functions in Firefox made them automatically strict. This has been changed as of Firefox 24. The use of "use strict"; is now required. Notes Prior to Firefox 39, a line terminator (\n) was incorrectly allowed after arrow function arguments. This has been fixed to conform to the ES2015 specification and code like () \n => {} will now throw a SyntaxError in this and later versions.

Opera Android Full support 32

Safari iOS Full support 10

Samsung Internet Android Full support 5.0

nodejs Full support Yes

Chrome Full support 58

Edge ?

Firefox Full support 52

IE No support No

Opera Full support 45

Safari ?

WebView Android Full support 58

Chrome Android Full support 58

Firefox Android Full support 52

Opera Android Full support 43

Safari iOS ?

Samsung Internet Android Full support 7.0

nodejs Full support Yes

Legend Full support Full support No support No support Compatibility unknown Compatibility unknown See implementation notes. See implementation notes.

Перевод

“Толстые” стрелочные функции (=>), так же известные, как 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 уже сегодня? Использование транспайлеров стало нормой в последние несколько лет. Ни простые разработчики, ни крупные компании не стесняются их применять.

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 ... Обычно, вы делаете что-то вроде:

Но это можно переписать с помощью стрелки следующим образом:

Это будет "выражение функции стрелки", введенное в 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+

Дополнительную актуальную информацию о совместимости браузера можно найти

Как говорили другие, это новый синтаксис для создания функций.

Однако этот вид функций отличается от обычных:

Они связывают значение this . Как объясняется спецификация ,

Функция ArrowFunction не определяет локальные привязки для arguments , super , this или new.target . Любая ссылка на arguments , super , this или new.target в пределах функции ArrowFunction разрешите привязку в лексически окружении. типично это будет функциональная среда сразу же функция.

Даже если ArrowFunction может содержать ссылки на super , функциональный объект, созданный на этапе 4, не превращается в метод посредством выполнение MakeMethod . Функция ArrowFunction, которая ссылается на super всегда содержится внутри функции, не связанной с стрелкой, и необходимой для реализации super доступно через область, которая захваченный функциональным объектом функции ArrowFunction.

Они являются неконструкторами.

Это означает, что у них нет внутреннего метода [] и, следовательно, невозможно создать экземпляр, например
Var f = a => a; f(123); // 123 new f(); // TypeError: f is not a constructor

Добавление простого примера 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 связывание и, следовательно, не может быть использовано в качестве функции конструктора. например:

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

Если есть только один аргумент, вы можете опустить круглые скобки аргумента.
Если вы вернете выражение и сделаете это в той же строке, вы можете опустить {} и оператор 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); // { 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. Стрелочные функции в javascript

Еще по теме статьи: