„JavaScript“ rodyklės funkcija

Šioje pamokoje su pavyzdžių pagalba sužinosite apie „JavaScript“ rodyklių funkciją.

Rodyklių funkcija yra viena iš funkcijų, įdiegtų „ES6“ „JavaScript“ versijoje. Tai leidžia jums kurti funkcijas švaresniu būdu, palyginti su įprastomis funkcijomis. Pavyzdžiui,
Ši funkcija

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

galima rašyti kaip

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

naudojant rodyklės funkciją.

Rodyklės funkcijos sintaksė

Rodyklės funkcijos sintaksė yra:

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

Čia

• myFunction yra funkcijos pavadinimas
• arg1, arg2,… argN yra funkcijos argumentai
• statement(s) yra funkcijos kūnas

Jei turinys turi vieną sakinį ar išraišką, rodyklės funkciją galite parašyti taip:

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

1 pavyzdys: rodyklės funkcija be argumento

Jei funkcija neturi argumento, turėtumėte naudoti tuščius skliaustus. Pavyzdžiui,

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

2 pavyzdys: rodyklės funkcija su vienu argumentu

Jei funkcija turi tik vieną argumentą, skliaustų galite praleisti. Pavyzdžiui,

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

3 pavyzdys: rodyklės funkcija kaip išraiška

Taip pat galite dinamiškai sukurti funkciją ir naudoti ją kaip išraišką. Pavyzdžiui,

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

4 pavyzdys: daugialypės rodyklės funkcijos

Jei funkcijos turinys turi kelis sakinius, turite juos įdėti į garbanotus skliaustus (). Pavyzdžiui,

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

tai su rodyklės funkcija

Įprastos funkcijos viduje šis raktinis žodis nurodo funkciją, kurioje ji vadinama.

Tačiau thisnėra susijęs su rodyklių funkcijomis. Rodyklės funkcija neturi savo this. Taigi, kai skambinate this, tai nurodo jo pirminę sritį. Pavyzdžiui,

Įprastos funkcijos viduje

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

Rezultatas

 25 neapibrėžtas langas ()

Čia this.agevidus this.sayName()yra prieinamas, nes this.sayName()yra objekto metodas.

Tačiau innerFunc()tai yra įprasta funkcija ir this.agenėra prieinama, nes thisnurodo visuotinį objektą (lango objektą naršyklėje). Vadinasi, this.ageviduje innerFunc()funkcija suteikia undefined.

Rodyklės funkcijos viduje

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

Rezultatas

 25 25

Čia innerFunc()funkcija apibrėžiama naudojant rodyklės funkciją. Rodyklės funkcija thisnurodo tėvų taikymo sritį. Vadinasi, this.ageduoda 25 .

Argumentai įpareigojantys

Reguliarios funkcijos turi privalomus argumentus. Štai kodėl, perduodami argumentus įprastai funkcijai, galite juos pasiekti naudodami argumentsraktinį žodį. Pavyzdžiui,

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

Rodyklės funkcijos neturi privalomų argumentų.

Kai bandysite pasiekti argumentą naudodamiesi rodyklės funkcija, jis suteiks klaidą. Pavyzdžiui,

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

Norėdami išspręsti šią problemą, galite naudoti sklaidos sintaksę. Pavyzdžiui,

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

Rodyklės funkcija su pažadais ir atgaliniais skambučiais

Rodyklių funkcijos suteikia geresnę sintaksę pažadams ir atgaliniams skambučiams rašyti. Pavyzdžiui,

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

galima rašyti kaip

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

Dalykai, kurių turėtumėte vengti naudodami rodyklių funkcijas

1. Jūs neturėtumėte naudoti rodyklių funkcijų kurdami metodus objektų viduje.

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

2. Negalite naudoti rodyklės funkcijos kaip konstruktorius . Pavyzdžiui,

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

Pastaba : rodyklių funkcijos buvo įdiegtos ES6 . Kai kurios naršyklės gali nepalaikyti rodyklių funkcijų naudojimo. Norėdami sužinoti daugiau, apsilankykite „JavaScript“ rodyklių funkcijos palaikymo tarnyboje.