Tokie skaitytojai kaip jūs padeda palaikyti MUO. Kai perkate naudodami nuorodas mūsų svetainėje, galime uždirbti filialų komisinius. Skaityti daugiau.

Funkcija yra daugkartinio naudojimo kodo dalis, kuri paleidžiama, kai ją iškviečiate. Funkcijos leidžia pakartotinai naudoti kodą, todėl jis yra labiau modulinis ir lengviau prižiūrimas.

Yra keletas būdų, kaip kurti funkcijas „JavaScript“. Čia sužinosite apie skirtingus funkcijų kūrimo būdus ir kaip jomis naudotis.

Pareigų deklaracijos: tiesus kelias

Vienas iš būdų kurti funkcijas „JavaScript“ yra funkcijų deklaracijos. Funkcijos deklaracija yra „JavaScript“ funkcija, kuri atitinka toliau pateiktą sintaksę.

funkcijafunkcijos pavadinimas(parametrus) {
// kodas eina čia...
grąžinti"Tai yra funkcijos deklaracija";
}

Aukščiau pateikto kodo bloko komponentai apima:

  • The funkcija raktinis žodis: šis raktinis žodis deklaruoja funkciją.
  • funkcijos pavadinimas: Tai yra funkcijos pavadinimas. Praktiškai jis turėtų būti kiek įmanoma labiau aprašomasis ir prasmingesnis, nurodant, ką funkcija atlieka.
    • instagram viewer
  • parametrus: Tai rodo funkcijos parametrus. Parametrai yra pasirenkamas kintamųjų sąrašas, kurį galite perduoti funkcijai, kai ją iškviečiate.
  • Funkcijos turinys: jame yra kodas, kurį funkcija veiks, kai ją iškviesite. Jį supa garbanotos petnešos {} ir gali būti bet koks galiojantis JavaScript kodas.
  • The grąžinti teiginys: šis teiginys sustabdo funkcijos vykdymą ir grąžina nurodytą reikšmę. Aukščiau pateiktu atveju, iškvietus funkciją, būtų pateikta eilutė „Tai yra funkcijos deklaracija“.

Pavyzdžiui, toliau pateiktoje funkcijos deklaracijoje kaip parametrai naudojami trys skaičiai ir pateikiama jų suma.

funkcijaaddThreeNumbers(a, b, c) {
grąžinti a + b + c;
}

Norėdami iškviesti funkcijos deklaraciją „JavaScript“, parašykite funkcijos pavadinimą ir skliaustų rinkinį (). Jei funkcija naudoja bet kokius parametrus, perduokite juos kaip argumentus skliausteliuose.

Pavyzdžiui:

addThreeNumbers(1, 2, 3) // 6

Aukščiau esantis kodo blokas iškviečia addThreeNumber funkcijos ir perduoda 1, 2 ir 3 kaip funkcijos argumentus. Jei paleisite šį kodą, jis grąžins reikšmę 6.

JavaScript keltuvai funkcijų deklaracijas, tai reiškia, kad galite jas iškviesti prieš apibrėždami.

Pavyzdžiui:

isHoisted(); // Funkcija pakelta
funkcijaisPakeltas() {
konsolė.log("Funkcija pakelta");
grąžintitiesa;
}

Kaip parodyta aukščiau esančiame kodų bloke, skambinama isPakeltas prieš jį apibrėžiant nepadarytų klaidos.

Funkcijų išraiškos: funkcijos kaip reikšmės

„JavaScript“ galite apibrėžti funkciją kaip išraišką. Tada galite priskirti funkcijos reikšmę kintamajam arba naudoti ją kaip argumentą kitai funkcijai.

Jos taip pat žinomos kaip anoniminės funkcijos, nes jos neturi pavadinimų ir jas galite iškviesti tik iš kintamojo, kuriam jas priskyrėte.

Toliau pateikiama funkcijos išraiškos sintaksė:

konst functionName = funkcija () {
grąžinti"Funkcijų išraiška";
};

Norėdami iškviesti funkcijos išraišką „JavaScript“, parašykite kintamojo pavadinimą, kurį priskyrėte funkcijai, ir po to skliaustų rinkinį (). Jei funkcija naudoja bet kokius parametrus, perduokite juos kaip argumentus skliausteliuose.

Pavyzdžiui:

funkcijosPavadinimas(); // Funkcijos išraiška

Funkcijų išraiškos yra patogios kuriant funkcijas, kurios veikia kitose funkcijose. Įprasti pavyzdžiai yra įvykių tvarkyklės ir jų atgaliniai skambučiai.

Pavyzdžiui:

button.addEventListener("spausti", funkcija (įvykis) {
konsolė.log("Jūs paspaudėte mygtuką!");
});

