Відмінності між версіями «Підпрограми в JavaScript»

Матеріал з Вікі ЦДУ
Перейти до: навігація, пошук
 
(не показані 4 проміжні версії цього учасника)
Рядок 9: Рядок 9:
 
function <span style="color:green;">ім'я(параметри)</span><br/>  
 
function <span style="color:green;">ім'я(параметри)</span><br/>  
 
{
 
{
<span style="color:green;">код</span>
+
<span style="color:green;">Тіло функції</span>
 
}<br/>
 
}<br/>
 
</font>
 
</font>
Рядок 19: Рядок 19:
 
var <span style="color:green;">ім'я</span> = function(<span style="color:green;">параметри</span>)<br/>  
 
var <span style="color:green;">ім'я</span> = function(<span style="color:green;">параметри</span>)<br/>  
 
{
 
{
<span style="color:green;">код</span>
+
<span style="color:green;">Тіло функції</span>
 
}<br/>
 
}<br/>
 
</font>
 
</font>
Рядок 27: Рядок 27:
 
<code>
 
<code>
 
<font style="font-size:10pt">
 
<font style="font-size:10pt">
var <span style="color:green;">ім'я</span> = new Function(<span style="color:green;">параметри, 'код'</span>)<br/>
+
var <span style="color:green;">ім'я</span> = new Function(<span style="color:green;">параметри, 'Тіло функції'</span>)<br/>
 
</font>
 
</font>
 
</code>
 
</code>
Рядок 36: Рядок 36:
 
<code>
 
<code>
 
<font style="font-size:10pt">
 
<font style="font-size:10pt">
<span style="color:green;">// функція sum визначена нижче її виклику.</span><br/>
+
  <span style="color:green;">// функція sum визначена нижче її виклику.</span>
<span style="color:blue;">var</span> a = sum(1,1);<br/>
+
  <span style="color:blue;">var</span> a = sum(1,1);<br/>
 
+
  <span style="color:blue;">function</span> sum(x,y)
<span style="color:blue;">function</span> sum(x,y)<br/>
+
  {
{<br/>
+
  &nbsp;&nbsp;<span style="color:blue;">return</span> x+y;
&nbsp;&nbsp;<span style="color:blue;">return</span> x+y;<br/>
+
  }
}<br/>
+
  
 
</font>
 
</font>
Рядок 50: Рядок 49:
 
<code>
 
<code>
 
<font style="font-size:10pt">
 
<font style="font-size:10pt">
<span style="color:green;">//При виконанні даного коду  буде отримано помилку так як під час виклику<br/>
+
  <span style="color:green;">//При виконанні даного коду  буде отримано помилку так як під час виклику
//функція sum ще не оголошена<br/></span>
+
  //функція 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)
 +
  {
 +
  &nbsp;&nbsp;<span style="color:blue;">return</span> x+y;
 +
  }
 +
</font>
 +
</code>
  
<span style="color:blue;">var</span> a = sum(1,1);<br/>
+
<h1>Область видимості функції</h1>
 +
Змінні визначені всередині функції невидимі поза цією функцією, так як змінні визначаються в області видимості всередині функції. Будь-яка функція має доступ до всіх змінних та інших функцій які визначені у тій же області видимості де і сама функція була визначена. Іншими словами, функція визначена в глобальній області видимості має доступ до всіх змінних визначених у глобальній області видимості. Функція визначена всередині іншої функції має доступ до всіх змінних визначених у батьківській функції і будь-яких інших змінних до яких має доступ батьківська функція.
  
<span style="color:blue;">var</span> sum = <span style="color:blue;">function</span>(x,y)<br/>
+
'''Приклад'''<br/>
{<br/>
+
<code>
&nbsp;&nbsp;<span style="color:blue;">return</span> x+y;<br/>
+
<font style="font-size:10pt">
}<br/>
+
  <span style="color:green;">// Визначення змінних в глобальній області видимості</span>
 +
  <span style="color:blue;">var</span> num1 = 20,
 +
  &nbsp;&nbsp;num2 = 3,
 +
  &nbsp;&nbsp;name = "Test";
 +
  <span style="color:green;">// Ця функція визначена в глобальній області видимості</span>
 +
  <span style="color:blue;">function</span> multiply() {
 +
  &nbsp;&nbsp;<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,
 +
  &nbsp;&nbsp;&nbsp;&nbsp;num2 = 3;
 +
  <span style="color:green;">//Приклад вкладеної функції</span>
 +
  &nbsp;&nbsp;<span style="color:blue;">function</span> add() {
 +
  &nbsp;&nbsp;&nbsp;&nbsp;<span style="color:blue;">return</span> name + " scored " + (num1 + num2);
 +
  &nbsp;&nbsp;}
 +
  &nbsp;&nbsp;&nbsp;<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)
 +
  {
 +
  &nbsp;&nbsp;y = y||10;
 +
  &nbsp;&nbsp;<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>
 +
При першому запуску функція працює з аргументами х = 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 = [ ];
 +
  &nbsp; <span style="color:blue;">for</span> ( <span style="color:blue;">var</span>  i=0; i<arr.length; i++)
 +
  &nbsp; &nbsp;{
 +
    &nbsp;&nbsp;result[i] = func(arr[i]);
 +
  &nbsp; &nbsp;}
 +
  &nbsp; &nbsp; &nbsp; <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>
 
</font>
 
</code>
 
</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
y = y || 10;
Оператор | | в JavaScript повертає не true / false, а саме значення (перше, яке приводиться до true). Тому його використовують для задання значень за замовчуванням. У нашому виклику y буде обчислено як undefined | | 10 = 10. Тому результат буде 10+10 = 20. Другий запуск - стандартний.
Третій запуск задає кілька додаткових аргументів. У функції не передбачена робота з додатковими аргументами, тому вони просто ігноруються.
Ну і в останньому випадку аргументів взагалі немає, тому 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]