JavaScript function позволяют организовать скрипты и упрощают повторное использование кода. Вместо того чтобы создавать длинные фрагменты кода, разбросанные по всей HTML-странице , скрипты организуются в логические группы.
Объявление и вызов функции JavaScriptСинтаксис функции JavaScript выглядит следующим образом:
function ""имя"" (""аргумент1"", ""аргумент2"", ""аргумент3"" ...) { ""операторы"" return ""значение"" }
Имя определяет, как мы будем называть функцию при ее вызове. Аргументы задают значения, которые передаются функции для обработки. Раздел операторы представляет собой тело функции, которая выполняет обработку. Необязательный оператор return позволяет вернуть значение.
В следующем примере показана функция, определяемая в разделе HTML-страницы и вызываемая в разделе :
function sayHello() { alert("Привет!"); } sayHello();
Передача аргументов в функциюВ приведенном выше примере (script type text JavaScript function ) функции не передается никакие аргументы. Обычно функция предназначена для выполнения каких-либо действий с несколькими аргументами:
Простой пример функции JavaScript function sayHello(day, month) { alert("Привет! Сегодня " + day + " " + month); } sayHello("24", "Июля"); sayHello ("1", "Августа"); sayHello ("24", "Мая");
В этом примере JavaScript callback function вызывается несколько раз, принимая аргументы, которые затем используются для создания строки, отображаемой в диалоговом окне. Чтобы сделать это без функции, нужно было бы повторить скрипт в разделе три раза. Очевидно, что использование функции является более эффективным подходом.
Возврат значения из функцииОператор return применяется для возврата значения из функции и его использования в месте, где вызывается функция. В качестве примера мы объявим функцию, которая складывает два аргумента и возвращает результат:
Простой пример функции JavaScript var result = addValues(10, 20) document.write ("Результат = " + result);
В приведенном выше примере мы передаем в функцию addValues значения 10 и 20 . Функция addValues складывает эти два значения и возвращает результат. Оператор return присваивает результат переменной result, которая затем используется для создания строки, выводимой на HTML-странице .
Вызов JavaScript function может быть выполнен в разных местах. Например, не обязательно присваивать результат в качестве значения переменной. Можно использовать его непосредственно в качестве аргумента при вызове document.write .
Важно отметить, что функция может возвращать только одно значение:
Простой пример функции JavaScript function addValues(value1, value2) { return value1 + value2; } document.write ("Результат = " + addValues(10, 20)); JavaScript onclick function также могут использоваться в условных выражениях. Например: Простой пример функции JavaScript function addValues(value1, value2) { return value1 + value2; } if (addValues(10, 20) > 20) { document.write ("Результат > 20"); } else { document.write ("Результат < 20"); }
Где размещать объявления функцийЕсть два места, в которых рекомендуется размещать объявления JavaScript function return: внутри раздела HTML-документа или во внешнем файле .js . Наиболее предпочтительным местом считается второй вариант, так как он обеспечивает наибольшую гибкость.
Цель создания функций — сделать их как можно более общими для того, чтобы максимизировать возможность повторного использования.
Перевод статьи «Understanding JavaScript Functions » был подготовлен дружной командой проекта .
Хорошо Плохо
В этой статье описаны функции Javascript на уровне языка: создание, параметры, приемы работы, замыкания и многое другое.
Создание функцийСуществует 3 способа создать функцию. Основное отличие в результате их работы - в том, что именованная функция видна везде, а анонимная - только после объявления:
Функции - объектыВ javascript функции являются полноценными объектами встроенного класса Function. Именно поэтому их можно присваивать переменным, передавать и, конечно, у них есть свойства:
Function f() { ... } f.test = 6 ... alert(f.test) // 6
Свойства функции доступны и внутри функции, так что их можно использовать как статические переменные.
Например,
Function func() { var funcObj = arguments.callee funcObj.test++ alert(funcObj.test) } func.test = 1 func() func()
В начале работы каждая функция создает внутри себя переменную arguments и присваивает arguments.callee ссылку на себя. Так что arguments.callee.test - свойство func.test , т.е статическая переменная test.
В примере нельзя было сделать присвоение:
Var test = arguments.callee.test test++
так как при этом операция ++ сработала бы на локальной переменной test , а не на свойстве test объекта функции.
Объект arguments также содержит все аргументы и может быть преобразован в массив (хотя им не является), об этом - ниже, в разделе про параметры.
Области видимостиКаждая функция, точнее даже каждый запуск функции задает свою индивидуальную область видимости.
Переменные можно объявлять в любом месте. Ключевое слово var задает переменную в текущей области видимости. Если его забыть, то переменная попадет в глобальный объект window . Возможны неожиданные пересечения с другими переменными окна, конфликты и глюки.
В отличие от ряда языков, блоки не задают отдельную область видимости. Без разницы - определена переменная внутри блока или вне его. Так что эти два фрагмента совершенно эквивалентны:
Заданная через var переменная видна везде в области видимости, даже до оператора var . Для примера сделаем функцию, которая будет менять переменную, var для которой находится ниже.
Например:
Function a() { z = 5 // поменяет z локально.. // .. т.к z объявлена через var var z } // тест delete z // очистим на всякий случай глобальную z a() alert(window.z) // => undefined, т.к z была изменена локально
Параметры функцииФункции можно запускать с любым числом параметров.
Если функции передано меньше параметров, чем есть в определении, то отсутствующие считаются undefined .
Следующая функция возвращает время time , необходимое на преодоление дистанции distance с равномерной скоростью speed .
При первом запуске функция работает с аргументами distance=10 , speed=undefined . Обычно такая ситуация, если она поддерживается функцией, предусматривает значение по умолчанию:
// если speed - ложное значение(undefined, 0, false...) - подставить 10 speed = speed || 10
Оператор || в яваскрипт возвращает не true/false , а само значение (первое, которое приводится к true).
Поэтому его используют для задания значений по умолчанию. В нашем вызове speed будет вычислено как undefined || 10 = 10 .
Поэтому результат будет 10/10 = 1 .
Второй запуск - стандартный.
Третий запуск задает несколько дополнительных аргументов. В функции не предусмотрена работа с дополнительными аргументами, поэтому они просто игнорируются.
Ну и в последнем случае аргументов вообще нет, поэтому distance = undefined , и имеем результат деления undefined/10 = NaN (Not-A-Number, произошла ошибка).
Работа с неопределенным числом параметровНепосредственно перед входом в тело функции, автоматически создается объект arguments , который содержит
Например,
Function func() { for(var i=0;i alert(3)
Пример передачи функции по ссылкеФункцию легко можно передавать в качестве аргумента другой функции.
Например, map берет функцию func , применяет ее к каждому элементу массива arr и возвращает получившийся массив:
Var map = function(func, arr) {
var result =
for(var i=0; i [ window, "one", "two" ]
Погодите. Откуда взялся объект window ? Почему это у нас this равен window ?
В JavaScript, неважно, выполняется ли скрипт в браузере или в ином окружении, всегда определен глобальный объект
. Любой код в нашем скрипте, не «привязанный» к чему-либо (т.е. находящийся вне объявления объекта) на самом деле находится в контексте глобального объекта. В нашем случае, makeArray - не просто функция, «гуляющая» сама по себе. На самом деле, makeArray - метод глобального объекта (в случае исполнения кода в браузере) window . Доказать это легко:
alert(typeof window.methodThatDoesntExist); // => undefined
alert(typeof window.makeArray); // => function
То есть вызов makeArray("one", "two"); равносилен вызову window.makeArray("one", "two"); .
Меня печалит тот факт, что этот способ вызова функций наиболее распространен, ведь он подразумевает наличие глобальной функции. А мы все знаем, что глобальные функции и переменные - не самый хороший тон в программировании. Особенно это справедливо для JavaScript. Избегайте глобальных определений, и не пожалеете.
Правило вызова функций №1: Если функция вызывается напрямую, без указания объекта (например, myFunction()), значением this будет глобальный объект (window в случае исполнения кода в браузере).
Вызов метода Давайте создадим простой объект и сделаем makeArray его методом. Объект объявим с помощью литеральной нотации, а после вызовем наш метод:// создаем объект var arrayMaker = { someProperty: "какое-то значение", make: makeArray }; // вызываем метод make() arrayMaker.make("one", "two"); // => [ arrayMaker, "one", "two" ] // альтернативный синтаксис, используем квадратные скобки arrayMaker["make"]("one", "two"); // => [ arrayMaker, "one", "two" ]
Видите разницу? Значение this в этом случае - сам объект. Почему не window , как в предыдущем случае, ведь объявление функции не изменилось? Весь секрет в том, как передаются функции в JavaScript. Function - это стандартный тип JavaScript, являющийся на самом деле объектом, и как и любой другой объект, функции можно передавать и копировать. В данном случае, мы как бы скопировали всю функцию, включая список аргументов и тело, и присвоили получившийся объект свойству make объекта arrayMaker . Это равносильно такому объявлению:
var arrayMaker = { someProperty: "Какое-то значение"; make: function (arg1, arg2) { return [ this, arg1, arg2]; } };
Правило вызова функций №2: В функции, вызванной с использованием синтаксиса вызова метода, например, obj.myFunction() или obj["myFunction"]() , this будет иметь значение obj .
Непонимание этого простого, в общем-то, принципа часто приводит к ошибкам при обработке событий:
function buttonClicked(){
var text = (this === window) ? "window" : this.id;
alert(text);
}
var button1 = document.getElementById("btn1");
var button2 = document.getElementById("btn2");
button1.onclick = buttonClicked;
button2.onclick = function(){ buttonClicked(); };
Щелчок по первой кнопке покажет сообщение «btn1»
, потому что в данном случае мы вызываем функцию как метод, и this внутри функции получит значение объекта, которому этот метод принадлежит. Щелчок по второй кнопке выдаст «window»
, потому что в этом случае мы вызываем buttonClicked напрямую (т.е. не как obj.buttonClicked()). То же самое происходит, когда мы назначаем обработчик события в тэге элемента, как в случае третьей кнопки. Щелчок по третьей кнопке покажет то же самое сообщение, что и для второй.
При использовании библиотек вроде jQuery думать об этом не надо. jQuery позаботится о том, чтобы переписать значение this в обработчике события так, чтобы значением this был элемент, вызвавший событие:
// используем jQuery
$("#btn1").click(function() {
alert(this.id); // jQuery позаботится о том, чтобы "this" являлась кнопкой
});
Каким образом jQuery удается изменить значение this ? Читайте ниже.
var car = { year: 2008, model: "Dodge Bailout" }; makeArray.apply(car, [ "one", "two" ]); // => [ car, "one", "two" ] makeArray.call(car, "one", "two"); // => [ car, "one", "two" ]
Эти два метода очень похожи. Первый параметр переопределяет this . Различия между ними заключаются в последющих аргументах: Function.apply() принимает массив значений, которые будут переданы функции, а Function.call() принимает аргументы раздельно. На практике, по моему мнению, удобнее применять apply() .
Правило вызова функций №3: Если требуется переопределить значение this , не копируя функцию в другой объект, можно использовать myFunction.apply(obj) или myFunction.call(obj) .
Конструкторы Я не буду подробно останавливаться на объявлении собственных типов в JavaScript, но считаю необходимым напомнить, что в JavaScript нет классов, а любой пользовательский тип нуждается в конструкторе. Кроме того, методы пользовательского типа лучше объявлять через prototype , который является свойством фукции-конструктора. Давайте создадим свой тип:// объявляем конструктор function ArrayMaker(arg1, arg2) { this.someProperty = "неважно"; this.theArray = [ this, arg1, arg2 ]; } // объявляем методы ArrayMaker.prototype = { someMethod: function () { alert("Вызван someMethod"); }, getArray: function () { return this.theArray; } }; var am = new ArrayMaker("one", "two"); var other = new ArrayMaker("first", "second"); am.getArray(); // => [ am, "one", "two" ]
Важным в этом примере является наличие оператора new перед вызовом функции. Если бы не он, это был бы глобальный вызов, и создаваемые в конструкторе свойства относились бы к глобальному объекту. Нам такого не надо. Кроме того, в конструкторах обычно не возвращают значения явно. Без оператора new конструктор вернул бы undefined , с ним он возвращает this . Хорошим стилем считается наименование конструкторов с заглавной буквы; это позволит вспомнить о необходимости оператора new .
В остальном, код внутри конструктора, скорее всего, будет похож на код, который вы написали бы на другом языке. Значение this в данном случае - это новый объект, который вы создаете.
Правило вызова функций №4: При вызове функции с оператором new , значением this будет новый объект, созданный средой исполнения JavaScript. Если эта функция не возвращает какой-либо объект явно, будет неявно возвращен this .
Заключение Надеюсь, понимание разницы между разными способами вызова функций возволит вам улучшить ваш JavaScript-код. Иногда непросто отловить ошибки, связанные со значением this , поэтому имеет смысл предупреждать их возникновение заранее.Встроенная функция описывает какие-либо действия, которые она может совершить при её вызове. Описание действий встроенных функций скрыто от программиста. Примером таких действий может служить вычисление математического выражения и возвращение результата или манипуляция с содержимым html-документа. Функция может принимать параметры или аргументы, с которыми она производит какие-то действия. Аргументами могут служить как , так и .
Вызов функции производится следующим образом:
var a = functionName(par1, par2, …, parN);
В js существует множество встроенных функций для подсчёта математических выражений. Например, функция Math.sin, возвращает синус угла (угол задаётся в радианах), функция Math.sqrt вычисляет корень квадратный из числа, переданного ей в качестве параметра и т.д.
Например, вычислим корень квадратный из 256.
var b = Math.sqrt(256);
После выполнения кода одного из двух вышепредставленных примеров в переменной b будет содержаться значение 16.
Сегодня мы также рассмотрим две функции, которые позволят вашим скриптам хоть как-то сообщить какую-нибудь информацию внешнему миру. Вы вряд ли будете их использовать при написании реальных проектов, но они помогут вам в обучении.
Функция alertЭта функция принимает в качестве параметра текстовое представление значение, которое она выведет на экран в унылом сером окошке с кнопкой «Ок». Пока пользователь не нажмёт эту кнопку, выполнения скрипта не продолжится.
Функция document.writeЭта функция пишет в html-документ текстовое представление значения переданного ей в качестве параметра. Никогда не используйте этот метод при написании скриптов, для реальных проектов, если, конечно, точно не знаете, что делаете. Если вызывать эту функцию после загрузки страницы, то, скорее всего, вы увидите пустую страницу с текстом, который вывел последний вызов этой функции.
Объект MathВ этом объекте содержатся функции для вычисления математических выражений и некоторые константы. Об объектах мы поговорим попозже. Для того, чтобы использовать объект Math вам надо лишь запомнить, что обращение к его свойствам (функциям и константам) необходимо написать Math.имяФункцииИлиКонстанты.
Свойства, которые содержит объект Math (слово «Math» опущено):1. Константы
E 2.718281828459045
LN10 2.302585092994046 (логарифм натуральный 10)
LN2 0.6931471805599453 (логарифм натуральный 2)
LOG10E 0.4342944819032518 (логарифм десятичный e)
LOG2E 1.4426950408889634 (логарифм по основанию 2 числа e)
PI 3.141592653589793
SQRT1_2 0.7071067811865476 (корень квадратный из 0.5)
SQRT2 1.4142135623730951 (корень квадратный из двух)
2. Тригонометрические функции
sin – синус
cos – косинус
tan – тангенс
Угол, который в качестве аргумента принимают эти функции задаётся в радианах, а не в градусах. Для того, чтобы перевести значение угла из градусов в радианы необходимо умножить его на Math.PI и разделить на 180. И наоборот для того, чтобы перевести значение угла из радианов в градусы необходимо умножить его на 180 и разделить на Math.PI.
Таким образом, 60 градусов это π / 3 радиан, 30 градусов это π / 6 радиан и 45 градусов π / 4 радиан.
3. Обратные тригонометрические функции
acos – арккосинус от числа т.е. такой угол (в радианах), косинус которого равен аргументу
asin – арксинус от числа т.е. такой угол (в радианах), синус которого равен аргументу
atan – арктангенс от числа т.е. такой угол (в радианах), тангенс которого равен аргументу
atan2 – арктангенс от частного двух аргументов
3. Другие функции
abs – модуль числа
floor – целая часть числа, “пол“ или округление в меньшую сторону. Обратите внимание, что, например Math.floor(-0.9) и Math.floor(-0.1) это -1, а не ноль.
ceil – округление в большую сторону или «потолок»
exp – возвращает значение выражения e x , где x – это аргумент функции
log – возвращает натуральный логарифм числа
pow – принимает два аргумента и возвращает степень основание которой это первый аргумент, а показатель – второй.
max – принимает произвольное количество параметров и возвращает максимальный из них
min – принимает произвольное количество параметров и возвращает минимальный из них
random – возвращает случайное значение от 0 до 1
round – округляет число до единиц
sqrt – вычисляет корень квадратный из числа
Многие другие встроенные функции мы рассмотрим по ходу следующих уроков, а на сегодня всё.
Статья в разработке!
Статья, в которой рассмотрим, что такое функция, а также традиционный (классический) вариант работы с ней. Кроме этого, разберем, что такое аргументы (параметры) функции и оператор return.
Что такое функция?Функция - это некоторый набор инструкций , которому можно дать имя , а затем обратиться к нему по этому имени из любого места программы.
Классический пример использования функции. На веб-странице имеется код JavaScript, некоторый фрагмент в котором повторяется несколько раз . Чтобы этого избежать можно оформить этот фрагмент в виде функции , а затем вызывать его в нужных местах кода по имени этой функции . Вызов этой функции будет обозначать выполнение инструкций , находящихся в ней.
Как организовать выполнение некоторой задачи в JavaScript с использованием функций? Чтобы это выполнить обычно поступают так:
- разбивают задачу на составные части (подзадачи);
- подзадачи оформляют через функции;
- разрабатывают основной код с использованием вызова созданных функций.
В результате такая программа становится более структурированной. В неё более просто вносить различные изменения и добавлять новые возможности.
Объявление и вызов функцииОперации с функцией в JavaScript можно разделить на 2 шага:
- объявление (создание) функции.
- вызов (выполнение) этой функции.
Объявление функции. Создание функции в JavaScript начинается с написания ключевого слова function , далее указывается имя функции, затем в круглых скобка х при необходимости перечисляются параметры , после этого указываются инструкции , которые заключаются в фигурные скобки .
// объявление функции someName function someName() { alert("Вы вызвали функцию someName!"); } JavaScript - Синтаксис объявления функции
Функции такого вида в JavaScript называются function declaration statement . Кроме этого вида в JavaScript ещё различают функции function definition expression и arrow function expression .
Составление имени функции выполняется по тем же правилам, что и имя переменной. Т.е. оно может содержать буквы, цифры (0-9), знаки «$» и «_». В качестве букв рекомендуется использовать только буквы английского алфавита (a-z, A-Z). Имя функции, также как и имя переменной не может начинаться с цифры.
Параметров у функции может быть сколько угодно много или не быть вообще. Круглые скобки в любом случае указываются. Если параметров несколько, то их между собой необходимо разделить с помощью запятой . Обращение к параметрам функции осуществляется по их имени.
Набор инструкций , заключенный в фигурные скобки - это код функции , который будет выполнен при её вызове .
Вызов функции. Объявленная функция сама по себе выполняться не будет . Для того чтобы её запустить , её необходимо вызвать . Вызов функции осуществляется посредством указания её имени и двух круглых скобок. Внутри скобок при необходимости указываются аргументы.
// вызов функции, приведённой в предыдущем примере
someName();
JavaScript - Синтаксис вызова функции
Функции в JavaScript являются объектами. В JavaScript вообще всё является объектами, кроме шести примитивных типов данных. А если функция является объектом, то ссылку на неё можно сохранить в переменную.
// объявление функции someName function someName() { alert("Вы вызвали функцию someName!"); } var reference = someName;
После этого вызвать функцию можно будет так:
Reference();
Параметры и аргументы функцииАргументы функции - это значения, которые передаются функции на этапе её вызова. Отделяются аргументы друг от друга с помощью запятой.
// вызов функции sayWelcome с передачей ей двух аргументов sayWelcome("Иван", "Иванов"); // ещё один вызов функции sayWelcome с двумя аргументами sayWelcome("Петр", "Петров");
Параметры функции – это один из способов в JavaScript, посредством которого можно обратиться к аргументам внутри функции. Описываются параметры функции на этапе её объявления в круглых скобках.
Другими словами параметры функции - это локальные переменные, которые создаются автоматически на этапе запуска функции. В качестве значений параметры получают соответствующие аргументы, переданные функции во время её вызова. Обратиться к параметрам можно только внутри этой функции, вне её они не существуют.
// объявление функции sayWelcome, которая имеет два параметра function sayWelcome (userFirstName, userLastName) { // инструкция, выводящая в консоль значения параметров «userFirstName» и «userLastName» console.log("Добро пожаловать, " + userLastName + " " + userFirstName); }
В языке JavaScript при вызове функции количество аргументов не обязательно должно совпадать с количеством параметров . Параметры, которым при вызове, не было установлено значение, будут равны undefined .
Например , вызовем функцию из примера, приведённого выше, без указания одного и двух параметров:
// вызов функции sayWelcome и передача ей одного аргумента sayWelcome("Петр"); // Добро пожаловать, undefined Петр // вызов функции sayWelcome без передачи ей аргументов sayWelcome(); // Добро пожаловать, undefined undefined
Пример функции, которая будет просто выводить переданные ей аргументы в консоль браузера:
// объявление функции function outputParam(param1, param2, param3) { console.log(param1 + "; " + param2 + "; " + param3); } // вызовы функции outputParam с передачей ей разного количества параметров outputParam("Дождь","Снег","Туман"); // Дождь; Снег; Туман outputParam(17); // 17; undefined; undefined outputParam(24,33); // 24; 33; undefined outputParam(); // undefined; undefined; undefined
Другой способ обратиться к аргументам внутри функции – это использовать специальный объект arguments . Доступ к аргументам через arguments выполняется точно также как к элементам обычного массива, т.е. по их порядковым номерам. Таким образом, argument - позволит получить первый аргумент, arguments – второй аргумент и т.д.
// объявление функции sum function sum(num1, num2) { /* num1 или arguments – получить значение 1 аргумента num2 или arguments – получить значение 2 аргумента */ var sum1 = num1 + num2, sum2 = arguments + arguments; return "Сумма, полученная 1 способом равна " + sum1 + "; сумма, полученная 2 способом равна " + sum2; } /* выведем результат функции sum в консоль 7 - первый аргумент (к нему можно обратиться как по имени num1, так и с помощью arguments) 4 - второй аргумент (к нему можно обратиться как по имени num2, так и с помощью arguments) */ console.log(sum(7,4));
Основное отличие между этими способами заключается в том, что первый из них позволяет обратиться только к тем аргументам, которым на этапе объявления функции были дали имена. Второй же способ позволяет получить значение любого аргумента, даже если у него нет имени (по порядковому номеру). Это возможность языка JavaScript позволяет создавать универсальные гибкие функции.
Кроме получения аргументов, объект arguments позволяет также узнать их количество. Выполняется это с помощью свойства length.
Перебрать аргументы , переданные функции, можно, например, с помощью цикла for или for...of .
// объявление функции sum function sum() { var i = 0; console.log("Вывод всех аргументов с помощью цикла for"); for (i; i < arguments.length; i++) { console.log(i + 1 + " аргумент равен " + arguments[i]); } console.log("Вывод всех аргументов с помощью цикла for...of"); for (arg of arguments) { console.log(arg); } } // вызов функции sum sum(7, 4, 3, 1);
Функция, выводящая в консоль все переданные ей аргументы и их количество:
// объявление функции function myFunction () { var i; console.log("Количество переданных параметров = " + arguments.length); // переберём все параметры с помощью цикла for for (i = 0; i < arguments.length; i++) { console.log(i + " параметр = " + arguments[i]); } } // вызовы функции myFunction myFunction(3, 7, 27, "JavaScript"); myFunction(); myFunction("Яблоки", "Груши", "Апельсины");
Функция, выполняющая сложение все переданных ей аргументов (их количество заранее неизвестно):
// объявление функции var myCalc = function() { // переберём все параметры с помощью цикла for var i, sum = 0; for (i = 0; i lt; arguments.length; i++) { sum += arguments[i]; } // возвратим в качестве результата сумму return sum; } //вызов функции (вывод в консоль) console.log(myCalc(4, 20, 17, -6));
В результате, посредством объекта arguments можно реализовать в теле функции:
- проверку количества переданных аргументов;
- обработку какого угодного количества параметров.
Кроме самой функции, доступ к аргументам, которые передаются ей на этапе вызова, имеют также другие функции, находящиеся в ней.
Function mainF(p1, p2) { function childF() { console.log("p1 = " + p1 + "; p2 = " + p2); } childF(); } mainF(3, 5); // p1 = 3; p2 = 5 mainF(4, 7); // p1 = 4; p2 = 7
Значение параметров по умолчаниюНачиная с версии ECMAScript 2015 (6) параметру функции можно задать значение, которое он будет иметь по умолчанию.
Например , установим параметру «color» значение по умолчанию, равное «#009688»:
Function setBGColor(color = "#009688") { document.body.style.backgroundColor = color; } setBGColor(); // цвет фона будет равен #009688 setBGColor("red"); // цвет фона будет равен red
До ECMAScript 2015 задать параметру значение по умолчанию можно, например, было так:
Function setBGColor(color) { color = color !== undefined ? color: "#009688"; // устанавливаем color значение по умолчанию, равное "#009688" document.body.style.backgroundColor = color; }
Оставшиеся параметры (rest parameters)Если при вызове функции ей передать аргументов больше, чем у неё есть параметров, то получить оставшиеся можно с помощью, так называемых оставшихся параметров (rest patameters) . Данная возможность в языке появилась, начиная с ECMAScript 2015.
// ...nums - оставшиеся параметры, к которым можно обратиться в данном случае по имени nums function doMath(mathAction, ...nums) { var result = 0; nums.forEach(function(value) { switch (mathAction) { case "sum": result += value; break; case "sumCube": result += value**3; break; case "sumSquare": result += value**2; break; deafult: result = 0; } }) return result; } console.log(doMath("sum", 3, 4, 21, -4)); // 24 (3 + 4 + 21 + (-4)) console.log(doMath("sumSquare", 1, 4)); // 17 (1^2 + 4^2) console.log(doMath("sumCube", 3, 2, 4)); // 99 (3^3 + 2^3 + 4^3)
Оператор returnОператор return предназначен для возвращения значения или результата вычисления выражения текущей функции. Значение или выражение должно быть отделено от return посредством пробела. Кроме этого, оператор return прекращает выполнение функции, т.е. все инструкции, идущие после него, исполнены не будут.
Функция в JavaScript всегда возвращает результат в вне зависимости от того, используется ли оператор return или нет.
// функция, возвращающая результат
function sayWelcome (userFirstName, userLastName) {
if ((!userFirstName) || (!userLastName))
return "Добро пожаловать, анонимный пользователь";
else
return "Добро пожаловать, " + userLastName + " " + userFirstName;
}
// объявление переменной person
var person;
// присвоить переменной person результат функции sayWelcome
person = sayWelcome("Иван","Иванов");
// вывести значение переменной в консоль
console.log(person);
//Инструкция, которая выведит в консоль результат работы функции sayWelcome
console.log(sayWelcome("Петр","Петров"));
//Инструкция, которая выведит в консоль результат работы функции sayWelcome
console.log(sayWelcome("Сидоров"));
JavaScript - Функция с проверкой параметров
Функция в JavaScript в результате своего выполнения всегда возвращает результат, даже если он явно не определён с помощью оператора return. Этот результат значение undefined.
// 1. функция, не возвращающая никакого результата
function sayWelcome (userFirstName, userLastName) {
console.log("Добро пожаловать, " + userLastName + " " + userFirstName);
}
// попробуем получить результат у функции, которая ничего не возвращает
console.log(sayWelcome ("Иван", "Иванов"));
// 2. функция, содержащая оператор return без значения
function sayDay (day) {
day = "Сегодня, " + day;
return;
//эта инструкция не выполнится, т.к. она идёт после оператора return
console.log(day);
}
// попробуем получить результат у функции, которая содержит оператор return без значения
console.log(sayDay("21 февраля 2016г."));
JavaScript - Получить значение у функции, которая ничего не возвращает
Такой же результат будет получен, если для оператора return не указать возвращаемое значение.
Перегрузка функций в JavaScriptПерегрузка функций в программировании – это возможность объявлять несколько функций с одинаковыми именами в одной области видимости. Отличаются такие функции друг от друга типом и числом аргументов. Каждая функция имеет свою программную логику. Используется перегрузка функций для того, чтобы с помощью одного имени функции можно было выполнять близкие действия.
Язык JavaScript не поддерживает перегрузку функций в том виде, как это реализовано, например, в Си подобных языках. Т.е. в JavaScript нельзя создать несколько функций с одинаковыми именами, находящихся в одной области видимости.
Подобную функциональность можно реализовать в JavaScript используя следующие действия:
- Для того чтобы проверить передан аргумент или нет, используйте условие с проверкой его значения на undefined .
- Для проверки количества переданных аргументов функции используйте свойство объекта arguments length .
- Чтобы узнать тип переданного значения аргумента используйте операторы typeof или instanceof .
- Для работы с переменным числом аргументов, используйте объект arguments .
- Начиная с версии ECMAScript6, Вы можете указывать значения по умолчанию для аргументов.
Например, создадим функцию, при вызове которой можно указывать один или два аргумента:
//объявление функции, которая изменяет цвет заднего фона элементов function setBgColor(bgColor,elements) { //если параметр elements при вызове не указан if (elements=== undefined) { //то приравнять его значение "div" elements = "div"; } //получить все элементы elements = $(elements); //перебрать все элементы и установить им указанный цвет заднего фона elements.each(function(){ $(this).css("background-color",bgColor); }); } /*Вызвать функцию setBgColor, указав один параметр. Т.к. 2 параметр не указан, то данная фукция изменит цвет заднего фона у всех элементов div.*/ setBgColor("green"); /*Вызвать функцию setBgColor, указав 2 параметра. Т.к. 2 параметр задан, то данная функция изменит цвет заднего фона только элементов button.*/ setBgColor("#ff0000","button");
Произведём некоторые изменения в вышепредставленном коде. А именно, укажем для второго параметра значение по умолчанию:
//объявление функции, которая изменяет цвет заднего фона элементов //параметр elements имеет значение "div" по умолчанию function setBgColor(bgColor,elements = "div") { //получить все элементы elements = $(elements); //перебрать все элементы и установить им указанный цвет заднего фона elements.each(function(){ $(this).css("background-color",bgColor); }); } //вызвать функцию setBgColor, указав один параметр setBgColor("green"); //вызвать функцию setBgColor, указав 2 параметра setBgColor("#ff0000","button");
Пример, как в JavaScript можно реализовать «перегруженную» функцию, вычисляющую количество калорий, которых необходимо человеку в день:
// описание функции function countCal(sex, height) { // параметры: sex (пол) и height (рост) var result; if ((sex === 0) || (sex === "man")) { result = (height - 100) * 20; } else if ((sex === 1) || (sex === "woman")) { result = (height - 105) * 19; } if (result) { // arguments - уровень активности if (arguments) { result *= arguments; } console.log("Количество ккал для нормальной жизнедеятельности: " + result); } else { console.log("Неверно указаны параметры"); } } /* вызов функции и передаче ей 2 аргументов (1 - "man", к нему можно обратиться с помощью имени sex и arguments; 2 - значение 185, к нему можно обратиться с помощью имени sex и arguments) */ countCal("man", 185); /* вызов функции и передаче ей 3 параметров, хотя в описании функции присутствуют только 2 (получить значение 3 параметра в данном случае можно только как arguments) */ countCal(0, 185, 2);
РекурсияРекурсия – это вызов внутри тела некоторой функции самой себя.
Вызов функции обычно осуществляется в зависимости от способа её объявления по имени или посредством переменной, содержащей ссылку на эту функцию.
Function fact(n) { if (n === 1) { return 1; } return fact(n-1) * n; } console.log(fact(5)); // 120
Вызвать функцию внутри её тела можно не только по имени, но также с помощью свойства callee объекта arguments. Но данное свойство лучше не использовать, т.к. оно является устаревшим. Кроме этого в строгом режиме оно вообще не работает.
Что такое встроенные (стандартные) функции?В JavaScript имеется огромный набор встроенных (стандартных) функций. Данные функции уже описаны в самом движке браузера. Практически все они являются методами того или иного объекта.
Например, для того чтобы вызвать встроенную функцию (метод) alert, её не надо предварительно объявлять. Она уже описана в браузере. Вызов метода alert осуществляется посредством указания имени, круглых скобок и аргумента внутри них. Данный метод предназначен для вывода сообщения на экран в форме диалогового окна. Текстовое сообщение берётся из значения параметра данной функции.
// вызов функции alert
alert("Некоторый текст");
JavaScript - Вызов функции alert
