Funcția săgeată JavaScript

În acest tutorial, veți afla despre funcția săgeată JavaScript cu ajutorul exemplelor.

Funcția săgeată este una dintre caracteristicile introduse în versiunea ES6 a JavaScript. Vă permite să creați funcții într-un mod mai curat în comparație cu funcțiile obișnuite. De exemplu,
Această funcție

 // function expression let x = function(x, y) ( return x * y; )

poate fi scris ca

 // using arrow functions let x = (x, y) => x * y;

folosind o funcție săgeată.

Sintaxa funcției săgeată

Sintaxa funcției săgeată este:

 let myFunction = (arg1, arg2,… argN) => ( statement(s) )

Aici,

• myFunction este numele funcției
• arg1, arg2,… argN sunt argumentele funcției
• statement(s) este corpul funcției

Dacă corpul are o singură afirmație sau expresie, puteți scrie funcția săgeată ca:

 let myFunction = (arg1, arg2,… argN) => expression

Exemplul 1: Funcția săgeată fără argument

Dacă o funcție nu acceptă niciun argument, atunci ar trebui să utilizați paranteze goale. De exemplu,

 let greet = () => console.log('Hello'); greet(); // Hello

Exemplul 2: Funcția săgeată cu un singur argument

Dacă o funcție are un singur argument, puteți omite parantezele. De exemplu,

 let greet = x => console.log(x); greet('Hello'); // Hello 

Exemplul 3: Funcția săgeată ca expresie

De asemenea, puteți crea dinamic o funcție și o puteți folosi ca expresie. De exemplu,

 let age = 5; let welcome = (age console.log('Baby') : () => console.log('Adult'); welcome(); // Baby

Exemplul 4: Funcții săgeată multilinie

Dacă un corp de funcție are mai multe instrucțiuni, trebuie să le introduceți în paranteze (). De exemplu,

 let sum = (a, b) => ( let result = a + b; return result; ) let result1 = sum(5,7); console.log(result1); // 12

aceasta cu funcția săgeată

În interiorul unei funcții obișnuite, acest cuvânt cheie se referă la funcția unde este numit.

Cu toate acestea, thisnu este asociat cu funcțiile săgeată. Funcția săgeată nu are propria sa this. Deci, ori de câte ori apelați this, se referă la scopul său părinte. De exemplu,

În interiorul unei funcții obișnuite

 function Person() ( this.name = 'Jack', this.age = 25, this.sayName = function () ( // this is accessible console.log(this.age); function innerFunc() ( // this refers to the global object console.log(this.age); console.log(this); ) innerFunc(); ) ) let x = new Person(); x.sayName();

Ieșire

 25 fereastra nedefinita ()

Aici, this.ageinteriorul this.sayName()este accesibil, deoarece this.sayName()este metoda unui obiect.

Cu toate acestea, innerFunc()este o funcție normală și this.agenu este accesibilă, deoarece thisse referă la obiectul global (obiectul Window din browser). Prin urmare, this.ageîn interiorul innerFunc()funcției dă undefined.

În interiorul unei funcții săgeată

 function Person() ( this.name = 'Jack', this.age = 25, this.sayName = function () ( console.log(this.age); let innerFunc = () => ( console.log(this.age); ) innerFunc(); ) ) const x = new Person(); x.sayName();

Ieșire

 25 25

Aici, innerFunc()funcția este definită folosind funcția săgeată. Și în interiorul funcției săgeată, thisse referă la scopul părintelui. Prin urmare, this.agedă 25 .

Argumente obligatorii

Funcțiile obișnuite au legături cu argumente. De aceea, atunci când treceți argumente unei funcții obișnuite, le puteți accesa folosind argumentscuvântul cheie. De exemplu,

 let x = function () ( console.log(arguments); ) x(4,6,7); // Arguments (4, 6, 7)

Funcțiile săgeată nu au legături de argumente.

Când încercați să accesați un argument folosind funcția săgeată, acesta va da o eroare. De exemplu,

 let x = () => ( console.log(arguments); ) x(4,6,7); // ReferenceError: Can't find variable: arguments

Pentru a rezolva această problemă, puteți utiliza sintaxa spread. De exemplu,

 let x = (… n) => ( console.log(n); ) x(4,6,7); // (4, 6, 7)

Funcția săgeată cu promisiuni și returnări de apel

Funcțiile săgeată oferă o sintaxă mai bună pentru a scrie promisiuni și apeluri de apel. De exemplu,

 // ES5 asyncFunction().then(function() ( return asyncFunction1(); )).then(function() ( return asyncFunction2(); )).then(function() ( finish; ));

poate fi scris ca

 // ES6 asyncFunction() .then(() => asyncFunction1()) .then(() => asyncFunction2()) .then(() => finish);

Lucruri pe care ar trebui să le evitați cu funcțiile săgeată

1. Nu trebuie să utilizați funcții săgeată pentru a crea metode în interiorul obiectelor.

 let person = ( name: 'Jack', age: 25, sayName: () => ( // this refers to the global… // console.log(this.age); ) ) person.sayName(); // undefined

2. Nu puteți utiliza o funcție săgeată ca constructor . De exemplu,

 let Foo = () => (); let foo = new Foo(); // TypeError: Foo is not a constructor

Notă : funcțiile săgeată au fost introduse în ES6 . Este posibil ca unele browsere să nu accepte utilizarea funcțiilor săgeată. Accesați asistența JavaScript Arrow Function pentru a afla mai multe.