Функции в JavaScript

Функция представляет собой именованный блок операторов, для выполнения которых, к блоку нужно обратиться через его имя. Имя функции представляет собой ссылку на область памяти, где хранится блок операторов. По имени функции можно ссылаться на блок, операторы которого выполнятся один раз.

Для чего нужны функции? Когда в программе требуется несколько или множество раз использовать один и тот же код, его объединяют в функцию. Это значительно экономит время программиста и улучшает читабельность кода. Но это еще не все преимущества функций. Подробнее другие их возможности разберем далее.

Объявление и вызов функции

Объявление функции — это ее описание: имя функции, параметры, добавление в блок операторов. Вызов функции — обращение к ее операторам по ссылке, которые тут же начинают выполняться от первого и до последнего. Как только последний оператор функции выполнится, интерпретатор переходит к выполнению остального кода программы.

Пример:

// Объявление функции

function addition(){
var a = 5;
var b = 5;
var c = a+b;
alert(c);
}

// Вызов функции

addition(); // На экран будет выведено 10

Пояснение к примеру:

• function — оператор который указывает на объявление функции;
• addition — имя функции и ссылка для ее вызова;
• () — скобки для вставки параметров (в нашем случае функция без параметров, поэтому скобки пустые, но их употребление обязательно);
• {операторы} — блок кода функции, при вызове которой будут выполняться операторы внутри него;
• addition() — вызов функции.

Если внимательно посмотреть на код, то становится очевидным тот факт, что вызов функции не требует повторного написания ее операторов. Вызов осуществляется в одну строчку. В этом основное преимущество всех функций — экономия времени программиста и оптимизация кода.

Функция может возвращать значение

В предыдущем примере мы объявили и вызвали функцию addition(), которая попросту складывала два числа и выводила сумму на экран. Специальный оператор «return» возвращает результат сложения. Данный результат можно сохранить в переменную и использовать в дальнейшем.

Пример:

// Объявление функции

function addition(){
var a = 5;
var b = 5;
var c = a+b;
return c; // вставим в блок кода оператор return
}

addition(); // возврат результата переменной c
alert(addition()); // выведет 10
var x = addition(); // в переменной x будет 10

Стоит обратить внимание на последний оператор примера. Приоритет операций в нем такой:

• Выполнение функции addition().
• Возврат полученного значения, в нашем случае это то, что сохранено в переменной c — значение 10.
• Присвоение этого значения переменной x.

Переменной может быть присвоена функция

Переменной можно присвоить не только возвращаемое из функции значение, но и сам блок операторов. В этом случае функция может вызываться как по своему имени, так и имени переменной.

Пример:

function addition(){
var a = 5;
var b = 5;
var c = a+b;
alert(c);
}

var x = addition; // Сохраняем тело функции без скобок
x(); // Выведет 10 // Вызов функции через переменную x

При сохранении имени переменной в переменную, нужно убрать скобки. Только так будет присвоен блок операторов новой ссылке. Если написать скобки, то функция вызовется, а переменной будет присвоено undefined.

Параметры функции

Параметры позволяют вызывать функцию и передавать ей различные значения, которые влияют на возвращаемый ей результат. Синтаксис функции с параметрами следующий:

function func_name(param1, …param_n){ операторы }

Параметры передаются в скобки. Из количество может быть от одного до бесконечности. В параметры можно передать любое значение из допустимых типов данных в JavaScript. Параметры отделяются друг от друга запятыми.

Пример:

function addition(x, y){ // Объявляем функцию с параметрами x и y
var a = x; // В локальные переменные сохраняем значение параметров при вызове функции
var b = y;
var c = a+b;
alert(c);
}

// Вызов функции с параметрами

addition(10, 12); // сложение 10 и 12 выведет сумму 22
addition(«aa», «bb»); // конкатенация строк с результатом aabb
addition(244, «bbb»); // выведет 244bbb

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

Пример: Аргумент массив

numbers = [1,2,3,4,5,6]; // Объявляем массив

