Frontender Magazine

Стрелочные функции и bind()

Cтрелочные функции в ES6 довольно часто рассматривают как альтернативу Function.prototype.bind().

1. Извлечение методов

Если извлечённый метод используется как коллбек, вы должны определить this, в противном случае он будет вызван как функция (и this будет undefined или указывать на глобальную область видимости). Например:

obj.on('anEvent', console.log.bind(console))

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

obj.on('anEvent', x => console.log(x))

2. Передача this в качестве параметра

Следующий код демонстрирует хитрый трюк: в некоторых методах не нужно использовать bind() передавая их в качестве коллбека, его можно задать в качестве дополнительного параметра. Один из таких методов — filter():

const as = new Set([1, 2, 3]);
const bs = new Set([3, 2, 4]);
const intersection = [...as].filter(bs.has, bs);
// [2, 3]

Однако, этот код становится легче понять, если использовать стрелочную функцию:

const as = new Set([1, 2, 3]);
const bs = new Set([3, 2, 4]);
const intersection = [...as].filter(a => bs.has(a));
// [2, 3]

3. Частичные вычисления

bind() позволяет производить частичные вычисления, можно создавать новые функции, определяя параметры исходной:

function add(x, y) {
    return x + y;
}
const plus1 = add.bind(undefined, 1);

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

const plus1 = y => add(1, y);

4. Ссылки для дальнейшего изучения

Если вы заметили ошибку, вы всегда можете отредактировать статью, создать issue или просто написать об этом Антону Немцеву в skype ravencry.

Axel Rauschmayer
Автор:
Axel Rauschmayer
GitHub:
rauschma
Twitter:
@rauschma
Сaйт:
http://rauschma.de/
Email:
axel@rauschma.de
Антон Немцев
Переводчик:
Антон Немцев
Сaйт:
http://frontender.info/
Twitter:
@silentimp
GitHub:
SilentImp
Skype:
ravencry

Комментарии (6 комментариев, если быть точным)

Автар пользователя
virtyaluk

В современных браузерах контекст функции console.log привязан к объекту console. По-этому, смысл стрелочной функции быстро теряется, когда можно написать следующее obj.on('anEvent', console.log). И так в большинстве всех случаев применения arrow function.

Иногда я вижу, как авторы таких статей специально пишут не оптимизированный код только ради демонстрации новых наворотов. Это тупо.

Автар пользователя
iamstarkov

@virtyaluk только в Chrome и NodeJS методы console к нему прибиндены

Автар пользователя
iamstarkov

плюс к этому console.log здесь только как частный пример

Автар пользователя
virtyaluk

@iamstarkov, вы уверены? Я только что, по быстрому, проверил в IE11 и Edge, и console.log привязан к объекту console. Оперу не трогаю т.к. Chrome проверял. Уверен, что в FF тоже все ок. Вы бы сначала сами проверили.

здесь только как частный пример

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

Пока что только в книжках Кайла Симсона и Николаса Закаса я видел реальные примеры топика, а так то:

авторы таких статей специально пишут не оптимизированный код только ради демонстрации новых наворотов. Это тупо.

P.S.: не воспринимайте это, как претензию к авторскому коллективу @FrontenderMagazine. Это всего-лишь примечание к некомпетентности автора оригинальной статьи.

Автар пользователя
iamstarkov

@virtyaluk я и проверил; хром, файрфокс и сафари — только в хроме прибиндено

Автар пользователя
virtyaluk

@iamstarkov, да, в FF не работает.

В IE11+ все путем. untitled