Как сделать функционал
В этой статье описаны функции Javascript на уровне языка: создание, параметры, приемы работы, замыкания и многое другое.
Создание функций
Существует 3 способа создать функцию. Основное отличие в результате их работы - в том, что именованная функция видна везде, а анонимная - только после объявления:
Именованные (FunctionDeclaration) | Анонимные (FunctionExpression) |
---|---|
function имя(параметры) . > | var имя = function( параметры ) … > . var имя = new Function( параметры, '. ' ) |
Именованные функции доступны везде в области видимости | Анонимные - доступны только с момента объявления. Синтаксис new Function используется редко, в основном для получения функции из текста, например, динамически загруженного с сервера в процессе выполнения скриптов. |
Функции - объекты
В javascript функции являются полноценными объектами встроенного класса Function. Именно поэтому их можно присваивать переменным, передавать и, конечно, у них есть свойства:
Свойства функции доступны и внутри функции, так что их можно использовать как статические переменные.
В начале работы каждая функция создает внутри себя переменную arguments и присваивает arguments.callee ссылку на себя. Так что arguments.callee.test - свойство func.test , т.е статическая переменная test.
В примере нельзя было сделать присвоение:
так как при этом операция ++ сработала бы на локальной переменной test , а не на свойстве test объекта функции.
Объект arguments также содержит все аргументы и может быть преобразован в массив (хотя им не является), об этом - ниже, в разделе про параметры.
Области видимости
Каждая функция, точнее даже каждый запуск функции задает свою индивидуальную область видимости.
Переменные можно объявлять в любом месте. Ключевое слово var задает переменную в текущей области видимости. Если его забыть, то переменная попадет в глобальный объект window . Возможны неожиданные пересечения с другими переменными окна, конфликты и глюки.
В отличие от ряда языков, блоки не задают отдельную область видимости. Без разницы - определена переменная внутри блока или вне его. Так что эти два фрагмента совершенно эквивалентны:
Заданная через var переменная видна везде в области видимости, даже до оператора var . Для примера сделаем функцию, которая будет менять переменную, var для которой находится ниже.
Параметры функции
Функции можно запускать с любым числом параметров.
Если функции передано меньше параметров, чем есть в определении, то отсутствующие считаются undefined .
Следующая функция возвращает время time , необходимое на преодоление дистанции distance с равномерной скоростью speed .
При первом запуске функция работает с аргументами distance=10 , speed=undefined . Обычно такая ситуация, если она поддерживается функцией, предусматривает значение по умолчанию:
Оператор || в яваскрипт возвращает не true/false , а само значение (первое, которое приводится к true ).
Поэтому его используют для задания значений по умолчанию. В нашем вызове speed будет вычислено как undefined || 10 = 10 .
Поэтому результат будет 10/10 = 1 .
Второй запуск - стандартный.
Третий запуск задает несколько дополнительных аргументов. В функции не предусмотрена работа с дополнительными аргументами, поэтому они просто игнорируются.
Ну и в последнем случае аргументов вообще нет, поэтому distance = undefined , и имеем результат деления undefined/10 = NaN (Not-A-Number, произошла ошибка).
Работа с неопределенным числом параметров
Непосредственно перед входом в тело функции, автоматически создается объект arguments , который содержит
- Аргументы вызова, начиная от нуля
- Длину в свойстве length
- Ссылку на саму функцию в свойстве callee
Вызвать функцию для массива аргументов можно при помощи apply :
Пример передачи функции по ссылке
Функцию легко можно передавать в качестве аргумента другой функции.
Например, map берет функцию func , применяет ее к каждому элементу массива arr и возвращает получившийся массив:
Или можно создать анонимную функцию непосредственно в вызове map :
Сворачивание параметров в объект
Бывают функции, аргументы которых сильно варьируются.
Вызов с необязательными параметрами приходится делать так:
Чтобы избежать лишних null и сделать код более понятным, используют нечто вроде "keyword arguments", существующих в Python и Ruby. Для этого много параметров пакуют в единый объект:
Вызов теперь делается гораздо проще:
Так - куда понятнее. А если параметров больше 5, то вообще - единственный нормальный способ.
Кроме того, с объектом можно удобнее делать последовательности вызовов вроде:
Конечно мне всё описанное в статье уже известно, но материал очень полезный.
Жаль, что в то время, когда я только начинал изучать программирование и JavaScript, не было таких статей.
Очень внятно и полезно - СПАСИБО!
Да, статьи у тебя, Илья, как всегда, полезны. Доходчиво написано, особенно для новичков.
Есть маленькое уточнение:
не каждая именованная функция является declaration'ом:
Для новичков.
Вот я новичок. И я ничерта не понял) После второго абзаца мозг расплавился.
Хотя я пытался выяснить простую вещь: почему в функцию передается число и не передается текст? Но этого тут я так и не нашел =\
В функцию в качестве аргумента элементарно передать как числовую, так и строковую переменную.
Спасибо огромное! Очень долго искал вот это для своей JS библиотеки:
Поддержу, отличный метод
А как все таки задавать значения параметров по умолчанию?
Только уже в самом теле функции?
Да, только в теле функции
Блин, а я как не разбиралась в Яве, так и не разбираюсь. Надо учиться
Я верю,что так и будет, но не понимаю здесь преобразование типов. Я так понимаю, что В правой части speed должно преобразовываться к Boolean и если он true, то второй опреанда 10 не вычисляется, но при этом и левой части должно присвоиться значение типа Boolean, а не того типа , которое имеет speed на входе в функцию. В чем я ошибаюсь и почему ?
Оператор || в яваскрипт возвращает не true/false , а само значение (первое, которое приводится к true).
или последнее, которое приводится к false
Объекты , передаются в функцию по ссылке, а как передать в функцию по ссылке параметры примитивных типов (Undefined , Null, Boolean, String, Number ), чтобы можно было их изменить в функции ?
Никак. Элементарные значения не передаются по ссылке, только объекты, к которым также относятся массивы, даты и т.п.
Здесь javascript ведет себя так же, как, например, java/php5
А вот и неправда, можно привести их к object и передать в функцию, тогда они будут переданы по ссылке
Что будет если вызвать эту функцию со следующими параметрами?
resize(100, null, false, true)
Казалось бы, если учесть следующее утверждение:
// если speed - ложное значение(undefined, 0, false. ) - подставить 10
speed = speed || 10
то значение параметра saveProportions будет вычислено как false || true == true, хотя в данном случае мы хотели, чтобы saveProportions равнялось false.
Я правильно понимаю?
Да, Ты понимаешь правильно
пиши так:
function myFunc(s)
if (typeof s == "undefined") s = "default value for s";
alert(s);
>;
Не понятно про имена функций при вызове по ссылке. Мы можем сослатся на функцию вот так:
Тоесть мы переменную myFunc фактически приравниваем к функции.
Но мочему тогда нельзя сделать вот так?
Вовсяком случае у меня этот код не работает.
Как быть если имя нужной функции я вычисляю и результат помещаю в строковую переменную? Тоесть строковая переменная содержит имя нужной мне функции. При попытке вызова как напрямую, так и через someVar.call() / someVar.apply() - получаю ошибку. Не ужели только через eval(someVar+"()") ?
Привет. Присвоение значения переменной надо делать без кавычек:
var someVar = myFunc;
Спасибо за ответ, но. :-)
Суть именно в том, что в кавычках вычесляется имя функции, которую нужно запустить. Кавычки тут не зря. К примеру:
Это просто пример, но суть думаю понятна - имя функции вычесляется динамично.
Как в таком случае можно запустить "вычесленную" функцию? Пока я использу eval(), но есть ли более красивое решение?
Только если записывать ф-ию в хеш (или объявлять ее глобально, что почти тоже самое: она попадет в объект window).
Аватары — это часть метавселенной Meta (бывший Facebook). С помощью этой технологии человек может продублировать свою внешность: создать аватара (виртуального персонажа), который внешне похож на него.
Как использовать аватары:
- Общение по видеосвязи.
- Использование в сторис (аватар расположен среди стикеров).
Пока что список возможностей для использования аватара ограничен несколькими опциями. Но с развитием метавселенной Meta функционал будет расширяться.
Как сделать свой аватар в Инстаграм: пошаговая инструкция
Теперь перейдем к практической части статьи — посмотрим, как сделать собственный аватар в Инстаграм. В формате пошаговой инструкции.
В общем, на втором этапе вы полностью настраиваете внешность виртуального персонажа: от лица до одежды. Такая детализация позволяет создать уникальный внешний вид. Если постараться, то можно сделать аватар, который будет похожим на вас.
Готово. Вы создали свой аватар. Теперь он доступен вам в качестве стикеров в Instagram и Facebook Messenger.
Чем больше в вашей программе строк, тем сложнее она для понимания. Поскольку программу придётся актуализировать, дополнять и изменять бесконечно, то объёмный код в этой задаче не помощник. Для его упрощения есть функции. Благодаря им вы сократите время на разработку и уберёте дублирующиеся части. Понимать и тестировать программу станет проще. Как всё работает, сейчас покажем.
Сначала теория
Программы состоят из алгоритмов. А они в свою очередь из команд, переменных и функций.
Функция – это часть кода, совокупность команд, которая решает конкретную задачу. Чтобы легко обратиться к функции из разных частей программы, ей присваивают имя.
Зачем обращаться к функции? Чтобы не прописывать тот же самый алгоритм повторно в другом месте. Вместо этого достаточно написать только имя функции. Код становится лаконичным и понятным, его легко отлаживать и сопровождать.
Объясняем
Например, вы хотите написать программу, которая проигрывает песню. И в ней 5 раз звучит игра на барабанах. Вы бы прописали следующий алгоритм для барабанщика:
1. Взять палочки.
3. Совершить удар по барабану.
4. Нажать на педаль ногой.
5. Помотать головой в такт.
Без функции вам пришлось бы прописывать 5 раз одно и то же в тех частях композиции, где нужны ударные. Но гораздо удобнее оформить этот алгоритм в функцию playDrums и вызывать её каждый раз, когда необходимо. Это экономит время.
Аргументы
Функциям можно передавать параметры, которые называются аргументами функции.
Когда мы пишем функцию, то указываем в ней не конкретные значения, а параметры, которые необходимо ввести при вызове функции, чтобы она заработала.
Обувь – это параметр.
Кроссовки и сапоги – это аргументы.
Алгоритм при этом не поменяется: каждый раз человек ходит одинаково, но в разной обуви.
При вызове функции в строке происходит следующее:
1. Язык программирования находит её в той части программы, где она прописана.
2. Выполняет команды, содержащиеся в ней, с учетом указанных при вызове аргументов.
3. Возвращается обратно к строке, которая её вызвала.
4. Переходит к следующей строке.
Некоторые функции уже встроены в язык программирования, например, console.log() в JavaScript, с которой мы уже познакомились :)
Пользовательские функции
Помимо стандартных встроенных в язык функций, мы можем создавать свои – пользовательские. Для этого необходимо записать алгоритм в определённой форме и придумать ему имя.
В JavaScript специальное слово для определения функций – function. После него указывается:
— список аргументов в круглых скобках;
— тело функции в фигурных скобках.
Создадим простейшую функцию без параметров с именем greeting, которая будет выводить строку 'Hello!':
Справка! Перед вложенными в функцию строками принято ставить отступ с помощью клавиши , чтобы они начинались немного дальше от края строки. Это визуально упрощает чтение кода.
Увидим в консоли результат:
Тренировка
1. Напишем на JS функцию height() с двумя аргументами: высота в полных метрах (m) и остаток в сантиметрах (cm). Объявление функции выглядит так:
(m, cm) - это параметры, которые необходимо передавать в функцию, чтобы она заработала.
При объявлении функции нам не нужно указывать значения этих параметров. Мы только обозначаем их через запятую. Когда позже мы вызовем функцию, то укажем в скобках после имени конкретные значения, которые компьютер подставит под эти параметры.
2. По нашей задумке функция height() должна вычислять общую высоту в сантиметрах и выводить её в консоль. Для этого мы составим формулу вычисления, по которой функция произведет расчёт:
100 * m + cm
Мы указали, что для расчета общей высоты в сантиметрах необходимо взять значение аргумента m, умножить его на 100, а затем прибавить значение аргумента cm.
3. Запишем эту формулу в переменную total. Наша функция теперь выглядит так:
4. Попросим функцию сразу выводить значение переменной total, которое получилось после произведённого рассчета:
5. Вызовем функцию с аргументами 1 и 70:
Что произойдёт? Компьютер понимает, что функции height(m, cm) переданы аргументы 1 и 70 и подставляет их соответственно: m = 1, cm = 70. Затем производится расчёт по формуле:
Результат вычисления 170 записывается в переменную total. Далее – значение переменной total выводится в консоль:
6. Теперь попросим функцию выводить не просто результат расчёта, а добавлять к нему обозначение результата 'cm tall' и снова вызовем функцию с теми же аргументами:
Алгоритм работы функции не поменяется. Но при выводе результата вычисления – в нашем случае 170 – выполняется конкатенация (склейка) двух строк таким образом:
— значение переменной total автоматически преобразуется в строку благодаря неявному преобразованию в JavaScript: число 170 превращается в строку '170';
— строка 'cm tall' склеивается со строкой '170'.
Теперь результат в консоли выглядит так:
Возвращение значений
Функции могут возвращать значения – результаты вычислений. Эти значения удобно присвоить переменной и использовать при необходимости для выполнения дальнейших вычислений.
Напишем функцию с именем calc(), которая бы принимала два числовых параметра и суммировала их. Запишем алгоритмическое выражение в переменную total:
Справка! Переменной присваивается не само выражение a + b, а результат, который в итоге получится.
Теперь попросим функцию возвращать значение переменной total:
При вычислении функция получит результат, присвоит его переменной total и вернёт это значение как результат функции.
Например, вызовем функцию calc() с параметрами 4 и 5:
Такие хитрости упрощают жизнь разработчика. Без функций на прописывание повторов в коде уходило бы время, за которое программист напишет еще 30-40% программы.
Домашнее задание
Напишите функцию на языке JavaScript, которая бы считала количество минут в днях.
Читайте также: