22 KiB

Raw Blame History Unescape Escape

Основи на JavaScript: Методи и функции

Скица от Tomomi Imura

Тест преди лекцията

Писането на един и същ код многократно е едно от най-честите разочарования в програмирането. Функциите решават този проблем, като ви позволяват да опаковате кода в блокове, които могат да се използват многократно. Мислете за функциите като за стандартизирани части, които направиха революция в производствената линия на Хенри Форд – веднъж създадени надеждни компоненти, те могат да се използват навсякъде, където са необходими, без да се налага да се изграждат отново.

Функциите ви позволяват да групирате части от кода, за да можете да ги използвате повторно в цялата програма. Вместо да копирате и поставяте една и съща логика навсякъде, можете да създадете функция веднъж и да я извикате, когато е необходимо. Този подход поддържа кода организиран и прави актуализациите много по-лесни.

В този урок ще научите как да създавате свои собствени функции, да предавате информация на тях и да получавате полезни резултати обратно. Ще откриете разликата между функции и методи, ще научите съвременни синтактични подходи и ще видите как функциите могат да работят с други функции. Ще изградим тези концепции стъпка по стъпка.

🎥 Кликнете върху изображението по-горе за видео за методи и функции.

Можете да вземете този урок на Microsoft Learn!

Функции

Функцията е самостоятелен блок от код, който изпълнява конкретна задача. Тя капсулира логика, която можете да изпълните, когато е необходимо.

Вместо да пишете един и същ код многократно в програмата си, можете да го опаковате във функция и да я извикате, когато ви е необходима. Този подход поддържа кода чист и прави актуализациите много по-лесни. Представете си предизвикателството за поддръжка, ако трябваше да промените логика, разпръсната на 20 различни места в кода ви.

Даването на описателни имена на функциите ви е от съществено значение. Добре назована функция ясно комуникира своята цел – когато видите cancelTimer(), веднага разбирате какво прави, точно както ясно обозначен бутон ви казва какво ще се случи, когато го натиснете.

Създаване и извикване на функция

Нека разгледаме как да създадем функция. Синтаксисът следва последователен модел:

function nameOfFunction() { // function definition
 // function definition/body
}

Нека разгледаме това по-подробно:

Ключовата дума function казва на JavaScript "Хей, създавам функция!"
nameOfFunction е мястото, където давате на функцията си описателно име
Скобите () са мястото, където можете да добавите параметри (ще стигнем до това скоро)
Къдравите скоби {} съдържат действителния код, който се изпълнява, когато извикате функцията

Нека създадем проста функция за поздрав, за да видим това в действие:

function displayGreeting() {
  console.log('Hello, world!');
}

Тази функция отпечатва "Hello, world!" в конзолата. След като я дефинирате, можете да я използвате толкова пъти, колкото е необходимо.

За да изпълните (или "извикате") функцията си, напишете нейното име, последвано от скоби. JavaScript ви позволява да дефинирате функцията си преди или след като я извикате – JavaScript двигателят ще се погрижи за реда на изпълнение.

// calling our function
displayGreeting();

Когато изпълните този ред, той изпълнява целия код вътре във функцията displayGreeting, показвайки "Hello, world!" в конзолата на браузъра ви. Можете да извиквате тази функция многократно.

Note: През тези уроци сте използвали методи. console.log() е метод – по същество функция, която принадлежи на обекта console. Основната разлика е, че методите са прикрепени към обекти, докато функциите са независими. Много разработчици използват тези термини взаимозаменяемо в ежедневни разговори.

Най-добри практики за функции

Ето няколко съвета, които ще ви помогнат да пишете страхотни функции:

Давайте на функциите си ясни, описателни имена – бъдещото ви аз ще ви благодари!
Използвайте camelCasing за имена с повече от една дума (като calculateTotal вместо calculate_total)
Дръжте всяка функция фокусирана върху изпълнението на една задача добре

Предаване на информация на функция

