JavaВизначення сценарію та виклик функцій із прикладом
Джеймс Гартман
⚡ Розумний підсумок
JavaФункції скриптів групують блоки коду повторного використання, які виконуються лише під час виклику, і в цьому покроковому посібнику показано, як оголосити один із них, передавати в нього аргументи та повертати значення назад тому, хто викликає.
Що таке функція в JavaСценарій?
Функції дуже важливі та корисні в будь-якій мові програмування, оскільки вони роблять код придатним для повторного використання. Функція — це блок коду, який буде виконано лише після його виклику. Якщо у вас є кілька рядків коду, які потрібно використовувати кілька разів, ви можете створити функцію, що включає повторювані рядки коду, а потім викликати цю функцію, де завгодно.
Ніщо всередині дужок не виконується самостійно. Браузер зберігає блок під назвою, яку ви йому дали, і код виконується лише тоді, коли ця назва записана з дужками після неї, наприклад myFunction()Таким чином, функції знаходяться в центрі кожного JavaScript програма, чи скрипт працює всередині сторінки або у зовнішньому файлі.
Як створити функцію в JavaScript
- Використовуйте ключове слово функція після чого йде назва функції.
- Після назви функції розкрийте та закрийте дужки.
- Після дужок розкрийте та закрийте фігурні дужки.
- У фігурних дужках напишіть рядки коду.
Синтаксис:
function functionname()
{
lines of code to be executed
}
У наведеному нижче прикладі визначено myFunction() а потім викликає його в наступному рядку, щоб повідомлення з'явилося одразу після завантаження сторінки. Спробуйте самі:
<html>
<head>
<title>Functions!!!</title>
<script type="text/javascript">
function myFunction()
{
document.write("This is a simple function.<br />");
}
myFunction();
</script>
</head>
<body>
</body>
</html>
Функція з аргументами
Ви також можете створювати функції з аргументами. Аргументи слід вказувати в дужках.
Синтаксис:
function functionname(arg1, arg2)
{
lines of code to be executed
}
тут countVowels() отримує будь-яке ім'я, яке відвідувач вводить у запит, перебирає кожен символ і повідомляє, скільки голосних містить ім'я. Спробуйте самі:
<html>
<head>
<script type="text/javascript">
var count = 0;
function countVowels(name)
{
for (var i=0;i<name.length;i++)
{
if(name[i] == "a" || name[i] == "e" || name[i] == "i" || name[i] == "o" || name[i] == "u")
count = count + 1;
}
document.write("Hello " + name + "!!! Your name has " + count + " vowels.");
}
var myName = prompt("Please enter your name");
countVowels(myName);
</script>
</head>
<body>
</body>
</html>
JavaПовернене значення сценарію
Ви також можете створювати функції JS, які повертають значення. Усередині функції вам потрібно використовувати ключове слово повертати а потім значення, яке буде повернуто.
Синтаксис:
function functionname(arg1, arg2) { lines of code to be executed return val1; }
У цьому останньому прикладі returnSum() передає підсумок назад у рядок, який його викликав, щоб результат можна було об'єднати в речення, а не виводити всередині функції. Спробуйте це самі:
<html>
<head>
<script type="text/javascript">
function returnSum(first, second)
{
var sum = first + second;
return sum;
}
var firstNo = 78;
var secondNo = 22;
document.write(firstNo + " + " + secondNo + " = " + returnSum(firstNo,secondNo));
</script>
</head>
<body>
</body>
</html>
Типи функцій у JavaScript
У трьох наведених вище прикладах використовується класичне оголошення функції, але водночас сучасне JavaСкрипт пропонує кілька інших форм. Вони відрізняються головним чином тим, чи двигун їх піднімає, і тим, як кожна з них обробляє this keyword.
| Тип функції | Типовий синтаксис | Коли його використовують |
|---|---|---|
| Оголошення функції | функція greet() { } | Іменована, повторно використовувана логіка; піднята на вершину її області застосування |
| Функціональний вираз | const greet = function() { }; | Зберігання функції у змінній; не піднімається |
| Функція стрілки (ES6) | const greet = () => { }; | Короткі зворотні виклики; успадковує це з навколишньої області видимості |
| Анонімна функція | встановитиЧасОут(функція() { }, 100); | Одноразова логіка передана безпосередньо в іншу функцію |
| IIFE | (функція () { })(); | Виконується негайно та зберігає свої змінні приватними |
| Callback | items.forEach(showItem); | Функція, передана іншій функції та викликана пізніше |
Зверніть увагу на наведені вище приклади: використання історичних зразків var та document.write(), і обидва досі працюють у кожному браузері. Поточна практика оголошує змінні за допомогою let or const і друкує вивід через console.log() або встановивши textContent на елементі, оскільки document.write() стирає сторінку, яка вже завершила завантаження. type="text/javascript" Атрибут також необов'язковий у HTML5.
Параметри функцій, аргументи та значення за замовчуванням
Параметри – це імена-заповнювачі, перелічені у визначенні, тоді як аргументи – це реальні значення, що передаються під час виклику функції. countVowels(name) вище, name — параметр, а текст, введений у запит, — аргумент.
function greet(user, greeting = "Hello") { return greeting + ", " + user; } greet("Ann"); greet("Ann", "Welcome");
- Параметр без відповідного аргумента стає
undefinedякщо не вказано значення за замовчуванням, якgreetingтут. - Додаткові аргументи ігноруються списком параметрів, але залишаються досяжними через
argumentsоб'єкт всередині будь-якої функції, що не є стрілкою. - Параметр спокою, записаний як
...valuesзбирає кожен аргумент, що залишився, у справжній масив.
Обсяг функцій та підйомні роботи JavaScript
Місце написання функції визначає, що вона може бачити та коли її можна викликати. Два правила пояснюють майже кожен сюрприз, з яким стикаються новачки.
- Підйом: Оголошення функцій переміщуються на початок їхньої області видимості перед виконанням скрипта, тому їх можна викликати на рядку вище їхнього визначення. Функціональні вирази та стрілкові функції не піднімаються та викликаються передчасно.
- Сфера застосування: змінні, оголошені за допомогою
varвсередині функції видно по всій цій функції, тоді якletтаconstобмежені блоком, у якому вони знаходяться. Все, що оголошено поза межами кожної функції, є глобальним.
Лічильник голосних показує це на практиці. Його count змінна оголошується поза функцією, тому виклик countVowels() вдруге на тій самій сторінці продовжує додавання до попереднього підсумку замість того, щоб починати з нуля. Переміщення оголошення всередині функції скидатиме його при кожному виклику.
Ці шотландські островиping правила також поширюються на серверний код, тому ті ж міркування застосовуються, коли функції пишуться для Node.js, і чому поведінка функції так часто з'являється в JavaЗапитання для співбесіди щодо сценарію.
