JavaScript nyíl funkció

Ebben az oktatóanyagban példák segítségével megismerheti a JavaScript nyíl funkcióját.

A nyíl funkció az egyik olyan funkció, amelyet a JavaScript ES6 verziójában vezetnek be. Lehetővé teszi a funkciók tisztább létrehozását a szokásos funkciókhoz képest. Például:
Ez a funkció

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

úgy írható

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

nyíl függvény használatával.

Nyíl Funkció Szintaxis

A nyíl függvény szintaxisa:

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

Itt,

• myFunction a függvény neve
• arg1, arg2,… argN a függvény argumentumai
• statement(s) a függvénytest

Ha a törzs egyetlen utasítással vagy kifejezéssel rendelkezik, akkor a nyílfüggvényt a következőképpen írhatja:

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

1. példa: Nyíl függvény argumentum nélkül

Ha egy függvény nem tartalmaz argumentumot, akkor üres zárójeleket kell használni. Például,

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

2. példa: Nyíl függvény egy argumentummal

Ha egy függvénynek csak egy argumentuma van, akkor a zárójeleket elhagyhatja. Például,

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

3. példa: Nyílfüggvény mint kifejezés

Dinamikusan létrehozhat egy függvényt is, és kifejezéseként használhatja. Például,

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

4. példa: Többsoros nyílfüggvények

Ha egy függvénytörzsnek több állítása van, akkor azt göndör zárójelbe kell tenni (). Például,

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

ezt a nyíl funkcióval

Egy szabályos függvényben ez a kulcsszó arra a függvényre utal, ahol hívják.

A nyilfüggvényekhez azonban thisnincs társítva. A nyíl funkciónak nincs sajátja this. Tehát, amikor hív this, a szülő hatókörére utal. Például,

Rendes funkció belsejében

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

Kimenet

 25 undefined ablak ()

Itt a this.agebelső this.sayName()hozzáférhető, mert this.sayName()ez egy objektum módszere.

Ez azonban innerFunc()normális funkció, és this.agenem érhető el, mert thisa globális objektumra (Window objektum a böngészőben) utal. Ezért this.agea innerFunc()funkció belsejében ad undefined.

Belül egy nyíl funkció

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

Kimenet

 25 25

Itt a innerFunc()függvény meghatározása a nyíl függvény segítségével történik. A nyíl függvényen belül thispedig a szülő hatókörére utal. Ezért 25-ötthis.age ad .

Érvek Kötés

A rendszeres függvények argumentumai kötelezőek. Éppen ezért, amikor argumentumokat ad át egy reguláris függvénynek, a argumentskulcsszóval érheti el őket . Például,

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

A nyílfüggvényeknek nincsenek kötelező erejű argumentumai.

Amikor megpróbál elérni egy argumentumot a nyíl függvény segítségével, az hibát ad. Például,

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

A probléma megoldásához használhatja a terjedési szintaxist. Például,

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

Nyíl funkció ígéretekkel és visszahívásokkal

A nyíl funkciók jobb szintaxist biztosítanak az ígéretek és visszahívások megírásához. Például,

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

úgy írható

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

Olyan dolgok, amelyeket kerülni kell a nyílfunkciókkal

1. Ne használjon nyílfüggvényeket metódusok létrehozására az objektumok belsejében.

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

2. Nem használhat nyílfüggvényt konstruktorként . Például,

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

Megjegyzés : A nyíl funkciókat az ES6- ban vezették be . Egyes böngészők nem támogatják a nyíl funkciók használatát. További információkért keresse fel a JavaScript nyílfüggvénytámogatást.