Aukščiau pateiktame pavyzdyje buvo naudojama funkcijos išraiška, kuri užima an įvykis argumentas kaip atsišaukimas į addEventListener funkcija. Nereikia iškviesti funkcijos aiškiai, kai naudojate funkcijos išraišką kaip atgalinį skambutį. Jį automatiškai iškviečia pirminė funkcija.

Pirmiau nurodytu atveju, kai įvykio klausytojas gauna a spustelėkite įvykį, jis iškviečia atgalinio ryšio funkciją ir perduoda įvykis objektas kaip argumentas.

Skirtingai nuo funkcijų deklaracijų, funkcijų išraiškos nėra iškeliamos, todėl negalite jų iškviesti prieš neapibrėždami. Bandant pasiekti funkcijos išraišką prieš ją apibrėžiant, atsiras a Nuorodos klaida.

Pavyzdžiui:

isHoisted(); // ReferenceError: prieš inicijuojant negalima pasiekti „isHoisted“.
konst isHoisted = funkcija () {
konsolė.log("Funkcija pakelta");
};

Rodyklės funkcijos: kompaktiškas ir ribotas

ES6 pristatė anoniminių „JavaScript“ funkcijų rašymo santrumpas, vadinamas rodyklių funkcijomis. Jie turi glaustą sintaksę, dėl kurios jūsų kodas gali būti lengviau skaitomas, ypač kai dirbate su trumpomis vienos eilutės funkcijomis.

Skirtingai nuo kitų funkcijų kūrimo būdų, rodyklės funkcijoms nereikia funkcija raktažodį. Rodyklės funkcijos išraišką sudaro trys dalys:

  • Pora skliaustų (()) su parametrais. Galite praleisti skliaustus, jei funkcija turi tik vieną parametrą.
  • Strėlė (=>), kurį sudaro lygybės ženklas (=) ir didesnio nei ženklas (>).
  • Garbanotų petnešų pora su funkciniu korpusu. Galite praleisti riestinius skliaustus, jei funkcija susideda iš vienos išraiškos.

Pavyzdžiui:

// Vienas parametras, numanoma grąža
konst functionName = parametras =>konsolė.log("Vieno parametro rodyklės funkcija")
// Keli parametrai, aiški grąža
konst functionName = (parametras_1, parametras_2) => {
grąžinti„Kelių parametrų rodyklės funkcija“
};

Kai praleidžiate riestinius skliaustus, rodyklės funkcija netiesiogiai grąžina vieną išraišką, todėl nereikia grąžinti raktažodį. Kita vertus, jei nepraleidžiate garbanotų skliaustų, turite aiškiai grąžinti reikšmę naudodami grąžinti raktažodį.

Rodyklės funkcijos taip pat skiriasi tai privalomas, palyginti su įprastomis funkcijomis. Įprastose funkcijose reikšmė tai priklauso nuo to, kaip iškviečiate funkciją. Rodyklės funkcija tai visada yra susietas su tai supančios apimties vertę.

Pavyzdžiui:

konst foo = {
 vardas: "Deivis",
 sveikinu: funkcija () {
 setTimeout(() => {
konsolė.log('Sveiki, mano vardas ${tai.vardas}`);
 }, 1000);
 },
};
foo.greet(); // Įrašai "Sveiki, mano vardas Deivis" po 1 sekundės

Aukščiau pateiktame pavyzdyje rodyklės funkcija viduje pasveikinti metodas turi prieigą tai.vardas, nors setTimeout funkcija tai vadina. Įprasta funkcija turėtų savo tai susietas su globaliu objektu.

Kaip rodo pavadinimas, nedelsiant iškviečiama funkcija (IIFE) yra funkcija, kuri paleidžiama iš karto, kai ji yra apibrėžta.

Štai IIFE struktūra:

(funkcija () {
// kodas čia
})();
(() => {
// kodas čia
})();
(funkcija (param_1, param_2) {
konsolė.log (param_1 * param_2);
})(2, 3);

IIFE susideda iš funkcijos išraiškos, įvyniotos į skliaustų porą. Norėdami iškviesti funkciją, atlikite ją su skliaustais už korpuso ribų.

Galite naudoti IIFE, kad sukurtumėte apimtis, slėptumėte diegimo informaciją ir bendrintumėte duomenis tarp kelių scenarijų. Kadaise jie buvo naudojami kaip a modulių sistema JavaScript.

Funkcijos kūrimas įvairiais būdais

Labai svarbu suprasti, kaip kurti funkcijas JavaScript. Tai pasakytina apie pagrindinę funkciją, kuri atlieka paprastą skaičiavimą arba sudėtingą funkciją, kuri sąveikauja su kitomis jūsų kodo dalimis.

Galite naudoti aukščiau aptartus metodus, kad sukurtumėte funkcijas JavaScript ir struktūrizuodami bei tvarkydami savo kodą. Pasirinkite metodą, kuris geriausiai atitinka jūsų poreikius, nes kiekvienas turi įvairių privalumų ir pritaikymo būdų.