Как сделать функционал

Добавил пользователь Alex
Обновлено: 10.09.2024

В этой статье описаны функции 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, которая бы считала количество минут в днях.

Читайте также: