JavaScript bultiņas funkcija

Šajā apmācībā jūs uzzināsit par JavaScript bultiņas funkciju, izmantojot piemērus.

Bultu funkcija ir viena no funkcijām, kas ieviesta JavaScript ES6 versijā. Tas ļauj jums izveidot funkcijas tīrāk, salīdzinot ar parastajām funkcijām. Piemēram,
Šī funkcija

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

var rakstīt kā

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

izmantojot bultiņas funkciju.

Bultas funkciju sintakse

Bultas funkcijas sintakse ir šāda:

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

Šeit,

  • myFunction ir funkcijas nosaukums
  • arg1, arg2,… argN ir funkcijas argumenti
  • statement(s) ir funkcijas ķermenis

Ja ķermenim ir viens paziņojums vai izteiksme, jūs varat rakstīt bultiņas funkciju kā:

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

1. piemērs: bultiņas funkcija bez argumenta

Ja funkcija neņem vērā nevienu argumentu, jāizmanto tukšas iekavas. Piemēram,

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

2. piemērs: bultiņas funkcija ar vienu argumentu

Ja funkcijai ir tikai viens arguments, iekavas var izlaist. Piemēram,

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

3. piemērs: bultiņas funkcija kā izteiksme

Varat arī dinamiski izveidot funkciju un izmantot to kā izteiksmi. Piemēram,

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

4. piemērs: Daudzrindu bultiņu funkcijas

Ja funkcijas ķermenim ir vairāki priekšraksti, tie jāievieto cirtainās iekavās (). Piemēram,

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

tas ar bultiņu funkciju

Parastas funkcijas iekšpusē šis atslēgvārds attiecas uz funkciju, kur to sauc.

Tomēr thistas nav saistīts ar bultiņu funkcijām. Bultu funkcijai nav savas this. Tātad, kad zvanāt this, tas attiecas uz vecāku darbības jomu. Piemēram,

Regulāras funkcijas iekšpusē

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

Rezultāts

 25 nedefinēts logs ()

Šeit this.ageiekšpuse this.sayName()ir pieejama, jo tā this.sayName()ir objekta metode.

Tomēr innerFunc()tā ir parasta funkcija un this.agenav pieejama, jo thisattiecas uz globālo objektu (Window objekts pārlūkprogrammā). Tādējādi this.ageiekšpusē innerFunc()funkcija dod undefined.

Bultas funkcijas iekšpusē

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

Rezultāts

 25 25

Šeit innerFunc()funkcija tiek definēta, izmantojot bultiņas funkciju. Bultas funkcijas iekšpusē tas thisattiecas uz vecāku darbības jomu. Tādējādi this.agedod 25 .

Argumenti Saistošs

Parastajām funkcijām ir saistoši argumenti. Tāpēc, nododot argumentus parastajai funkcijai, varat tiem piekļūt, izmantojot argumentsatslēgvārdu. Piemēram,

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

Bultiņu funkcijām nav saistošu argumentu.

Mēģinot piekļūt argumentam, izmantojot bultiņas funkciju, tas radīs kļūdu. Piemēram,

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

Lai atrisinātu šo problēmu, varat izmantot izplatīšanas sintaksi. Piemēram,

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

Bultas funkcija ar solījumiem un atzvaniem

Bultiņu funkcijas nodrošina labāku sintaksi solījumu un atzvanīšanas rakstīšanai. Piemēram,

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

var rakstīt kā

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

Lietas, no kurām jāizvairās, izmantojot bultiņu funkcijas

1. Jums nevajadzētu izmantot bultiņu funkcijas, lai izveidotu metodes objektu iekšienē.

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

2. Jūs nevarat izmantot bultas funkciju kā konstruktoru . Piemēram,

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

Piezīme : Bultas funkcijas tika ieviestas ES6 . Dažas pārlūkprogrammas var neatbalstīt bultiņu funkciju izmantošanu. Lai uzzinātu vairāk, apmeklējiet JavaScript bultiņu funkciju atbalstu.

Interesanti raksti...