JavaScript-nuolitoiminto

Tässä opetusohjelmassa opit JavaScript-nuolitoiminnosta esimerkkien avulla.

Nuolitoiminto on yksi JavaScriptin ES6-version ominaisuuksista. Sen avulla voit luoda toimintoja puhtaammalla tavalla kuin tavalliset toiminnot. Esimerkiksi
Tämä toiminto

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

voidaan kirjoittaa muodossa

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

käyttämällä nuolitoimintoa.

Nuolitoiminnon syntakse

Nuolitoiminnon syntaksi on:

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

Tässä,

• myFunction on funktion nimi
• arg1, arg2,… argN ovat funktion argumentteja
• statement(s) on funktion runko

Jos rungossa on yksi lause tai lauseke, voit kirjoittaa nuolitoiminnon seuraavasti:

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

Esimerkki 1: Nuolitoiminto ilman argumenttia

Jos funktio ei vie mitään argumenttia, sinun on käytettävä tyhjiä sulkeita. Esimerkiksi,

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

Esimerkki 2: Nuolitoiminto yhdellä argumentilla

Jos funktiolla on vain yksi argumentti, voit jättää sulkumerkit pois. Esimerkiksi,

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

Esimerkki 3: Nuolitoiminto lausekkeena

Voit myös luoda funktion dynaamisesti ja käyttää sitä lausekkeena. Esimerkiksi,

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

Esimerkki 4: Moniriviset nuolitoiminnot

Jos funktion rungossa on useita lauseita, sinun on laitettava ne kiharoiden sulkeisiin (). Esimerkiksi,

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

tämä nuolitoiminnolla

Tavallisen funktion sisällä tämä avainsana viittaa funktioon, johon sitä kutsutaan.

Kuitenkaan thisei liity nuolella toimintoihin. Nuolitoiminnolla ei ole omaa this. Joten aina, kun soitat this, se viittaa vanhemman laajuuteen. Esimerkiksi,

Tavallisen toiminnon sisällä

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

Tuotos

 25 määrittelemätön ikkuna ()

Täällä this.agesisällä this.sayName()on käytettävissä, koska this.sayName()on menetelmä objektin.

Se innerFunc()on kuitenkin normaali toiminto, eikä this.agesitä voi käyttää, koska se thisviittaa globaaliin objektiin (selaimen ikkunaobjekti). Siksi this.agesisällä innerFunc()toiminto antaa undefined.

Nuolitoiminnon sisällä

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

Tuotos

 25 25

Tässä innerFunc()funktio määritetään nuolitoiminnolla. Ja nuolitoiminnon sisällä thisviittaa vanhemman laajuuteen. Näin ollen this.ageantaa 25 .

Argumentit sitovat

Säännöllisillä funktioilla on sitovat argumentit. Siksi, kun välität argumentit tavalliselle funktiolle, voit käyttää niitä argumentsavainsanalla. Esimerkiksi,

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

Nuolitoiminnoilla ei ole sitovia argumentteja.

Kun yrität käyttää argumenttia nuolitoiminnon avulla, se antaa virheen. Esimerkiksi,

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

Voit ratkaista tämän ongelman käyttämällä levityssyntaksia. Esimerkiksi,

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

Nuolitoiminto lupausten ja soittopyyntöjen kanssa

Nuolitoiminnot tarjoavat paremman syntaksin lupausten ja takaisinsoittojen kirjoittamiseen. Esimerkiksi,

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

voidaan kirjoittaa muodossa

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

Asiat, joita sinun tulisi välttää nuolitoiminnoilla

1. Älä käytä nuolitoimintoja menetelmien luomiseen esineiden sisällä.

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

2. Et voi käyttää nuolitoimintoa rakentajana . Esimerkiksi,

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

Huomaa : Nuolitoiminnot otettiin käyttöön ES6: ssa . Jotkin selaimet eivät ehkä tue nuolitoimintojen käyttöä. Lisätietoja on JavaScript-nuolitoiminnon tuessa.