Sobes.tech
Junior

Каква е разликата между стрелковите функции и обикновените функции в JavaScript?

sobes.tech AI

Отговор от AI

  1. Синтаксис:
    • Обикновена функция: function myFunction() { ... }
    • Стрелкова функция: () => { ... } или param => { ... }
  2. Контекст this:
    • Обикновена функция: this се определя от контекста на извикване.
    • Стрелкова функция: this наследява лексикално от околната среда (няма собствен this).
  3. Конструктори:
    • Обикновена функция: Може да се използва като конструктор (new myFunction()).
    • Стрелкова функция: Не може да се използва като конструктор.
  4. Обект arguments:
    • Обикновена функция: Има собствен обект arguments.
    • Стрелкова функция: Няма собствен arguments, достъпът е чрез rest параметри (...args).
  5. Именовани функции:
    • Обикновена функция: Може да бъде именована (function myFunction() { ... }).
    • Стрелкова функция: По подразбиране е анонимна, присвоява се на променлива (const myFunction = () => { ... }).
  6. Неявен връщане:
    • Обикновена функция: Изисква явно return за връщане на стойност.
    • Стрелкова функция: При еднолинейно тяло може неявно да връща резултата от израза.

Таблица за сравнение:

Характеристика Обикновена функция Стрелкова функция
Синтаксис function name() { ... } () => { ... }
Контекст this Динамичен (контекст на извикване) Лексикален (от родителската среда)
Конструктор Да Не
Обект arguments Да Не (използва rest параметри)
Именуване Може да бъде именована Анонимна (присвоява се)
Неявен връщане Не (обикновено изисква return) Да (за еднолинейно тяло)
// Примери за обикновени функции
function standardFunction() {
  console.log(this); // Зависи от контекста на извикване
  console.log(arguments); // Обектът arguments е наличен
}

const obj = {
  method: standardFunction
};

standardFunction(); // this ще бъде window или undefined
obj.method(); // this ще бъде obj
new standardFunction(); // this ще бъде нов обект

// Примери за стрелкови функции
const arrowFunction = () => {
  console.log(this); // Наследява от околната среда
  // console.log(arguments); // Грешка, arguments не е наличен
};

const outerObj = {
  outerMethod: function() {
    const innerArrowFunction = () => {
      console.log(this); // наследява от outerMethod (outerObj)
    };
    innerArrowFunction();
  }
};

arrowFunction(); // this ще бъде window или {} (в Node.js)
outerObj.outerMethod(); // this вътре в innerArrowFunction ще бъде outerObj

// Неявен връщане в стрелкова функция
const sum = (a, b) => a + b;
console.log(sum(2, 3)); // 5

// Обикновена функция с явно връщане
function multiply(a, b) {
  return a * b;
}
console.log(multiply(2, 3)); // 6

// Стрелкова функция не може да бъде конструктор
// new arrowFunction(); // Грешка: TypeError