Tādi lasītāji kā jūs palīdz atbalstīt MUO. Veicot pirkumu, izmantojot saites mūsu vietnē, mēs varam nopelnīt filiāles komisiju. Lasīt vairāk.

Funkcija ir atkārtoti lietojama koda daļa, kas darbojas, kad to izsaucat. Funkcijas ļauj atkārtoti izmantot kodu, padarot to modulārāku un vieglāk uzturējamu.

Ir vairāki veidi, kā izveidot funkcijas JavaScript. Šeit jūs uzzināsit dažādus veidus, kā izveidot funkcijas un kā tās izmantot.

Funkciju deklarācijas: vienkāršais ceļš

Viens veids, kā izveidot funkcijas JavaScript, ir funkciju deklarācijas. Funkcijas deklarācija ir funkcija JavaScript, kas seko tālāk norādītajai sintaksei.

funkcijuFunkcijas nosaukums(parametrus) {
// kods iet šeit...
atgriezties"Šī ir funkcijas deklarācija";
}

Iepriekš minētā koda bloka komponenti ietver:

  • The funkciju atslēgvārds: šis atslēgvārds deklarē funkciju.
  • Funkcijas nosaukums: Šis ir funkcijas nosaukums. Praksē tam jābūt pēc iespējas aprakstošākam un jēgpilnākam, norādot, ko funkcija dara.
  • parametrus: tas attēlo funkcijas parametrus. Parametri ir neobligāts mainīgo lielumu saraksts, ko varat nodot funkcijai, kad to izsaucat.
  • Funkcijas pamatteksts: tajā ir kods, ko funkcija darbosies, kad to izsauksit. To ieskauj cirtaini lencēm {} un var saturēt jebkuru derīgu JavaScript kodu.
  • The atgriezties paziņojums: šis paziņojums aptur funkcijas izpildi un atgriež norādīto vērtību. Iepriekš minētajā gadījumā funkcijas izsaukšana atgrieztu virkni “Šī ir funkcijas deklarācija”.

Piemēram, tālāk sniegtā funkcijas deklarācija izmanto trīs skaitļus kā parametrus un atgriež to summu.

funkcijupievienotThreeNumbers(a, b, c) {
atgriezties a + b + c;
}

Lai izsauktu funkcijas deklarāciju JavaScript, ierakstiet funkcijas nosaukumu, kam seko iekavas (). Ja funkcija izmanto kādus parametrus, nododiet tos kā argumentus iekavās.

Piemēram:

addThreeNumbers(1, 2, 3) // 6

Iepriekš esošais koda bloks izsauc addThreeNumber funkcijas un nodod 1, 2 un 3 kā argumentus funkcijai. Ja palaižat šo kodu, tas atgriezīs vērtību 6.

JavaScript pacēlāji funkciju deklarācijas, kas nozīmē, ka varat tās izsaukt pirms to definēšanas.

Piemēram:

isHoisted(); // Funkcija ir pacelta
funkcijuirPacelts() {
konsole.log("Funkcija ir pacelta");
atgrieztiestaisnība;
}

Kā parādīts koda blokā iepriekš, zvanot irPacelts pirms tā definēšanas neizraisīs kļūdu.

Funkciju izteiksmes: Funkcijas kā vērtības

JavaScript jūs varat definēt funkciju kā izteiksmi. Pēc tam varat piešķirt funkcijas vērtību mainīgajam vai izmantot to kā argumentu citai funkcijai.

Tās ir pazīstamas arī kā anonīmas funkcijas, jo tām nav nosaukumu, un tās var izsaukt tikai no mainīgā, kuram tās piešķīrāt.

Tālāk ir norādīta funkcijas izteiksmes sintakse:

konst FunctionName = funkciju () {
atgriezties"Funkciju izteiksme";
};

Lai izsauktu funkcijas izteiksmi JavaScript, ierakstiet funkcijai piešķirto mainīgā nosaukumu, kam seko iekavas (). Ja funkcija izmanto kādus parametrus, nododiet tos kā argumentus iekavās.

Piemēram:

funkcijasNosaukums(); // Funkcijas izteiksme

Funkciju izteiksmes ir noderīgas, veidojot funkcijas, kas darbojas citās funkcijās. Tipiski piemēri ir notikumu apstrādātāji un to atzvani.

Piemēram:

button.addEventListener("klikšķis", funkciju (notikumu) {
konsole.log("Jūs nospiedāt pogu!");
});

Iepriekš minētajā piemērā tika izmantota funkcijas izteiksme, kas aizņem an notikumu arguments kā atzvans uz addEventListener funkciju. Ja izmantojat funkcijas izteiksmi kā atzvanīšanu, funkcija nav skaidri jāizsauc. To automātiski izsauc tās vecāku funkcija.

