Функции
При разработке сложного приложения очень принято снова и снова использовать одни и те же инструкции. Скрипт для магазина электронной коммерции, например, вы должны рассчитать общую цену продуктов несколько раз, чтобы добавить налоги и стоимость доставки.Когда ряд инструкций повторяется снова и снова, исходный код приложения становится слишком сложным, так как:
- Код приложения намного длиннее, потому что многие инструкции повторяются.
- Если вы хотите изменить какую-либо из повторяющихся инструкций, необходимо внести столько изменений, сколько когда-либо была написана эта инструкция, что становится очень тяжелой работой и очень подвержено ошибкам.
Функции являются решением всех этих проблем, как в JavaScript, так и в других языках программирования. Функция — это набор инструкций, которые сгруппированы для выполнения конкретной задачи и могут быть легко использованы повторно.
В следующем примере инструкции, которые суммируют два числа и отображают сообщение с результатом, повторяются снова и снова:
результат;
numero1 = ;
numero2 = 5;
/ / Числа суммируются и отображается результат
результат = число1 + число2;
alert(«результат « + «результат);
число1 = 10;
число2 = 7;
/ / Числа суммируются и отображается результат
результат = число1 + число2;
alert(«результат « + «результат);
число1 = 5;
число2 = 8;
/ / Числа суммируются и отображается результат
результат = число1 + число2;
alert(«результат « + «результат);
…
Хотя это очень простой пример, кажется очевидным, что повторение одних и тех же инструкций по всему коду не рекомендуется. Решение, предлагаемое функциями, состоит в том, чтобы извлечь повторяющиеся инструкции и заменить их инструкцией типа «на данный момент выполняются извлеченные инструкции»:
var результат;
var numero1 = 3;
var numero2 = 5;
/* На этом этапе вызывается функция, которая суммирует
2 числа и показывает результат */
число1 = 10;
число2 = 7;
/* На этом этапе вызывается функция, которая суммирует
2 числа и показывает результат */
число1 = 5;
число2 = 8;
/* На этом этапе вызывается функция, которая суммирует
2 числа и показывает результат */
...
Чтобы решение в приведенном выше примере было действительным, общие инструкции должны быть сгруппированы в функцию, в которую можно указать числа, которые необходимо суммировать перед отображением сообщения.
Таким образом, в первую очередь вы должны создать основную функцию с общими инструкциями. Функции в JavaScript определяются зарезервированным словомfunction
, за которым следует имя функции. Его формальное определение выглядит следующим образом:
function nombre_funcion() {
...
}
Имя функции используется для вызова этой функции, когда это необходимо. Концепция такая же, как и с переменными, которым присваивается уникальное имя, чтобы их можно было использовать в коде. После имени функции включены две круглые скобки, значение которых подробно описано ниже. Наконец, символы {
и }
используются для закрытия всех инструкций, принадлежащих функции (аналогично тому, как инструкции заключены в структурах if
или for
).
Возвращаясь к приведенному выше примеру, создается функция, вызываемая suma_y_muestra
следующим образом:
function suma_y_muestra() {
результат = число1 + число2;
alert("результат " + "результат);
}
Хотя вышеуказанная функция правильно создана , она не работает так, как должна, поскольку в ней отсутствуют «аргументы», которые объясняются в следующем разделе. После создания функции из любой точки кода функция может быть вызвана для выполнения ее инструкций (в дополнение к «вызову функции»также обычно используется выражение «вызов функции»).
Вызов функции выполняется просто указанием ее имени, включая конечные скобки и символ ;
для завершения инструкции:
function suma_y_muestra() {
результат = число1 + число2;
alert("результат " + "результат);
}
var результат;
var numero1 = 3;
var numero2 = 5;
сума_и_метра();
число1 = 10;
число2 = 7;
сума_и_метра();
число1 = 5;
число2 = 8;
сума_и_метра();
...
Код в приведенном выше примере намного эффективнее, чем первый код, который был показан, поскольку нет повторяющихся инструкций. Инструкции, которые суммируют и отображают сообщения, были сгруппированы под функцией, что позволяет запускать их в любой точке программы, просто указав имя функции.
Единственное, чего не хватает в приведенном выше примере для правильной работы, — это возможность указать функции числа, которые она должна суммировать. Когда данные должны быть переданы функции, используются «аргументы», как описано в следующем разделе.
4.1.1. Возвращаемые Аргументы и значения
Самые простые функции не нуждаются в какой-либо информации для получения результатов. Однако большинство функций реальных приложений должны получить доступ к значению некоторых переменных для получения результатов.
Переменные, которые нужны функциям, называются аргументами. Прежде чем вы сможете их использовать, функция должна указать, сколько аргументов вам нужно и каково имя каждого аргумента. Кроме того, при вызове функции должны быть включены значения, которые будут переданы функции. Аргументы указаны в круглых скобках, которые идут за именем функции и разделены запятой (,
).
Следуя приведенному выше примеру, функция должна указать, что ей нужны два аргумента, соответствующие двум числам, которые она должна суммировать:
function suma_y_muestra(primerNumero, segundoNumero) { ... }
Затем, чтобы использовать значение аргументов внутри функции, необходимо использовать то же имя, с которым были определены аргументы:
function suma_y_muestra(primerNumero, segundoNumero) { ... }
var результат = первыйнумеро + вторыйнумеро;
alert("результат " + "результат);
}
Внутри функции значение переменной primerNumero
будет равно первому значению, переданному функции, а значение переменной segundoNumero
будет равно второму значению, переданному ей. Чтобы передать значения функции, они включены в круглые скобки, используемые при вызове функции:
// Определение функции
function suma_y_показывает(первый, второй) { ... }
var результат = первыйнумеро + вторыйнумеро;
alert("результат " + "результат);
}
/ / Объявление переменных
var numero1 = 3;
var numero2 = 5;
/ / Вызов функции
сума_и_маш (число1, число2);
В приведенном выше коде следует отметить, что:
- Хотя переменные почти всегда используются для передачи данных в функцию, вы могли бы непосредственно использовать значение этих переменных:
suma_y_muestra(3, 5);
- Количество аргументов, переданных функции, должно совпадать с количеством аргументов, указанных функцией. Однако JavaScript не показывает никаких ошибок, если передано больше или меньше аргументов, чем необходимо.
- Порядок аргументов имеет решающее значение, поскольку первые данные, указанные в вызове, будут первым значением, которое ожидает функция; второе значение, указанное в вызове, является вторым значением, которое ожидает функция и так далее.
- Вы можете использовать неограниченное количество аргументов, хотя, если их количество очень велико, это чрезмерно усложняет вызов функции.
- Не обязательно совпадать с именем аргументов, используемых функцией, и именем переданных ей аргументов. В приведенном выше примере аргументы, которые передаются, являются
numero1
иnumero2
, а аргументы, которые использует функция, являютсяprimerNumero
иsegundoNumero
.
Ниже приведен еще один пример функции, которая вычисляет общую цену продукта из его базовой цены:
// Определение функции
function calculaPrecioTotal(цена) {
var налоги = 1.16;
var расходы = 10;
var ценаtotal = (цена * налог) + расходыб;
}
/ / Вызов функции
расчет (23.34));
Приведенная выше функция принимает в качестве аргумента вызываемую переменную precio
и добавляет к ней налоги и стоимость доставки, чтобы получить общую цену. При вызове функции основное значение цены передается напрямую по номеру 23.34
.
Тем не менее, приведенный выше код не слишком полезен, так как в идеале функция может вернуть полученный результат, чтобы сохранить его в другой переменной и иметь возможность продолжать работать с этой общей ценой:
function калькулироватальнаяцена (цена) {
var налоги = 1.16;
var расходы = 10;
var ценаtotal = (цена * налог) + расходыб;
}
// Значение, возвращаемое функцией, сохраняется в переменной
var отпускнаяцена = calculaPrecioTotal(23.34);
/ / Продолжить работу с переменной " цена"
К счастью, функции могут не только получать переменные и данные, но и возвращать значения, которые они вычислили. Для возврата значений внутри функции используется зарезервированное слово return
. Хотя функции могут возвращать значения любого типа, они могут возвращать только одно значение каждый раз, когда они выполняются.
function калькулироватальнаяцена (цена) {
var налоги = 1.16;
var расходы = 10;
var ценаtotal = (цена * налог) + расходыб;
return precioTotal;
}
var цена = вычислительная цена (23.34);
/ / Продолжить работу с переменной " цена"
Чтобы функция возвращала значение, необходимо только ввести зарезервированное слово return
вместе с именем возвращаемой переменной. В приведенном выше примере выполнение функции достигает оператора return precioTotal;
и в этот момент возвращает значение, содержащее переменную precioTotal
.
Поскольку функция возвращает значение, в точке, в которой выполняется вызов, должно быть указано имя переменной, в которой сохраняется возвращаемое значение:
var цена = вычислительная цена (23.34);
Если имя переменной не указано, JavaScript не отображает никаких ошибок, а значение, возвращаемое функцией, просто теряется и, следовательно, не будет использоваться в остальной части программы. В этом случае также не обязательно, чтобы имя переменной, возвращаемой функцией, соответствовало имени переменной, в которой должно храниться это значение.
Если функция достигает оператора типаreturn
, возвращается указанное значение, и выполнение функции завершается. Таким образом, все инструкции, включенные после одногоreturn
, игнорируются, и по этой причине инструкция return
обычно является последней из большинства функций.
Чтобы сделать приведенный выше пример более полным, в функцию можно добавить еще один аргумент, указывающий процент налогов, который должен быть добавлен к цене продукта. Очевидно, что новый аргумент должен быть добавлен как к определению функции, так и к ее вызову:
function calculaвобщей цене (цена, процентналог) {
var расходы = 10;
var ценыналог = (1 + процентналог/100) * цена;
var цена = цена налоги + расходы;
return precioTotal;
}
var цена = вычислительная цена (23.34, 16);
var другийцениотал = расчетоталтал (15.20, 4);
Чтобы завершить предыдущее упражнение, общая цена, возвращаемая функцией, может быть сдана до двух десятичных знаков:
function calculaвобщей цене (цена, процентналог) {
var расходы = 10;
var ценыналог = (1 + процентналог/100) * цена;
var цена = цена налоги + расходы;
return precioTotal.toFixed(2);
}
var цена = вычислительная цена (23.34, 16);
Очень конструктивная статья. Все доходчиво и аонянятно…