Понимание Javascript Обычная функция VS Стрелочная функция

Иногда в нашем коде мы используем регулярные функции javascript, а также функцию под названием arrow function. Обе функции являются функциями, но между ними есть определенные различия.

1. Сначала мы рассмотрим синтаксическую разницу между ними.

//normal function
function normalFunc() {
  console.log('hi');
}

normalFunc(); //hi

//arrow function

let arrFunc = () => {
  console.log('i am arrow function');
};

arrFunc(); //i am arrow function
Войти в полноэкранный режим Выйти из полноэкранного режима

2.Доступ к ключевому слову ‘this’.
Стрелочная функция не имеет своего собственного ключевого слова this. Это работает как лексический скопинг.

Но обычная функция всегда имеет свое собственное ключевое слово this, и это глобальное this или window, или родительский объект, в котором она была объявлена.


let person = {
  name: 'Jhone',
  gfg1: () => {
    console.log('hello ' + this.name); // hello undefined
  },
  gfg2() {
    console.log('hi ' + this.name); // hi Jhone
  },
};
person.gfg1();
person.gfg2();
Вход в полноэкранный режим Выход из полноэкранного режима

3.В функции arrow мы не можем получить доступ к объекту аргументов, а в обычной функции можем.

//normal function
function food(a, b, c) {
  console.log(arguments);
}

food('rice', 'milk', 'fish'); // {0: "rice", 1: "milk", 2: "fish"}


//arrow function
let fruits = (a, b, c) => {
  console.log(...arguments); //ReferenceError: arguments is not defined
};

fruits('apple', 'banana', 'berry');
Вход в полноэкранный режим Выход из полноэкранного режима

4.В обычной функции для возврата чего-либо необходимо использовать оператор return, а в стрелочной функции можно использовать неявный return.

//normal function
function nFunc() {
  return 'i am normal function';
}
console.log(nFunc());

//arrow function
let arrFunc = () => 'i am arrow function';
console.log(arrFunc());
Вход в полноэкранный режим Выход из полноэкранного режима

5.Обычные функции javascript являются конструкторами, а стрелочные — нет. Вы не можете создать конструктор функции с помощью стрелочной функции, но с помощью нотмальных функций можете.

  function nFunc(name, email) {
  this.name = name;
  this.email = email;

}

let preson = new nFunc('jony', 'jony@gmail.com');

console.log("name: ",preson.name,' ',"email: ",preson.email); // name: jony email: jony@gmail.com
Вход в полноэкранный режим Выход из полноэкранного режима

Оцените статью
Procodings.ru
Добавить комментарий