Функции JavaScript
В этой главе:
Функции – это один из основных способов объединения операторов в логически связанные блоки. В языке JavaScript функция представляет собой группу выражений, служащих для выполнения какой-либо определенной задачи, объединенных под общим именем.
В отличие от большинства других языков программирования, JavaScript не делает различий между собственно функциями и процедурами. Подобно функциям, процедуры так же представляют собой программные блоки. Однако результаты выполнения процедур непосредственно сказываются на выполнении программы, в то время как функции должны возвращать значения. С этой точки зрения функции JavaScript можно рассматривать и как процедуры.
Определение и вызов функций
Прежде, чем вызывать и использовать функцию, ее надо определить. Определение функций в JavaScript имеет следующий синтаксис:
function ИмяФункции (аргументы) {
блок выражений
}
Таким образом, функция состоит из следующих частей, предваряемых ключевым словом function:
- идентификатора, определяющего имя функции;
- списка аргументов, заключенного в круглые скобки и разделенного запятыми;
- операторов JavaScript, заключенных в фигурные скобки. Эти операторы могут включать вызовы других функций или даже самой этой функции (рекурсия).
В простейшем случае аргументы могут отсутствовать, а блок операций моет быть представлен единственным оператором:
function MyFirstFunc () {
var MyMessage="Это – моя функция!";
alert(MyMessage);
}
Здесь мы определили функцию, которая будет выдавать окно с сообщением «Это – моя функция!». Следует заметить, что даже если функция не принимает никаких аргументов, она все равно должна иметь пару круглых скобок после своего названия.
ВНИМАНИЕ
Важное замечание следует сделать по поводу переменных, объявляемых в теле функций. Такие переменные видны программе только внутри той функции, в которой они определены. Так, в примере с MyFirstFunc, доступ к переменной MyMessage возможен только внутри этой функции, но не вне нее.
Но чаще всего функции все-таки принимают какие-либо значения в качестве своих аргументов. Возьмем для примера ранее рассмотренный блок, вычисляющий список чисел, на которые 100 делится без остатка. Если этот блок вынести в отдельную функцию, то можно будет использовать его для того, чтобы выводить список делителей для любого числа. Для этого нам потребуется всего один аргумент, который и будет определять число, для которого нам нужно получить такой список:
function remainder_free(j) {
var i=0;
while (i<j) {
i++;
if (j%i != 0) continue;
document.writeln(i);
};
}
В этом случае значение переменной j функция получает при своем вызове. И как раз тут важно учесть, тот факт, что когда браузер загружает документ и интерпретирует объявление функции, он только считывает ее в память. А для того чтобы функция была выполнена, ее надо вызвать. Вызов функции может производиться из любого места JavaScript программы, и имеет такой вид:
ИмяФункции(параметры)
ИмяФункции означает имя ранее объявленной функции, а параметры – список из одного или нескольких значений, разделенных запятыми и передаваемых функции в качестве аргументов. Количество и порядок параметров, передаваемых функции, должен точно соответствовать списку аргументов, указанных при объявлении функции. Так, для случая с только что рассмотренной функцией поиска целых делителей, где используется 1 аргумент, вызов функции может быть таким:
remainder_free(100);
Если параметров будет меньше или больше чем надо, то в первом случае недостающим параметрам будет назначено значение NaN, а во втором – лишние параметры будут проигнорированы. Таким образом, следующие варианты вызова этой же функции не являются верными:
remainder_free; // так функции не вызывают вообще
remainder_free(); // недостаточно параметров
remainder_free(100,0); // лишний параметр
В случае если функция вызывается не просто как процедура (как только что рассмотренная), а именно как функция, т.е. если она должна возвращать значение, то в ней должен содержаться специальный оператор return, в котором указывается выражение, значение которого возвращает функция. Например, если требуется создать функцию, которая будет принимать в качестве аргумента число, и возвращать его третью степень, то она может выглядеть примерно так:
function cube(value) {
return value * value * value;
}
Таким образом, чтобы в любом месте программы вычислить значение числа в 3-й степени, достаточно написать такое выражение:
var x = cube(3);
В результате выполнения этого выражения переменной x будет присвоено значение 27. Примеры вызова функций вы можете посмотреть в JavaScript-калькуляторе (файл calc.html).
Как уже отмечалось, функции могут содержать в себе вызовы других функций. Например, в случае с поиском делителей можно было бы вывести, к примеру, не сами делители, а их 3-ю степень, для чего из функции remainder_free вызывалась бы функция cube:
function remainder_free(j) {
var i=0, ic=0;
while (i<j) {
i++;
if (j%i != 0) continue;
ic = cube(i);
document.writeln(ic);
};
}
Таким образом, функции можно вызывать друг и друга, управляя тем самым ходом исполнения сценария.
Вложение функций и рекурсия
Как и в некоторых других языках программирования (например, как в Паскале), функции в JavaScript могут быть вложенными. Суть использования вложенных функций состоит в том, что такая локальная функция не видна из других частей программы, что может быть удобными при разработке достаточно больших проектов, например, чтобы исключить переопределения имен переменных. Допустим, если бы рассмотренная нами функция cube была бы ненужной по ходу всего сценария, за исключением одного частного случая (скажем, функции, складывающей кубы двух чисел), то можно было бы сделать ее вложенной:
function AddCubes(x,y) {
function cube(value) {
return value * value * value;
};
return cube(x) + cube(y);
}
В данном случае определена функция AddCubes, внутри которой определена еще одна функция – cube. При этом следует учитывать, что для вложенной функции видны переменные, используемые во внешней («наружной») функции, но не наоборот. В то же время сама вложенная функция доступна только для выражений из внешней функции: в данном случае функцией cube можно будет воспользоваться только из функции AddCubes.
Язык JavaScript поддерживает также и такую весьма полезную возможность, как рекурсивный вызов функций, или просто рекурсию. Под рекурсией понимают вызов функции из самой себя. Рассмотрим этот вопрос на следующем примере:
function recfunc(x) {
x--;
if (x>5) recfunc(x);
alert(x);
}
Здесь мы объявили функцию recfunc, принимающую один аргумент, и вызывающую саму себя до тех пор, пока значение этого аргумента больше 5. Хотя на первый взгляд может показаться, что такое поведение функции похоже на обычный цикл, на самом деле все работает несколько по-иному: если вы вызовите ее со значением 8, то она выдаст вам 3 сообщения в следующей последовательности: 5, 6, 7. Иначе говоря, функция вызывала саму себя до тех пор, пока значение x было больше 5, и собственно вывод сообщений начала 3-я по уровню получившейся вложенности функция, которая и вывела первое сообщение (в данном случае им стало декрементированное 6, т.е. 5).
Массивы аргументов
В языке JavaScript аргументы функции могут рассматриваться как массив. Для обращения к массиву аргументов используется следующий синтаксис:
arguments[i];
ИмяФункции.arguments[i];
Здесь i должно быть целым числом, являющимся порядковым номером аргумента, при этом отсчет аргументов начинается с нуля. В случае, когда обращение к массиву аргументов происходит из самой функции, имя функции можно опустить. Чтобы узнать число аргументов, используйте выражение свойство массива length:
arguments.length;
Использование массива аргументов призвано разрешить задачу вызова функции с числом аргументов, превышающим указанное при определении функции. Это может быть полезным в том случае, если вы не знаете заранее, сколько аргументов должна принять функция. В таком случае при описании функции обычно определяют только обязательные аргументы, а с остальными работают через массив. Допустим, нам нужно написать функцию, которая будет склеивать несколько строк при помощи указанного разделителя. В таком случае нам требуется определить только один аргумент – разделитель, а все остальные значения такая функция должна будет принимать через массив аргументов:
function ConcatSeparated(separator) {
result=""; // инициализируем возвращаемое значение
for (var i=1; i<arguments.length; i++) // обход всех аргументов в массиве
{
result = result + arguments[i] + separator; // собственно склеивание
};
return result; // возврат результата
}
Эта функция будет возвращать одну строку, состоящую из списка аргументов, начиная со второго, и «склеенную» первым аргументом. Пример ее использования можно посмотреть в файле argarray.html.
Но, на самом деле, применение массива аргументов позволяет обходиться вообще без объявления параметров. Допустим, нам нужна функция, возвращающая среднее значение нескольких чисел. Как известно, для этого достаточно сложить все числа и разделить результат на их количество. Соответственно, нам пригодится свойство массива length, отвечающее за количество аргументов. В результате функция получит примерно такой вид:
function calcAvg() {
var summ=0; // инициализируем переменные
for (var i=0; i<arguments.length; i++) // обход всех аргументов в массиве
{
summ += arguments[i]; // вычисление суммы
};
return summ / arguments.length; // вычисление и возврат результата
}
Здесь хотелось бы обратить внимание на то, что обход массива начинается с нулевого элемента. Это вполне естественно, поскольку нумерация элементов массивов начинается с 0. Если же у вас возник вопрос, почему в предыдущем примере отсчет начинался с 1, то обратите внимание на то, что первым аргументом там был separator, объявленный явно, и который ни с чем склеивать не требовалось.
Другой момент – это использование сокращенной формы записи для подсчета суммы. Конечно, можно было бы написать это выражение в более привычном виде:
summ = summ + arguments[i];
Но, поскольку уж в JavaScript предусмотрены сокращенные формы записи, то почему бы их и не использовать? Ну и, наконец, после оператора return записана не переменная, а выражение, что так же вполне допустимо с точки зрения синтаксиса языка.
Что касается использования только что созданной функции, то ее вызов может быть произведен одним из следующих способов:
var avg = calcAvg(1,3,5); // переменной avg будет присвоено значение 3
var avg = calcAvg(2); // переменной avg будет присвоено значение 2
var avg = calcAvg(0,4,8,14); // переменной avg будет присвоено значение 6,5
Заметьте, что во всех случаях используется некоторая переменная (avg), которой присваивается значение, возвращаемое функцией. Если бы такой переменной не было указано, то результат вычислений попросту пропал бы. Иначе говоря, если функция возвращает какое-либо значение, то оно должно использоваться – не обязательно путем присвоения переменной, но и любым другим способом:
alert(calcAvg(10,100));
В данном случае возвращаемое функцией значение будет использовано в качестве параметра метода alert(). В использовании возвращаемого значения и кроется главное отличие между собственно функциями и функциями, используемыми в качестве процедур (без оператора return): последние ничего не возвращают, а только производят какую-либо работу.
Предопределенные функции
В JavaScript имеется ряд функций, являющихся частью самого языка, и не связанных с какими-либо конкретными объектами (вернее, они являются функциями некоего глобального объекта global, на который, тем не менее, никогда не требуется ссылаться). Такие функции называются предопределенными.
К предопределенным функциям JavaScript 1.3 относятся: eval, isFinite, isNaN, parseInt, parseFloat, Number, String, escape и unescape. В JavaScript 1.5 вместо функций escape и unescape используются 4 новых функции: encodeURI, encodeURIComponent, decodeURI, и decodeURIComponent. Краткое описание всех этих функций приведено в таблице 4.9.
| Функция | Синтаксис | Описание |
|---|---|---|
| eval | eval(выражение) | Обрабатывает строку как код JavaScript |
| isFinite | isFinite(значение) | Проверяет, что значение является конечным числом |
| isNaN | isNaN(значение) | Проверяет, что значение не является числом |
| parseInt | parseInt(строка, система) | Преобразует строку в целое |
| parseFloat | parseFloat(строка) | Преобразует строку в вещественное число |
| Number | Number(объект) | Преобразует объект в число |
| String | String(объект) | Преобразует объект в строку |
| escape | escape(строка ASCII) | Преобразует строку в последовательность символов |
| unescape | unescape(строка) | Преобразует последовательность escape-символов в строку |
| encodeURI | encodeURI(URL в ASCII) | Кодирует URI полностью путем замены символов на их коды UTF-8 |
| encodeURIComponent | encodeURIComponent(URL в ASCII) | Кодирует URI по составным частям путем замены символов на их коды UTF-8 |
| decodeURI | decodeURI(URL в UTF-8) | Раскодирует значение, созданное при помощи encodeURI |
| decodeURIComponent | decodeURIComponent(URL в UTF-8) | Раскодирует значение, созданное при помощи encodeURIComponent |
Рассмотрим некоторые функции подробнее. Начнем с функции eval, которая передает интерпретатору строку с кодом JavaScript без ссылки на какой-либо конкретный объект. Способ использования у этой функции следующий:
eval(выражение);
Здесь «выражение» – строка, которая должна содержать код на языке JavaScript для обработки интерпретатором. Ценность функции eval в том, что с ее помощью можно динамически составлять фрагменты программы и отправлять их на выполнение. При дальнейшем написании сценариев мы не раз воспользуемся этой функцией.
Функция isFinite проверяет, является ли переданное ей значение конечным числом. Если в качестве значения, передаваемого этой функции, указать -3, то результатом будет истина. А если указать Infinity (специальное ключевое слово, обозначающее бесконечность), результатом будет ложь, как, впрочем, и в том случае, если вместо числа указать строку.
Функция isNaN выполняет противоположную задачу – она проверяет, что указанный аргумент не является числом. Здесь следует отметить, что в JavaScript имеется еще одно ключевое слово – NaN. Оно используется, когда требуется указать значение, не являющееся числом. Например, такой вызов функции isNaN возвратит истину:
isNaN(NaN);
Для преобразования строки в число с плавающей запятой служит функция parseFloat. Например, чтобы присвоить некоторой переменной значение, которое должно быть вещественным числом, следует написать следующее выражение:
var a = parseFloat("31416e-4");
В этом случае переменной a будет присвоено значение 3,1416. В том случае, если преобразовать строку в число не представляется возможным, функция parseFloat возвращает значение NaN.
Кроме функции parseFloat, для преобразования строк в число имеется функция parseInt. В отличие от parseFloat, она может принимать как один, так и два аргумента:
parseInt("25");
parseInt("25", 10);
Здесь первый аргумент является числом для преобразования, а второй указывает на систему счисления, по которой следует производить преобразование. По умолчанию используется десятеричная система счисления, поэтому оба приведенных выше вызова функции аналогичны. Но чтобы точнее разобраться с этой функцией, давайте рассмотрим пример, в котором все ее вызовы возвращают значение 15:
var x = parseInt("15"); /* если не оговорено иначе, подразумевается, что система счисления – десятеричная */
var x = parseInt("15", 10); /* здесь мы явно указываем десятеричную систему счисления */
var x = parseInt(15.99, 10); /* в данном случае исходным значением служит не строка, а число с плавающей точкой */
var x = parseInt("F", 16); // шестнадцатеричное F равно десятеричному 15
var x = parseInt("FXX123", 16); /* если какой-либо знак распознать не удается, следующие за ним значения отбрасываются */
var x = parseInt("17", 8); // Восьмеричная система тоже иногда используется
var x = parseInt("1111", 2); // Двоичная система – тоже не редкость
В том случае, когда даже первый символ преобразовать в число не удастся, функция возвращает значение NaN:
parseInt("8",8); // В восьмеричной системе счисления нет цифры 8!
Для преобразования строк и чисел в JavaScript имеются еще 2 функции – String и Number. Они используются для преобразования объектов в строку и число соответственно. Например, если нам надо что-либо преобразовать в строку, например, объект document, то можно написать так:
var doc = String(document);
В данном случае в качестве значения переменной doc мы получим строку, описывающую объект как «[object HTMLDocument]». Примеры работы этих и других предопределенных функций можно найти в файле predef.html.
И, наконец, осталось рассмотреть функции кодирования. На самом деле, в клиентских сценариях они практически не используются, и предназначены для работы на стороне сервера (для случая, если web-сервером является Netscape Enterprise). Так что мы не будем на них останавливаться, и отметим лишь, что, поскольку функции escape и unescape не работают с национальными символами, то, начиная с JavaScript 1.5, они объявлены устаревшими, а вместо них следует использовать encodeURI, decodeURI, encodeURIComponent и decodeURIComponent.
2011-07-28 // Есть вопросы, предложения, замечания? Вы можете обсудить это на форуме !
