Выбор читателей
Популярные статьи
Последнее обновление: 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
Они стали очень модными, мы видим их во всех новых статьях. И, если вы не привыкли к ним, вам будет трудно понимать современный (на 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.
“Толстые” стрелочные функции (=>), так же известные, как arrow функции – абсолютно новая функциональность в ECMAScript 2015 (ранее известном под именем ES6). Если верить слухам, то в ECMAScript 2015 => синтаксис стал использоваться вместо –> синтаксиса под влиянием CoffeeScript . Так же, не последнюю роль сыграла похожесть передачи контекста this.
У стрелочных функций есть две главные задачи: обеспечить более лаконичный синтаксис; обеспечить передачу лексического this с родительским scope. Давайте детально рассмотрим каждую из них!
Есть, однако, один существенный минус: убрав {} из стрелочных функций, как мы можем возвратить пустой объект? Например, тот же {}?
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
() => ({}) // {}
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.
Two factors influenced the introduction of arrow functions: the need for shorter functions and the behavior of the this keyword.
Before arrow functions, every new function defined its own this value based on how the function was called:
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" } });
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
Arrow functions do not have a prototype property.
Var Foo = () => {}; console.log(Foo.prototype); // undefined
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.
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
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 });
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
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
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 |
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 | Chrome Full support 45 | Edge Full support Yes | Firefox
Full support
22 Notes Full support 22Notes 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 22Notes 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 |
Trailing comma in parameters | 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 |
Всем привет! В этой статье мы рассмотрим, что такое стрелочные функции в 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" });
Самовызывающаяся функция выглядит следующим образом.
Статьи по теме: | |
Установка счетчика Liveinternet
Для начала смотрим в нижнюю часть в раздел «На линии» и видим цифры 12 и... Как сделать название вашего youtube канала запоминающимся
Определите качества удачного названия. В названиях YouTube-каналов... Чем открыть PSD файл: просмотр, редактирование и конвертирование
Файл с расширение PSD является документам Adobe Photoshop, это файл с... |