JavaСкрипт определения и вызова функций с примером
Джеймс Хартман
⚡ Умное резюме
JavaФункции скрипта объединяют многократно используемые блоки кода, которые выполняются только при вызове, и в этом пошаговом руководстве показано, как объявить такую функцию, передать в нее аргументы и вернуть значение вызывающей стороне.
Что такое функция в JavaСценарий?
Функции очень важны и полезны в любом языке программирования, поскольку они делают код многократно используемым. Функция — это блок кода, который будет выполнен только в том случае, если его вызвать. Если у вас есть несколько строк кода, которые необходимо использовать несколько раз, вы можете создать функцию, включающую повторяющиеся строки кода, а затем вызывать эту функцию в любом месте.
Внутри фигурных скобок ничего не выполняется автоматически. Браузер сохраняет блок под заданным вами именем, и код выполняется только тогда, когда после этого имени указаны скобки, например: myFunction()Таким образом, функции находятся в центре каждого процесса. JavaСценарий программа, существует ли скрипт внутри страницы или во внешнем файле.
Как создать функцию в JavaСценарий
- Используйте ключевое слово функция за которым следует имя функции.
- После имени функции открывайте и закрывайте круглые скобки.
- После круглых скобок открываются и закрываются фигурные скобки.
- В фигурных скобках напишите свои строки кода.
Синтаксис:
function functionname()
{
lines of code to be executed
}
В приведенном ниже примере определено следующее: myFunction() а затем вызывается на следующей же строке, так что сообщение появляется сразу после загрузки страницы. Попробуйте сами:
<html>
<head>
<title>Functions!!!</title>
<script type="text/javascript">
function myFunction()
{
document.write("This is a simple function.<br />");
}
myFunction();
</script>
</head>
<body>
</body>
</html>
Функция с аргументами
Функции также можно создавать с аргументами. Аргументы следует указывать в скобках.
Синтаксис:
function functionname(arg1, arg2)
{
lines of code to be executed
}
Здесь countVowels() Получает имя, которое посетитель вводит в поле ввода, перебирает каждый символ и сообщает, сколько гласных в имени содержится. Попробуйте сами:
<html>
<head>
<script type="text/javascript">
var count = 0;
function countVowels(name)
{
for (var i=0;i<name.length;i++)
{
if(name[i] == "a" || name[i] == "e" || name[i] == "i" || name[i] == "o" || name[i] == "u")
count = count + 1;
}
document.write("Hello " + name + "!!! Your name has " + count + " vowels.");
}
var myName = prompt("Please enter your name");
countVowels(myName);
</script>
</head>
<body>
</body>
</html>
JavaВозвращаемое значение скрипта
Вы также можете создавать функции JS, которые возвращают значения. Внутри функции вам нужно использовать ключевое слово возвращают за которым следует возвращаемое значение.
Синтаксис:
function functionname(arg1, arg2) { lines of code to be executed return val1; }
В последнем примере returnSum() Функция возвращает итоговую сумму той строке, которая её вызвала, поэтому результат можно объединить в одно предложение, а не выводить внутри функции. Попробуйте сами:
<html>
<head>
<script type="text/javascript">
function returnSum(first, second)
{
var sum = first + second;
return sum;
}
var firstNo = 78;
var secondNo = 22;
document.write(firstNo + " + " + secondNo + " = " + returnSum(firstNo,secondNo));
</script>
</head>
<body>
</body>
</html>
Типы функций в JavaСценарий
Во всех трех приведенных выше примерах используется классическое объявление функции, но в современном формате. JavaСкрипт предлагает несколько других форм. Они различаются главным образом тем, поднимает ли их движок и как каждый из них обрабатывает их. this ключевое слово.
| Тип функции | Типичный синтаксис | Когда это используется |
|---|---|---|
| Объявление функции | function greet() { } | Именованная, многократно используемая логика; поднята на вершину своей области видимости. |
| Функциональное выражение | const greet = function () { }; | Сохранение функции в переменной; без поднятия (hoisted) |
| Стрелочная функция (ES6) | const greet = () => { }; | Короткие обратные вызовы; наследует это от окружающей области видимости. |
| Анонимная функция | setTimeout(function () { }, 100); | Одноразовая логика передается непосредственно в другую функцию. |
| IIFE | (function () { })(); | Выполняется немедленно и сохраняет свои переменные в приватном режиме. |
| Обратный звонок | items.forEach(showItem); | Функция, переданная другой функции и вызванная позже. |
Примечание к приведенным выше примерам: использование исторических образцов var и document.write()И обе программы по-прежнему работают во всех браузерах. В настоящее время принято объявлять переменные с помощью let or const и выводит результат через console.log() или путем установки textContent на элементе, потому что document.write() Очищает страницу, которая уже полностью загрузилась. type="text/javascript" В HTML5 этот атрибут также является необязательным.
Параметры функции, аргументы и значения по умолчанию.
Параметры — это имена-заполнители, указанные в определении, а аргументы — это реальные значения, передаваемые при вызове функции. countVowels(name) Выше, name Параметром является текст, а аргументом — текст, введенный в подсказку.
function greet(user, greeting = "Hello") { return greeting + ", " + user; } greet("Ann"); greet("Ann", "Welcome");
- Параметр, для которого нет соответствующего аргумента, становится
undefinedесли не указано значение по умолчанию,greetingздесь. - Дополнительные аргументы игнорируются списком параметров, но остаются доступными через
argumentsобъект внутри любой функции, не являющейся стрелочной. - Параметр REST, записанный как
...valuesсобирает все оставшиеся аргументы в подлинное массив.
Область применения и подъемные механизмы в JavaСценарий
Место, где написана функция, определяет, что она может видеть и когда её можно вызвать. Два правила объясняют почти все неожиданности, с которыми сталкиваются новички.
- Подъем: Объявления функций перемещаются в начало своей области видимости перед запуском скрипта, поэтому их можно вызвать на строке выше их определения. Функциональные выражения и стрелочные функции не поднимаются в область видимости и вызывают ошибку при преждевременном вызове.
- Объем: переменные, объявленные с помощью
varВнутри функции они видны на протяжении всей функции, тогда какletиconstОни ограничены блоком, в котором находятся. Всё, что объявлено вне каждой функции, является глобальным.
Счетчик гласных демонстрирует это на практике. count Переменная объявлена вне функции, поэтому вызов countVowels() Повторное добавление данных на той же странице будет продолжать увеличивать предыдущую сумму, вместо того чтобы начинать с нуля. Перемещение объявления внутрь функции приведет к сбросу суммы при каждом вызове.
Эти скоping Эти правила распространяются и на серверный код, поэтому те же самые рассуждения применимы и при написании функций для Node.jsи почему поведение функций так часто встречается в JavaВопросы для интервью по сценарию.