Iepriekš minētajā gadījumā, kad notikuma klausītājs saņem a klikšķis notikumu, tas izsauc atzvanīšanas funkciju un nodod notikumu objekts kā arguments.

Atšķirībā no funkciju deklarācijām, funkciju izteiksmes netiek paceltas, tāpēc tās nevar izsaukt, pirms tās ir definētas. Mēģinot piekļūt funkcijas izteiksmei pirms tās definēšanas, tiks parādīts a Atsauces kļūda.

Piemēram:

isHoisted(); // ReferenceError: pirms inicializācijas nevar piekļūt 'isHoisted'
konst isHoisted = funkciju () {
konsole.log("Funkcija ir pacelta");
};

Bultiņu funkcijas: kompakts un ierobežots

ES6 ieviesa saīsinājumu anonīmu funkciju rakstīšanai JavaScript valodā, ko sauc par bultiņu funkcijām. Tiem ir kodolīga sintakse, kas var padarīt jūsu kodu lasāmāku, īpaši, ja tiek izmantotas īsas, vienas rindas funkcijas.

Atšķirībā no citām funkciju izveides metodēm, bultiņu funkcijām nav nepieciešama funkciju atslēgvārds. Bultas funkcijas izteiksme sastāv no trim daļām:

  • iekavu pāris (()), kas satur parametrus. Varat izlaist iekavas, ja funkcijai ir tikai viens parametrs.
  • Bulta (=>), kas sastāv no vienādības zīmes (=) un lielāka par zīmi (>).
  • Cirtainu breketu pāris, kas satur funkcijas korpusu. Ja funkcija sastāv no vienas izteiksmes, varat izlaist cirtainās iekavas.

Piemēram:

// Viens parametrs, netieša atdeve
konst FunctionName = parametrs =>konsole.log("Viena parametra bultiņas funkcija")
// Vairāki parametri, skaidra atdeve
konst FunctionName = (parametrs_1, parametrs_2) => {
atgriezties"Vairāku parametru bultiņas funkcija"
};

Ja izlaižat cirtainās figūriekavas, bultiņas funkcija netieši atgriež vienu izteiksmi, tāpēc nav nepieciešams atgriezties atslēgvārds. No otras puses, ja neizlaižat cirtainās iekavas, jums ir skaidri jāatgriež vērtība, izmantojot atgriezties atslēgvārds.

Arī bultiņu funkcijām ir atšķirīgas šis saistošs salīdzinājumā ar parastajām funkcijām. Parastās funkcijās vērtība šis atkarīgs no tā, kā izsaucat funkciju. Izmantojot bultiņas funkciju, šis vienmēr ir saistīts ar šis apkārtējā tvēruma vērtība.

Piemēram:

konst foo = {
 nosaukums: "Deivs",
 sveikt: funkciju () {
 setTimeout(() => {
konsole.log(`Sveiki, mani sauc ${šis.name}`);
 }, 1000);
 },
};
foo.greet(); // Logs "Sveiki, mani sauc Deivs" pēc 1 sekundes

Iepriekš minētajā piemērā bultiņas funkcija iekšpusē sveikt metodei ir piekļuve šis.nosaukums, lai gan setTimeout funkcija to izsauc. Normālai funkcijai būtu savs šis saistīts ar globālo objektu.

Kā norāda nosaukums, nekavējoties izsauktā funkcija (IIFE) ir funkcija, kas darbojas, tiklīdz tā ir definēta.

Šeit ir norādīta IIFE struktūra:

(funkciju () {
// kods šeit
})();
(() => {
// kods šeit
})();
(funkciju (parametrs_1, parametrs_2) {
konsole.log (param_1 * param_2);
})(2, 3);

IIFE sastāv no funkcijas izteiksmes, kas ietīta iekavās. Sekojiet tai ar iekavām ārpus korpusa, lai izsauktu funkciju.

Varat izmantot IIFE, lai izveidotu tvērumus, paslēptu ieviešanas informāciju un koplietotu datus starp vairākiem skriptiem. Tie kādreiz tika izmantoti kā a moduļu sistēma JavaScript.

Funkcijas izveide daudzos dažādos veidos

Izpratne par funkciju izveidi JavaScript ir ļoti svarīga. Tas attiecas uz pamatfunkciju, kas veic vienkāršu aprēķinu, vai sarežģītu funkciju, kas mijiedarbojas ar citām jūsu koda daļām.

Varat izmantot iepriekš aprakstītās metodes, lai izveidotu funkcijas JavaScript un strukturētu un sakārtotu savu kodu. Izvēlieties pieeju, kas vislabāk atbilst jūsu prasībām, jo ​​katrai no tām ir dažādas priekšrocības un pielietojums.