function showArr(array){ функция с одним параметром массивом.
for(x in array){ // перебор массива
document.write(array[x]);
}
}

showArr(numbers); // 1,2,3,4,5,6
showArr(12); // Ошибка
showArr(«vvvvvv»); // vvvvv, так как строка это массив символов
showArr(1,3,5,6,3,5); // Ошибка — функция рассматривает числа как множество параметров

Код в блоке переменной действует только на массивы. Если передать в функцию одно число, то будет ошибка. Нельзя функции передать множество чисел через запятую, так как в ней предусмотрен один параметр — в этом случае она будет рассматривать числа как множество аргументов.

Пример: Функция как параметр

function b(){ // Объявляем функцию, которая будет использоваться как параметр
alert(«Hello»);
}

function addition(func){ параметр функция
var a = 5;
var b = 5;
var c = a+b;
alert(c);
func(); вызов функции-параметра
}

addition(b); // Выведет 10 из основной функции и Hello из второй функции

Не обязательно в параметр добавлять заранее объявленную функцию. Объявить ее можно прямо в параметре без имени. В таком случае функция будет анонимной.

Пример:

function addition(func){
var a = 5;
var b = 5;
var c = a+b;
alert(c);
func(); вызов функции-параметра
}

addition(function b(){alert(«Hello»);}); // Объявление анонимной функции прямо в параметре
// Результат: 10 Hello

Вложенные функции

Вложенные функции позволяют инкапсулировать отдельные функции и убрать их с глобального контекста программы, вставив их в тело функции.

Пример:

function addition(){
function b(){ // Объявляем внутреннюю функцию
alert(«Hello»);
}

var a = 5;
var b = 5;
var c = a+b;
alert(c);
b(); // Вызов внутренней функции
}

addition(); // 10 Hello
addition()(); // Hello

Обратите внимание на второй вызов функции с двумя скобками! Таким образом вызывается внутренняя функция основной функции. Выполнение операторов основной функции пропускается, но выполняются только те, которые находятся в блоке внутренней функции. Проще говоря, так мы вызываем внутреннюю функцию отдельно.

Область видимости: контекст, локальные и глобальные переменные

Переменные и функции, объявленные вне блоков являются глобальными. Переменные становятся свойствами объекта Window, функции — его методами. Конструкция var x = 10 — это сокращенный вид объявления переменной. Полное объявление: window.x = 10. То же самое касается и функций.

Локальные переменные и функции — это те, которые объявлены внутри глобальной функции. Локальные переменные обладают областью видимости только внутри функции. Обратиться к ним из глобального контекста невозможно. Однако функция и даже локальная функция имеет доступ к глобальны переменным.

Пример: Контексты

// Глобальный контекст
var x = 5;
var y = 10;

function c(){
var x = 10; // локальные переменные
var y = 20;
return x+y;
}

с(); // функция отработала

alert(x); // 5
alert(y); // 10

Глобальные переменные не изменились, так как внутри функции были объявлены локальные переменные, имена которых, соответствует глобальным. Чтобы образаться внутри функции к глобальным переменным, нужно убрать оператор «var».

Пример:

var x = 5;
var y = 10;

function c(){
x = 10; // запись новых значений в глобальные переменные
y = 20;
return x+y;
}

с(); // функция отработала и вывела 30

alert(x); // 10 — значение глобальной переменной заменено через функцию
alert(y); // 20

Есть несколько правил касательно контекста:

1. Все глобальные функции имеют доступ к глобальным переменным и локальным переменным своего блока.
2. Все локальные функции имеют доступ к своим переменным, переменным основной функции и глобальным переменным.
3. Параметры функции считаются локальными переменными.

Функция, в которой есть вложенная функция со своими локальными переменными, не имеет доступ к переменным локальной функции.

Вложенная функция в глобальную функцию обладает более низким контекстом, а вложенная функция во вложенную функцию еще низшим. Однако функции с низки контекстом обладают доступом к локальным переменным функций высшего контекста. Но функции высшего контекста не имеют доступа к локальным переменным, находящимся в блоках более низкого уровня.

