Funkce šipky JavaScriptu

V tomto výukovém programu se na příkladech dozvíte o funkci šipky JavaScriptu.

Funkce Šipka je jednou z funkcí zavedených ve verzi ES6 JavaScriptu. Umožňuje vám vytvářet funkce čistším způsobem ve srovnání s běžnými funkcemi. Například
tato funkce

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

lze psát jako

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

pomocí funkce šipky.

Syntaxe funkce šipky

Syntaxe funkce šipky je:

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

Tady,

  • myFunction je název funkce
  • arg1, arg2,… argN jsou argumenty funkce
  • statement(s) je funkční tělo

Pokud má tělo jediný příkaz nebo výraz, můžete napsat funkci šipky jako:

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

Příklad 1: Funkce šipky bez argumentu

Pokud funkce nebere žádný argument, měli byste použít prázdné závorky. Například,

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

Příklad 2: Funkce šipky s jedním argumentem

Pokud má funkce pouze jeden argument, můžete vynechat závorky. Například,

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

Příklad 3: Funkce šipky jako výraz

Můžete také dynamicky vytvořit funkci a použít ji jako výraz. Například,

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

Příklad 4: Funkce víceřádkových šipek

Pokud má tělo funkce více příkazů, musíte je umístit do složených závorek (). Například,

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

to s funkcí Arrow

Uvnitř běžné funkce toto klíčové slovo odkazuje na funkci, kde je voláno.

Není thisvšak spojen s funkcemi šipek. Funkce Arrow nemá vlastní this. Takže kdykoli zavoláte this, odkazuje se na jeho nadřazený rozsah. Například,

Uvnitř běžné funkce

 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ýstup

 25 nedefinovaných oken ()

Zde je this.ageuvnitř this.sayName()přístupný, protože this.sayName()je to metoda objektu.

Je innerFunc()to však normální funkce a this.agenení přístupná, protože thisodkazuje na globální objekt (objekt Window v prohlížeči). Proto this.ageuvnitř innerFunc()funkce dává undefined.

Uvnitř funkce šipky

 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ýstup

 25 25

Zde je innerFunc()funkce definována pomocí funkce šipky. A uvnitř funkce šipky thisodkazuje na rozsah rodiče. Proto this.agedává 25 .

Argumenty závazné

Pravidelné funkce mají vazby argumentů. Proto když předáte argumenty běžné funkci, můžete k nim získat přístup pomocí argumentsklíčového slova. Například,

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

Funkce šipek nemají závazné argumenty.

Při pokusu o přístup k argumentu pomocí funkce se šipkou dojde k chybě. Například,

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

Chcete-li tento problém vyřešit, můžete použít syntaxi šíření. Například,

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

Funkce šipky se sliby a zpětnými voláními

Funkce šipek poskytují lepší syntaxi pro psaní slibů a zpětných volání. Například,

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

lze psát jako

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

Věci, kterým byste se měli vyhnout pomocí funkcí šipek

1. Neměli byste používat funkce šipek k vytváření metod uvnitř objektů.

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

2. Funkci šipky nelze použít jako konstruktor . Například,

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

Poznámka : Funkce šipek byly zavedeny v ES6 . Některé prohlížeče nemusí podporovat používání funkcí šipek. Navštivte podporu funkce JavaScript Arrow a dozvíte se více.

Zajímavé články...