Нашата функция displayGreeting е ограничена – тя може да показва само "Hello, world!" за всички. Параметрите ни позволяват да направим функциите по-гъвкави и полезни.

Параметрите действат като заместители, където можете да вмъкнете различни стойности всеки път, когато използвате функцията. По този начин една и съща функция може да работи с различна информация при всяко извикване.

Изброявате параметрите вътре в скобите, когато дефинирате функцията си, като разделяте множество параметри със запетаи:

function name(param, param2, param3) {

}

Всеки параметър действа като заместител – когато някой извика вашата функция, той ще предостави действителни стойности, които ще бъдат поставени на тези места.

Нека актуализираме нашата функция за поздрав, за да приема името на някого:

function displayGreeting(name) {
  const message = `Hello, ${name}!`;
  console.log(message);
}

Забележете как използваме обратни кавички (`) и ${} за вмъкване на името директно в съобщението – това се нарича шаблонен литерал и е много удобен начин за създаване на низове със смесени променливи.

Сега, когато извикаме функцията си, можем да предадем всяко име:

displayGreeting('Christopher');
// displays "Hello, Christopher!" when run

JavaScript взема низа 'Christopher', присвоява го на параметъра name и създава персонализираното съобщение "Hello, Christopher!"

Стойности по подразбиране

Какво ще стане, ако искаме да направим някои параметри опционални? Тук идват на помощ стойностите по подразбиране!

Да кажем, че искаме хората да могат да персонализират поздравителната дума, но ако не посочат такава, просто ще използваме "Hello" като резервен вариант. Можете да зададете стойности по подразбиране, като използвате знака за равенство, точно както задавате променлива:

function displayGreeting(name, salutation='Hello') {
  console.log(`${salutation}, ${name}`);
}

Тук name все още е задължителен, но salutation има резервна стойност 'Hello', ако никой не предостави друга поздравителна дума.

Сега можем да извикаме тази функция по два различни начина:

displayGreeting('Christopher');
// displays "Hello, Christopher"

displayGreeting('Christopher', 'Hi');
// displays "Hi, Christopher"

При първото извикване JavaScript използва стойността по подразбиране "Hello", тъй като не сме посочили поздравителна дума. При второто извикване използва нашето персонализирано "Hi". Тази гъвкавост прави функциите адаптивни към различни сценарии.

Връщане на стойности

Досега нашите функции просто отпечатваха съобщения в конзолата, но какво ако искате функцията да изчисли нещо и да ви върне резултата?

Тук идват връщаните стойности. Вместо просто да показва нещо, функцията може да ви върне стойност, която можете да съхраните в променлива или да използвате в други части на кода си.

За да изпратите стойност обратно, използвате ключовата дума return, последвана от това, което искате да върнете:

return myVariable;

Ето нещо важно: когато функцията достигне израза return, тя незабавно спира да работи и изпраща тази стойност обратно на този, който я е извикал.

Нека модифицираме нашата функция за поздрав, за да връща съобщението, вместо да го отпечатва:

function createGreetingMessage(name) {
  const message = `Hello, ${name}`;
  return message;
}

Сега, вместо да отпечатва поздрава, тази функция създава съобщението и ни го връща.

За да използваме върнатата стойност, можем да я съхраним в променлива, точно както всяка друга стойност:

const greetingMessage = createGreetingMessage('Christopher');

Сега greetingMessage съдържа "Hello, Christopher" и можем да го използваме навсякъде в кода си – за да го покажем на уеб страница, да го включим в имейл или да го предадем на друга функция.

Функции като параметри за функции

Функциите могат да бъдат предавани като параметри на други функции. Въпреки че тази концепция може да изглежда сложна в началото, тя е мощна функция, която позволява гъвкави програмни модели.

Този модел е много често срещан, когато искате да кажете "когато нещо се случи, направи това друго нещо." Например, "когато таймерът свърши, изпълни този код" или "когато потребителят натисне бутона, извикай тази функция."

Нека разгледаме setTimeout, която е вградена функция, която изчаква определено време и след това изпълнява някакъв код. Трябва да й кажем какъв код да изпълни – идеален случай за предаване на функция!

Опитайте този код – след 3 секунди ще видите съобщение:

function displayDone() {
  console.log('3 seconds has elapsed');
}
// timer value is in milliseconds
setTimeout(displayDone, 3000);

Забележете как предаваме displayDone (без скоби) на setTimeout. Не извикваме функцията сами – предаваме я на setTimeout и казваме "извикай това след 3 секунди."

Анонимни функции

Понякога ви е нужна функция само за едно нещо и не искате да й давате име. Помислете – ако използвате функция само веднъж, защо да затрупвате кода си с допълнително име?

JavaScript ви позволява да създавате анонимни функции – функции без имена, които можете да дефинирате точно там, където са ви нужни.

Ето как можем да пренапишем примера с таймера, използвайки анонимна функция:

setTimeout(function() {
  console.log('3 seconds has elapsed');
}, 3000);

Това постига същия резултат, но функцията е дефинирана директно в извикването на setTimeout, което елиминира нуждата от отделна декларация на функция.

Функции със стрелка

Съвременният JavaScript предлага още по-кратък начин за писане на функции, наречен функции със стрелка. Те използват => (което изглежда като стрелка – разбирате ли?) и са супер популярни сред разработчиците.

Функциите със стрелка ви позволяват да пропуснете ключовата дума function и да пишете по-концизен код.

Ето нашия пример с таймера, използвайки функция със стрелка:

setTimeout(() => {
  console.log('3 seconds has elapsed');
}, 3000);

() е мястото, където биха отишли параметрите (празно в този случай), след това идва стрелката =>, и накрая тялото на функцията в къдрави скоби. Това осигурява същата функционалност с по-концизен синтаксис.

Кога да използвате всяка стратегия

Кога да използвате всеки подход? Практическо правило: ако ще използвате функцията многократно, дайте й име и я дефинирайте отделно. Ако е за една конкретна употреба, обмислете използването на анонимна функция. И двата подхода – функции със стрелка и традиционен синтаксис – са валидни, въпреки че функциите със стрелка са широко разпространени в съвременните JavaScript кодови бази.

🚀 Предизвикателство

Можете ли да обясните с едно изречение разликата между функции и методи? Опитайте!

Предизвикателство с GitHub Copilot Agent 🚀

Използвайте режим Agent, за да завършите следното предизвикателство:

Описание: Създайте библиотека с помощни математически функции, която демонстрира различни концепции за функции, разгледани в този урок, включително параметри, стойности по подразбиране, връщане на стойности и функции със стрелка.

Задача: Създайте JavaScript файл, наречен mathUtils.js, който съдържа следните функции:

Функция add, която приема два параметъра и връща тяхната сума
Функция multiply със стойности по подразбиране за параметрите (вторият параметър по подразбиране е 1)
Функция със стрелка square, която приема число и връща неговия квадрат
Функция calculate, която приема друга функция като параметър и две числа, след което прилага функцията към тези числа
Демонстрирайте извикването на всяка функция с подходящи тестови случаи

Научете повече за режим Agent тук.

Тест след лекцията

Преглед и самостоятелно обучение

Струва си да прочетете малко повече за функциите със стрелка, тъй като те все повече се използват в кодовите бази. Практикувайте писането на функция и след това я пренапишете с този синтаксис.

Задача

Забавление с функции

Отказ от отговорност:
Този документ е преведен с помощта на AI услуга за превод Co-op Translator. Въпреки че се стремим към точност, моля, имайте предвид, че автоматизираните преводи може да съдържат грешки или неточности. Оригиналният документ на неговия роден език трябва да се счита за авторитетен източник. За критична информация се препоръчва професионален човешки превод. Ние не носим отговорност за каквито и да е недоразумения или погрешни интерпретации, произтичащи от използването на този превод.

22 KiB Raw Blame History Unescape Escape