Funkcia šípky JavaScript

V tomto výučbe sa na príkladoch dozviete o funkcii šípky JavaScriptu.

Funkcia šípky je jednou z funkcií zavedených vo verzii ES6 JavaScriptu. Umožňuje vám vytvárať funkcie čistejšie v porovnaní s bežnými funkciami. Napríklad
Táto funkcia

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

možno napísať ako

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

pomocou funkcie šípky.

Syntax funkcie šípky

Syntax funkcie šípky je:

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

Tu,

• myFunction je názov funkcie
• arg1, arg2,… argN sú argumenty funkcie
• statement(s) je funkčný orgán

Ak má telo jeden príkaz alebo výraz, môžete funkciu šípky zapísať ako:

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

Príklad 1: Funkcia šípky bez argumentu

Ak funkcia neprijíma žiadny argument, mali by ste použiť prázdne zátvorky. Napríklad,

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

Príklad 2: Funkcia šípky s jedným argumentom

Ak má funkcia iba jeden argument, môžete zátvorky vynechať. Napríklad,

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

Príklad 3: Funkcia šípky ako výraz

Môžete tiež dynamicky vytvoriť funkciu a použiť ju ako výraz. Napríklad,

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

Príklad 4: Funkcie viacradovej šípky

Ak má telo funkcie viac príkazov, musíte ich vložiť do zložených zátvoriek (). Napríklad,

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

toto s funkciou Arrow

Vo vnútri bežnej funkcie toto kľúčové slovo odkazuje na funkciu, kde sa nazýva.

Nie thisje to však spojené s funkciami šípok. Funkcia šípky nemá svoju vlastnú this. Takže kedykoľvek zavoláte this, odkazuje sa na jeho nadradený rozsah. Napríklad,

Vo vnútri bežnej funkcie

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

Výkon

 25 nedefinovaných okien ()

Tu je this.agevnútro this.sayName()prístupné, pretože this.sayName()ide o metódu objektu.

Je innerFunc()to však normálna funkcia a this.agenie je prístupná, pretože sa thistýka globálneho objektu (objekt Window v prehliadači). Preto this.agevo vnútri innerFunc()funkcie dáva undefined.

Vo vnútri funkcie šípky

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

Výkon

 25 25

Tu je innerFunc()funkcia definovaná pomocou funkcie šípky. A vo vnútri funkcie šípky sa thisodkazuje na rozsah rodiča. Preto this.agedáva 25 .

Argumenty záväzné

Regulárne funkcie majú väzbu argumentov. Preto keď odovzdáte argumenty bežnej funkcii, môžete k nim získať prístup pomocou argumentskľúčového slova. Napríklad,

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

Funkcie šípok neobsahujú väzby argumentov.

Pri pokuse o prístup k argumentu pomocou funkcie šípky sa zobrazí chyba. Napríklad,

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

Na vyriešenie tohto problému môžete použiť syntax šírenia. Napríklad,

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

Funkcia šípky so sľubmi a spätnými volaniami

Funkcie šípok poskytujú lepšiu syntax pri písaní sľubov a spätných volaní. Napríklad,

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

možno napísať ako

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

Veci, ktorým by ste sa pomocou funkcií so šípkami mali vyhnúť

1. Na vytváranie metód vo vnútri objektov by ste nemali používať funkcie šípok.

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

2. Funkciu šípky nemôžete použiť ako konštruktor . Napríklad,

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

Poznámka : Funkcie šípok boli predstavené v ES6 . Niektoré prehliadače nemusia podporovať používanie funkcií šípok. Ak sa chcete dozvedieť viac, navštívte podporu funkcií šípky JavaScriptu.