Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

1 Стрелочные функции отличаются от обычных не только способом записи. Главное их отличие проявляется в том, как они работают с контекстом. Вкратце: контекст обычных функций зависит от места вызова, а контекст стрелочных функций - от того места, где они были определены.

2 Рассмотрим несколько примеров. Самый простой случай - определение функции на уровне модуля. Здесь контекстом вызова будет сам модуль.

3 Примечание: примеры ниже приведены для Node.js. В браузере this по умолчанию будет содержать глобальный объект Window.

4 Здесь поведение функций не отличается, так как контекстом вызова у обеих функций является сам модуль, а в es6 this у модулей не определен. Теперь попробуем добавить эти функции в объект:

5 Обычная функция ожидаемо связалась с контекстом того объекта, на котором она вызвана. А вот в случае стрелочной функции такого не произошло. Почему? Стрелочная функция не имеет своего контекста, она связывается с лексическим окружением, то есть функцией, внутри которой определена стрелочная функция. Это очень важный момент. Именно функция верхнего уровня задаёт контекст стрелочной функции, а не что-то другое. И это поведение нельзя изменить с помощью функций call или bind.

6 Теперь определим стрелочную функцию внутри какого-нибудь объекта и попробуем вызвать:

7 Здесь мы видим точно такую же картину. Несмотря на то, что стрелочная функция описывается внутри объекта и вызывается из этого же объекта, контекст все равно связан с местом определения функции (лексическим окружением) - а это сам модуль.

8 Теперь попробуем определить стрелочную функцию внутри другой функции:

9 Кажется, что у стрелочной функции появился this, но этот контекст не принадлежит функции, она заимствовала его у внешней функции print. Чтобы лучше это понять, представьте, как вызывается стрелочная функция внутри forEach. Она вызывается напрямую, а не из объекта. Обычные функции в такой ситуации создают свой собственный контекст, а стрелочные нет. Они берут контекст из того места, где были определены. Стрелочная функция определена в функции print, поэтому берёт контекст функции print.

10 Точно такой же код с обычной функцией уже не заработает:

11 Это происходит именно потому, что функция вызывается как обычная функция, а не метод. В таком случае ее контекст будет равен глобальному контексту. Обычно этот контекст равен undefined, а значит this.items вызовет ошибку.

12 Где все это может понадобиться? В подавляющем большинстве ситуаций нам вообще не нужен this внутри стрелочной функции. Всегда лучше работать с данными, переданными явно. Однако есть несколько примеров, где эта особенность стрелочных функций помогает упростить код. К таким примерам относятся ситуации, где внутри метода объекта вызывается функция высшего порядка, куда передается стрелочная функция, работающая с this. Эта ситуация аналогичная коду выше.