Вызов функции до ее объявления

В коде можно сначала вызвать функцию, а затем ее объявить. Соль этого в том, что функция сработает.

Пример:

с(); // Сначала вызвали функцию и она вернула 30

function c(){ // Объявление идет после вызова
var x = 10;
var y = 20;
return x+y;
}

Почему так произошло? Дело в том, что так устроен интерпретатор Javascript. Вызов функции — это обращение к памяти с заранее сохраненным блоком с инструкциями. Объявление функции — сохранение блока инструкция в память.

При выполнении скрипта, интерпретатор сначала проходит по участкам кода, где объявлены переменные, функции, классы и т.п. Затем он переходит к операторам обращения к памяти. Обращение к памяти — это: выполнение функций, изменение значений переменных или обращение к ним. В нашем случае, сначала блок кода функции c() был сохранен в память и этому блоку была присвоена ссылка «c». Затем интерпретатор перешел в место вызова функции и выполнил блок кода.

Не важно в каком месте будет объявление функции и оператор ее вызова. Интерпретатор всегда сначала сохраняет все объявления в память, а затем выполняет операторы действия. Объявление функции — сохранение данных в память (выполняется первым). Вызов функции — выполнение операторов (выполняется вторым в порядке очереди).

Функция как объект класса Function

Функции можно объявлять как объекты через конструкцию new Function (arguments, block_of_operators). Параметры конструктора строковые. Если аргументов несколько то, они указываются через запятую. Если тело функции без аргументов, то первый параметр можно опустить.

Пример:

var func = new Function(«a», «b», «alert(a+b)»); // Объявление функции с двумя параметрами

var func = new Function( «alert(‘Hello’)»); // Объявление функции без параметров

Функция, объявленная таким образом или через оператор «function» является объектом. Однако если проверить имя функции через оператор typeof, то будет выведено «function» — это особенность оператора typeof. Функция — это объект класса Function. А раз функция является объектом, значит у нее есть свойства и методы.

Свойства и методы Function.prototype

Класс Function обладает следующими свойства и методами, которые получают все объявляемые функции:

• constructor — свойство возвращает функцию конструктор Function.
• arguments[] — массив аргументов, передаваемых в функцию, у этого массива есть свойство length. массив не свойство, но локальная переменная.
• prototype — ссылка на свойства и методы класса Function, также используется для добавления в класс новых методов и свойств.
• call() — метод для привязки функции к контексту определенного объекта.
• apply() — то же, что и call(), только может получать массив аргументов.
• bind() — также используется для привязки контекста.

Рекурсия

Рекурсия — это способ объявления функции, которая при выполнении, вызывает саму себя. Этот цикл может длиться бесконечно. Однако если установить условие, то самовызова функции будет длиться до определенного момента.

Пример:

function multiply(a, s) {
if (s == 1) {
return a;
} else {
return a * multiply(a, s — 1);
}
}

alert( pow(2, 3) ); // Выведет 8

Рекурсия подобна циклу, только используется реже ввиду наличия более простых конструкций for, while.

Функция как конструктор для создания объектов

Функция может выполнять роль нового прототипа.

Пример:

function X(a, b, c){ //функция-конструктор, this — ссылка на текущий объект
this.f = a;
this.h = b;
this.o = c;
}

var z = new X(«Hello», 12, [1,2,3,4]); // Создаем новый объект. Значения параметров передаются в свойства

alert(z.a); // Hello
alert(z.b); // 12
alert(z.c); // [1,2,3,4]

В конструктор можно добавлять и методы аналогичным способом. Для того, чтобы в программе снабдить класс новым свойством или методом, без ручного вмешательства в код, необходимо использовать конструкцию X.prototype.prop = value. Здесь prop является именем нового свойства или метода, а value значением свойства или телом метода.

Итог

Функция является блоком кода, который объявляется один раз и вызывается множество раз в одну строчку. Функция — это объект, у которого есть свои свойства и методы. Функция может быть конструктором объектов.