JavaScript funkcija strelice

U ovom ćete tutorijalu uz primjere naučiti o funkciji JavaScript strelice.

Funkcija strelice jedna je od značajki predstavljenih u ES6 verziji JavaScript-a. Omogućuje vam stvaranje funkcija na čišći način u usporedbi s uobičajenim funkcijama. Na primjer,
Ova funkcija

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

može se zapisati kao

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

pomoću funkcije strelice.

Sintaksa funkcije strelice

Sintaksa funkcije strelice je:

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

Ovdje,

  • myFunction je naziv funkcije
  • arg1, arg2,… argN su argumenti funkcije
  • statement(s) je tijelo funkcije

Ako tijelo ima jednu izjavu ili izraz, možete napisati funkciju strelice kao:

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

Primjer 1: Funkcija strelice bez argumenta

Ako funkcija ne uzima nijedan argument, trebali biste koristiti prazne zagrade. Na primjer,

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

Primjer 2: Funkcija strelice s jednim argumentom

Ako funkcija ima samo jedan argument, možete izostaviti zagrade. Na primjer,

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

Primjer 3: Funkcija strelice kao izraz

Također možete dinamički stvoriti funkciju i koristiti je kao izraz. Na primjer,

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

Primjer 4: Funkcije višerednih strelica

Ako tijelo funkcije ima više izjava, morate ih staviti u kovrčave zagrade (). Na primjer,

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

ovo s funkcijom strelice

Unutar redovite funkcije, ova se ključna riječ odnosi na funkciju u kojoj je pozvana.

Međutim, thisnije povezano s funkcijama strelice. Funkcija strelice nema svoje this. Dakle, kad god zovete this, odnosi se na svoj nadređeni opseg. Na primjer,

Unutar redovite funkcije

 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();

Izlaz

 25 nedefinirani prozor ()

Ovdje je this.ageunutra moguće this.sayName()pristupiti jer this.sayName()je to metoda objekta.

Međutim, innerFunc()to je normalna funkcija i this.agenije joj dostupno jer se thisodnosi na globalni objekt (objekt Prozor u pregledniku). Dakle, this.ageunutar innerFunc()funkcije daje undefined.

Unutar funkcije strelice

 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();

Izlaz

 25 25

Ovdje se innerFunc()funkcija definira pomoću funkcije strelice. A unutar funkcije strelice thisodnosi se na opseg roditelja. Dakle, this.agedaje 25 .

Obavezivanje argumenata

Regularne funkcije imaju obvezujuće argumente. Zbog toga kada prosljeđujete argumente redovnoj funkciji, možete im pristupiti pomoću argumentsključne riječi. Na primjer,

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

Funkcije strelica nemaju obvezujuće argumente.

Kad pokušate pristupiti argumentu pomoću funkcije strelice, pojavit će se pogreška. Na primjer,

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

Da biste riješili ovaj problem, možete koristiti sintaksu širenja. Na primjer,

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

Funkcija strelice s obećanjima i povratnim pozivima

Funkcije strelica pružaju bolju sintaksu za pisanje obećanja i povratnih poziva. Na primjer,

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

može se zapisati kao

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

Stvari koje biste trebali izbjegavati s funkcijama strelice

1. Ne biste trebali koristiti funkcije strelica za stvaranje metoda unutar objekata.

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

2. Ne možete koristiti funkciju strelice kao konstruktor . Na primjer,

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

Napomena : Funkcije strelica uvedene su u ES6 . Neki preglednici možda ne podržavaju upotrebu strelica. Posjetite podršku za funkcije JavaScript strelice da biste saznali više.

Zanimljivi članci...