Традиционные функции и функции стрелок в Javascript имеют некоторые ключевые различия с точки зрения синтаксиса и поведения.
- Синтаксис:-
- Стрелочные функции используют краткий синтаксис и не требуют ключевого слова «function».
- Обычные функции используют ключевое слово «Function».
//Arrow function const arrowFunction = (param) => { /* You can write your code here */}; //Normal function function normalFunction(param){ /* you can write your code here */ }
2. Привязка «this»:-
- Стрелочные функции не имеют собственного контекста «this». Они наследуют значение «this» от содержащей или окружающей функции или контекста.
- Обычные функции имеют свой собственный контекст this, который может различаться в зависимости от того, как они вызываются.
const userObject = { name: "Sunil", sayHelloInArrow: () => { console.log(`Hello ${this.name}`);//this refers to the global object }, sayHelloInNormal: function(){ console.log(`Hello ${this.name}`); //this refers to the userObject } } userObject.sayHelloInArrow();//Hello undefined userObject.sayHelloInNormal();//Hello Sunil
3. Объект аргументов:-
- Стрелочные функции не имеют собственного объекта аргументы. Если вам нужен доступ к аргументам функции, вам следует использовать остальные параметры(`…args`).
- Обычные функции имеют объект «arguments», который обеспечивает доступ к аргументам функции.
function normalFunction(){ console.log(arguments) } normalFunction(1, 2, 3, 4);//{ '0': 1, '1': 2, '2': 3, '3': 4 } const arrowFunction = () => { console.log(arguments) } arrowFunction(1, 2, 3, 4);//Uncaught ReferenceError: arguments is not defined
4. Конструктор:-
- Стрелочные функции нельзя использовать в качестве конструкторов для создания объектов с ключевым словом «new».
- Обычные функции можно использовать в качестве конструкторов для создания объектов.
const ArrowConstructor = () => {}; const arrowInstance = new ArrowConstructor(); // TypeError: ArrowConstructor is not a constructor function NormalConstructor() {} const normalInstance = new NormalConstructor(); // Normal constructor works as expected
5. Примеры использования:-
- Стрелочные функции часто предпочтительнее для более коротких и простых функций, таких как обратные вызовы и встроенные функции.
- Обычные функции более универсальны и используются, когда вам нужна гибкость отдельного контекста «this» или при определении методов внутри объектов.
Подводя итог, стрелочные функции представляют собой более краткий способ определения функций, но у них есть ограничения, особенно в отношении привязки «this» и отсутствия объекта «arguments». Выбор между стрелочными функциями и обычными функциями зависит от конкретного варианта использования и требований вашего кода.