Funkcija puščice JavaScript

V tej vadnici boste s pomočjo primerov spoznali funkcijo puščice JavaScript.

Funkcija puščice je ena od funkcij, predstavljenih v različici JavaScript ES6. Omogoča čistejše ustvarjanje funkcij v primerjavi z običajnimi funkcijami. Na primer
Ta funkcija

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

lahko zapišemo kot

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

s puščico.

Sintaksa funkcije puščice

Sintaksa funkcije puščice je:

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

Tukaj,

  • myFunction je ime funkcije
  • arg1, arg2,… argN so argumenti funkcije
  • statement(s) je funkcijsko telo

Če ima telo en stavek ali izraz, lahko funkcijo puščice zapišete kot:

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

Primer 1: Funkcija puščice brez argumenta

Če funkcija ne sprejme nobenega argumenta, potem uporabite prazne oklepaje. Na primer

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

Primer 2: Funkcija puščice z enim argumentom

Če ima funkcija samo en argument, lahko oklepaje izpustite. Na primer

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

Primer 3: Funkcija puščice kot izraz

Funkcijo lahko tudi dinamično ustvarite in jo uporabite kot izraz. Na primer

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

Primer 4: Funkcije večvrstne puščice

Če ima telo funkcije več stavkov, jih morate postaviti v zavite oklepaje (). Na primer

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

to s funkcijo puščice

Znotraj običajne funkcije se ta ključna beseda nanaša na funkcijo, kjer je poklicana.

Vendar thisni povezan s puščicami. Funkcija puščice nima svoje this. Torej, kadar koli pokličete this, se sklicuje na svoj nadrejeni obseg. Na primer

Znotraj običajne 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();

Izhod

 25 nedefinirano okno ()

Tukaj je this.agenotranjost this.sayName()dostopna, ker this.sayName()je metoda predmeta.

Vendar innerFunc()je običajna funkcija in this.ageni dostopna, ker se thisnanaša na globalni objekt (objekt Window v brskalniku). Zato funkcija this.ageznotraj innerFunc()daje undefined.

Znotraj funkcije puščice

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

Izhod

 25 25

Tu je innerFunc()funkcija definirana s funkcijo puščice. In znotraj funkcije puščice se thisnanaša na obseg starša. Zato this.agedaje 25 .

Vezava argumentov

Regularne funkcije so zavezujoče za argumente. Zato, ko posredujete argumente običajni funkciji, lahko do njih dostopate s argumentsključno besedo. Na primer

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

Puščične funkcije nimajo zavezujočih argumentov.

Ko poskušate dostopati do argumenta s funkcijo puščice, bo prišlo do napake. Na primer

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

Za rešitev te težave lahko uporabite sintakso širjenja. Na primer

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

Funkcija puščice z obljubami in povratnimi klici

Funkcije puščic zagotavljajo boljšo sintakso za pisanje obljub in povratnih klicev. Na primer

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

lahko zapišemo kot

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

Stvari, ki se jim morate izogibati s puščicami

1. Za ustvarjanje metod znotraj predmetov ne smete uporabljati puščičnih funkcij.

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

2. Funkcije puščice ne morete uporabiti kot konstruktor . Na primer

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

Opomba : Funkcije puščic so bile uvedene v ES6 . Nekateri brskalniki morda ne podpirajo uporabe puščic. Za več informacij obiščite podporo za funkcijo puščice JavaScript.

Zanimive Članki...