В чем разница между стрелочной и обычной функциями?

Разница между стрелочной и обычной функциями в JavaScript

В JavaScript существуют две основные формы объявления функций: обычные (function declarations / function expressions) и стрелочные функции (arrow functions), появившиеся в ES6. Их различия затрагивают синтаксис, поведение и область применения, что особенно важно для разработки и автоматизации тестирования.

Синтаксис и краткость

Обычная функция может быть объявлена несколькими способами:

// Function Declaration
function regularFunc(a, b) {
    return a + b;
}

// Function Expression
const regularFunc = function(a, b) {
    return a + b;
};

Стрелочная функция предлагает более компактный синтаксис, особенно для простых операций:

const arrowFunc = (a, b) => a + b;

Для многострочных функций тело оборачивается в curly braces {}.

const arrowFunc = (a, b) => {
    const sum = a + b;
    return sum;
};

Ключевые различия в поведении

1. Контекст выполнения (this):

   • В обычной функции значение this динамически определяется в момент вызова. Внутри метода объекта оно ссылается на сам объект, в глобальном контексте — на window (или undefined в strict mode).

   const obj = {
       value: 10,
       regularMethod: function() {
           console.log(this.value); // 10
       }
   };
   

   • Стрелочная функция не имеет собственного this. Она "захватывает" (lexically binds) значение this из окружающей лексической области (где была объявлена). Это делает ее идеальной для использования внутри колбэков, где нужно сохранить контекст.

   const obj = {
       value: 10,
       arrowMethod: () => {
           console.log(this.value); // undefined (this берется из внешнего scope)
       }
   };
   

2. Объект arguments:

   • Обычная функция имеет доступ к специальному массиву arguments, содержащему все переданные параметры.

   function regular(a) {
       console.log(arguments[0], arguments[1]); // 1, 2
   }
   regular(1, 2);
   

   • Стрелочная функция не имеет своего arguments. Для получения всех аргументов можно использовать rest parameters.

   const arrow = (...args) => {
       console.log(args[0], args[1]); // 1, 2
   };
   arrow(1, 2);
   

3. Возможность использования как конструктор:

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

   function Person(name) { this.name = name; }
   const john = new Person('John');
   

   • Стрелочные функции не могут быть конструкторами. Вызов с new приведет к ошибке.

   const ArrowPerson = (name) => { this.name = name; };
   // const john = new ArrowPerson('John'); // TypeError: ArrowPerson is not a constructor
   

4. Присутствие в прототипе свойства prototype:

   • Обычные функции имеют свойство prototype, используемое при создании объектов через new.
   • Стрелочные функции не имеют prototype.

5. Использование yield в генераторах:

   • Для создания генераторов можно использовать только обычные функции с синтаксисом function*.
   • Стрелочные функции не могут быть генераторами.

Практическое применение в автоматизации тестирования

В контексте QA Automation, особенно при написании тестов на JavaScript/TypeScript (например, с Playwright, WebDriverIO, Cypress):

• Стрелочные функции часто используются для коротких колбэков, промисов и методов в классах, где требуется сохранение лексического this. Например, в асинхронных операциях:

// Playwright пример
test('login test', async ({ page }) => {
    await page.click('button'); // стрелочная функция не меняет контекст
    // ...
});

• Обычные функции предпочтительны, когда нужен динамический this (например, в методах классов PageObject), доступ к arguments, или при создании конструкторов для сложных тестовых объектов.

Вывод

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