Відмінності між версіями «Підпрограми в JavaScript»
(не показані 9 проміжних версій 3 учасників) | |||
Рядок 1: | Рядок 1: | ||
− | + | <h1>Підпрограми</h1> | |
− | + | При створенні програми розумно виділити в ній логічно незалежні частини (підпрограми). Кожну частину при необхідності можна розбити на окремі підпрограми і т. д. Розбиття програми на підпрограми полегшує процес відлагодження, оскільки дозволяє відлагоджувати кожну підпрограму окремо. Один раз створену і відлагоджену підпрограму можна використовувати довільну кількість разів. У багатьох мовах програмування поняття підпрограми реалізується за допомогою конструкцій процедур, функцій, модулів і т.д. Основним елементом для реалізації підпрограм в мові JavaScript є функція. | |
− | + | <h1>Створення та використання функцій</h1> | |
− | + | В мові програмування JavaScript функції поділяються на іменовані функції та анонімні. Основна їх відмінність в тому, що доступ до іменованої функції можна отримати скрізь, а до анонімної - тільки після її оголошення. | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | </font></ | + | '''Синтаксис оголошення іменованої функції'''<br/> |
− | + | <code> | |
+ | <font style="font-size:10pt"> | ||
+ | function <span style="color:green;">ім'я(параметри)</span><br/> | ||
+ | { | ||
+ | <span style="color:green;">Тіло функції</span> | ||
+ | }<br/> | ||
+ | </font> | ||
+ | </code> | ||
− | + | '''Синтаксис оголошення анонімної функції'''<br/> | |
− | + | <code> | |
+ | <font style="font-size:10pt"> | ||
+ | var <span style="color:green;">ім'я</span> = function(<span style="color:green;">параметри</span>)<br/> | ||
+ | { | ||
+ | <span style="color:green;">Тіло функції</span> | ||
+ | }<br/> | ||
+ | </font> | ||
+ | </code> | ||
− | + | або<br/> | |
+ | <code> | ||
+ | <font style="font-size:10pt"> | ||
+ | var <span style="color:green;">ім'я</span> = new Function(<span style="color:green;">параметри, 'Тіло функції'</span>)<br/> | ||
+ | </font> | ||
+ | </code> | ||
− | + | Причому синтаксис new Function використовується досить рідко, в основному для отримання функції з тексту, наприклад, динамічно завантаженого з сервера в процесі виконання скриптів. | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | </font></ | + | '''Приклад оголошення та використання іменованої функції'''<br/> |
+ | <code> | ||
+ | <font style="font-size:10pt"> | ||
+ | <span style="color:green;">// функція sum визначена нижче її виклику.</span> | ||
+ | <span style="color:blue;">var</span> a = sum(1,1);<br/> | ||
+ | <span style="color:blue;">function</span> sum(x,y) | ||
+ | { | ||
+ | <span style="color:blue;">return</span> x+y; | ||
+ | } | ||
− | + | </font> | |
− | < | + | </code> |
− | + | '''Приклад оголошення та використання анонімної функції'''<br/> | |
− | + | <code> | |
− | + | <font style="font-size:10pt"> | |
− | + | <span style="color:green;">//При виконанні даного коду буде отримано помилку так як під час виклику | |
− | </font></code> | + | //функція sum ще не оголошена</span> |
+ | <span style="color:blue;">var</span> a = sum(1,1);<br/> | ||
+ | <span style="color:blue;">var</span> sum = <span style="color:blue;">function</span>(x,y) | ||
+ | { | ||
+ | <span style="color:blue;">return</span> x+y; | ||
+ | } | ||
+ | </font> | ||
+ | </code> | ||
− | + | <h1>Область видимості функції</h1> | |
+ | Змінні визначені всередині функції невидимі поза цією функцією, так як змінні визначаються в області видимості всередині функції. Будь-яка функція має доступ до всіх змінних та інших функцій які визначені у тій же області видимості де і сама функція була визначена. Іншими словами, функція визначена в глобальній області видимості має доступ до всіх змінних визначених у глобальній області видимості. Функція визначена всередині іншої функції має доступ до всіх змінних визначених у батьківській функції і будь-яких інших змінних до яких має доступ батьківська функція. | ||
− | + | '''Приклад'''<br/> | |
− | <code><font color=" | + | <code> |
+ | <font style="font-size:10pt"> | ||
+ | <span style="color:green;">// Визначення змінних в глобальній області видимості</span> | ||
+ | <span style="color:blue;">var</span> num1 = 20, | ||
+ | num2 = 3, | ||
+ | name = "Test"; | ||
+ | <span style="color:green;">// Ця функція визначена в глобальній області видимості</span> | ||
+ | <span style="color:blue;">function</span> multiply() { | ||
+ | <span style="color:blue;">return</span> num1 * num2; | ||
+ | }<br/> | ||
+ | multiply(); <span style="color:green;">// функція поверне 60</span><br/> | ||
+ | <span style="color:blue;">function</span> getScore () { | ||
+ | <span style="color:blue;">var</span> num1 = 2, | ||
+ | num2 = 3; | ||
+ | <span style="color:green;">//Приклад вкладеної функції</span> | ||
+ | <span style="color:blue;">function</span> add() { | ||
+ | <span style="color:blue;">return</span> name + " scored " + (num1 + num2); | ||
+ | } | ||
+ | <span style="color:blue;">return</span> add(); | ||
+ | }<br/> | ||
+ | getScore(); <span style="color:green;">// функція поверне "Test scored 5"</span> | ||
− | + | </font> | |
− | + | </code> | |
− | + | <h1>Параметри функції</h1> | |
+ | Функції в JavaScript можна запускати з будь-яким числом параметрів. | ||
+ | Якщо в функцію передано менше параметрів, ніж є у визначенні, то відсутні параметри отримують значення undefined. | ||
− | + | '''Приклад виклику функції з різною кількістю параметрів'''<br/> | |
− | + | <code> | |
− | + | <font style="font-size:10pt"> | |
− | + | <span style="color:blue;">var</span> add = <span style="color:blue;">function</span>(x,y) | |
− | + | { | |
− | + | y = y||10; | |
− | + | <span style="color:blue;">return</span> x+y; | |
− | + | }<br/> | |
− | + | <span style="color:green;">// 1) add(10)=>20 | |
− | + | // 2) add(10,2)=>12 | |
− | + | // 3) add(10,2,5,6,7)=>12 | |
− | + | // 4) add() => undefined + 10 =>NaN</span> | |
− | + | ||
− | + | ||
− | </font></code> | + | </font> |
+ | </code> | ||
+ | При першому запуску функція працює з аргументами х = 10, у = undefined. Зазвичай така ситуація, якщо вона підтримується функцією, передбачає значення за замовчуванням:<br/> | ||
+ | <code> | ||
+ | <font style="font-size:10pt"> | ||
+ | <span style="color:green;">// Якщо у – хибне значення (undefined, 0, false...) - підставити 10</span><br/> | ||
+ | y = y || 10;<br/> | ||
+ | </font> | ||
+ | </code> | ||
+ | Оператор | | в JavaScript повертає не true / false, а саме значення (перше, яке приводиться до true). | ||
+ | Тому його використовують для задання значень за замовчуванням. У нашому виклику y буде обчислено як undefined | | 10 = 10. Тому результат буде 10+10 = 20. | ||
+ | Другий запуск - стандартний.<br/> | ||
+ | Третій запуск задає кілька додаткових аргументів. У функції не передбачена робота з додатковими аргументами, тому вони просто ігноруються.<br/> | ||
+ | Ну і в останньому випадку аргументів взагалі немає, тому x = undefined, і маємо результат додавання undefined+10 = NaN (Not-A-Number, сталася помилка).<br/> | ||
− | + | '''Передача функції в якості параметра іншої функції'''<br/> | |
+ | Слід зауважити що в якості параметра будь-якої функції можна передавати іншу функцію.<br/> | ||
+ | '''Приклад''' | ||
+ | <code> | ||
+ | <font style="font-size:10pt"> | ||
+ | <span style="color:blue;">var</span> map = <span style="color:blue;">function</span>(func, arr) { | ||
+ | <span style="color:blue;">var</span> result = [ ]; | ||
+ | <span style="color:blue;">for</span> ( <span style="color:blue;">var</span> i=0; i<arr.length; i++) | ||
+ | { | ||
+ | result[i] = func(arr[i]); | ||
+ | } | ||
+ | <span style="color:blue;">return</span> result; | ||
+ | } | ||
+ | </font> | ||
+ | </code> | ||
+ | В даному прикладі функція map бере функцію func, і застосовує її до кожного елементу масиву arr і повертає результуючий масив.<br/> | ||
+ | '''Приклади використання:'''<br/> | ||
+ | <code> | ||
+ | <font style="font-size:10pt"> | ||
+ | map(func, [1, 2, 3]);<br/> | ||
+ | </font> | ||
+ | </code> | ||
+ | Або можна створити анонімну функцію прямо під час виклику map<br/> | ||
+ | <code> | ||
+ | <font style="font-size:10pt"> | ||
+ | map( <span style="color:blue;">function</span> (a) { <span style="color:blue;">return</span> a*3 } , [1,2,3]) | ||
+ | <span style="color:green;">// = [3,6,9]</span><br/> | ||
+ | </font> | ||
+ | </code> |
Поточна версія на 16:10, 19 травня 2013
Зміст
Підпрограми
При створенні програми розумно виділити в ній логічно незалежні частини (підпрограми). Кожну частину при необхідності можна розбити на окремі підпрограми і т. д. Розбиття програми на підпрограми полегшує процес відлагодження, оскільки дозволяє відлагоджувати кожну підпрограму окремо. Один раз створену і відлагоджену підпрограму можна використовувати довільну кількість разів. У багатьох мовах програмування поняття підпрограми реалізується за допомогою конструкцій процедур, функцій, модулів і т.д. Основним елементом для реалізації підпрограм в мові JavaScript є функція.
Створення та використання функцій
В мові програмування JavaScript функції поділяються на іменовані функції та анонімні. Основна їх відмінність в тому, що доступ до іменованої функції можна отримати скрізь, а до анонімної - тільки після її оголошення.
Синтаксис оголошення іменованої функції
function ім'я(параметри)
{
Тіло функції
}
Синтаксис оголошення анонімної функції
var ім'я = function(параметри)
{
Тіло функції
}
або
var ім'я = new Function(параметри, 'Тіло функції')
Причому синтаксис new Function використовується досить рідко, в основному для отримання функції з тексту, наприклад, динамічно завантаженого з сервера в процесі виконання скриптів.
Приклад оголошення та використання іменованої функції
// функція sum визначена нижче її виклику. var a = sum(1,1);
function sum(x,y) { return x+y; }
Приклад оголошення та використання анонімної функції
//При виконанні даного коду буде отримано помилку так як під час виклику //функція sum ще не оголошена var a = sum(1,1);
var sum = function(x,y) { return x+y; }
Область видимості функції
Змінні визначені всередині функції невидимі поза цією функцією, так як змінні визначаються в області видимості всередині функції. Будь-яка функція має доступ до всіх змінних та інших функцій які визначені у тій же області видимості де і сама функція була визначена. Іншими словами, функція визначена в глобальній області видимості має доступ до всіх змінних визначених у глобальній області видимості. Функція визначена всередині іншої функції має доступ до всіх змінних визначених у батьківській функції і будь-яких інших змінних до яких має доступ батьківська функція.
Приклад
// Визначення змінних в глобальній області видимості var num1 = 20, num2 = 3, name = "Test"; // Ця функція визначена в глобальній області видимості function multiply() { return num1 * num2; }
multiply(); // функція поверне 60
function getScore () { var num1 = 2, num2 = 3; //Приклад вкладеної функції function add() { return name + " scored " + (num1 + num2); } return add(); }
getScore(); // функція поверне "Test scored 5"
Параметри функції
Функції в JavaScript можна запускати з будь-яким числом параметрів. Якщо в функцію передано менше параметрів, ніж є у визначенні, то відсутні параметри отримують значення undefined.
Приклад виклику функції з різною кількістю параметрів
var add = function(x,y) { y = y||10; return x+y; }
// 1) add(10)=>20 // 2) add(10,2)=>12 // 3) add(10,2,5,6,7)=>12 // 4) add() => undefined + 10 =>NaN
При першому запуску функція працює з аргументами х = 10, у = undefined. Зазвичай така ситуація, якщо вона підтримується функцією, передбачає значення за замовчуванням:
// Якщо у – хибне значення (undefined, 0, false...) - підставити 10
Оператор | | в JavaScript повертає не true / false, а саме значення (перше, яке приводиться до true).
Тому його використовують для задання значень за замовчуванням. У нашому виклику y буде обчислено як undefined | | 10 = 10. Тому результат буде 10+10 = 20.
Другий запуск - стандартний.
y = y || 10;
Третій запуск задає кілька додаткових аргументів. У функції не передбачена робота з додатковими аргументами, тому вони просто ігноруються.
Ну і в останньому випадку аргументів взагалі немає, тому x = undefined, і маємо результат додавання undefined+10 = NaN (Not-A-Number, сталася помилка).
Передача функції в якості параметра іншої функції
Слід зауважити що в якості параметра будь-якої функції можна передавати іншу функцію.
Приклад
var map = function(func, arr) { var result = [ ]; for ( var i=0; i<arr.length; i++) { result[i] = func(arr[i]); } return result; }
В даному прикладі функція map бере функцію func, і застосовує її до кожного елементу масиву arr і повертає результуючий масив.
Приклади використання:
map(func, [1, 2, 3]);
Або можна створити анонімну функцію прямо під час виклику map
map( function (a) { return a*3 } , [1,2,3])
// = [3,6,9]