Sobes.tech
Junior

Koja je razlika između funkcija sa strelicama i običnih funkcija u JavaScriptu?

sobes.tech АИ

Одговор од АИ

  1. Синтакса:
    • Обична функција: function myFunction() { ... }
    • Стрелачка функција: () => { ... } или param => { ... }
  2. Контекст this:
    • Обична функција: this је одређен контекстом позива.
    • Стрелачка функција: this се лексикално наследи из окружења (нема свој this).
  3. Конструктори:
    • Обична функција: Може се користити као конструктор (new myFunction()).
    • Стрелачка функција: Не може се користити као конструктор.
  4. Објекат arguments:
    • Обична функција: Има свој arguments објекат.
    • Стрелачка функција: Нема свој arguments, приступ је преко rest параметара (...args).
  5. Именоване функције:
    • Обична функција: Може бити именована (function myFunction() { ... }).
    • Стрелачка функција: По подразумевану је анонимна, додељује се променљивој (const myFunction = () => { ... }).
  6. Нејасни повратак (implicit return):
    • Обична функција: Је потребан експлицитни 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