Определение и использование функций
Если вы разметили выражение прямо в элементе script, как я сделал в листинге 4-2, тогда браузер будет выполнять эти выражения сразу же, как только он достигнет их в загруженном документе. В качестве альтернативы, сразу несколько выражений можно поместить в функцию, которая не будет выполнена, пока браузер не достигнет того выражения, которое ее вызывает, как показано в листинге 4-3.
Листинг 4-3: Определение функции в JavaScript
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<script type="text/javascript">
function myFunc() {
console.log("This is a statement");
};
myFunc();
</script>
</head>
<body>
This is a simple example
</body>
</html>
Выражения, находящиеся в функции, заключены в фигурные скобки ({
and }
) и называются блоком кода. В этом листинге определена функция myFunc
, в блоке кода которой содержится единственное выражение. JavaScript – регистрозависимый язык, что означает, что термин function
должен писаться с маленькой буквы. Выражение, находящееся в функции, не будет выполнено, пока браузер не достигнет другого выражения, которое вызывает функцию myFunc
, вот такого:
myFunc();
Этот пример не особенно полезен, потому что функция вызывается сразу же после своего определения. Вы увидите примеры, где функции гораздо более полезны, когда мы будем работать с событиями в главе 9.
Определение функций с параметрами
Как и в большинстве языков программирования, в JavaScript можно определять функции с параметрами, как показано в листинге 4-4.
Листинг 4-4: Определение функций с параметрами
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<script type="text/javascript">
function myFunc(name, weather) {
console.log("Hello " + name + ".");
console.log("It is " + weather + " today");
};
myFunc("Adam", "sunny");
</script>
</head>
<body>
This is a simple example
</body>
</html>
В этом листинге к функции myFunc
я добавил два параметра. Они называются name
и weather
. JavaScript – это язык с динамической типизацией (слабой типизацией), что обозначает, что вам не нужно объявлять тип данных параметра при определении функции. Я еще вернусь к динамичной типизации в этой главе, когда мы будем рассматривать переменные JavaScript. Чтобы вызвать функцию с параметрами, при ее вызове нужно дать аргументам значения, например, так:
myFunc("Adam", "sunny");
Результат выполнения кода будет таким:
Hello Adam.
It is sunny today
Число аргументов при вызове функции не обязательно должно соответствовать числу параметров в функции. Если вы вызвали функцию с меньшим числом аргументов, нежели параметров, тогда значения тех параметров, для которых нет аргументов, будут неопределенны. Если вы вызываете функцию с большим числом аргументов, нежели параметров, то дополнительные аргументы будут просто проигнорированы.
Следствием этого является то, что вы не можете создать две функции с одинаковым именем и различными параметрами и ожидать, что JavaScript будет различать их, основываясь на аргументах, которые вы выставляете при вызове функции. Это называется полиморфизм, и хотя он поддерживается в таких языках как Java и C#, он недоступен в JavaScript. Вместо этого, если вы определите две функции с одинаковым именем, вторая функция заменит первую.
Определение функций, возвращающих результат
Можно вернуть результат функции, используя ключевое слово return. В листинге 4-5 показана функция, которая возвращает результат.
Листинг 4-5: Возвращение результата функции
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<script type="text/javascript">
function myFunc(name) {
return ("Hello " + name + ".");
};
console.log(myFunc("Adam"));
</script>
</head>
<body>
This is a simple example
</body>
</html>
Эта функция определяет один параметр и использует его, чтобы сгенерировать простой результат. Я вызвал функцию и отправил ее результат в качестве аргумента функции console.log
:
console.log(myFunc("Adam"));
Обратите внимание, что вам не нужно объявлять, что функция будет возвращать результат, а также указывать тип данных результата. Результат выполнения данного кода будет следующим:
Hello Adam.