Анонимные функции в JavaScript
Анонимной в JavaScript называют функцию с которой не связано никакое имя или другими словами у такой функции нет имени. Также можно сказать, что если после ключевого слова function или перед знаком стрелочной функции => не стоит имя — функция анонимная. Однако если такую функцию положить в переменную она уже считается именованной.
Анонимная функция недоступна после первоначального создания, поэтому чаще всего она записывается в переменную и дальше с ней происходит работа. Но есть случаи, когда функция так и остается без уникального идентификатора.
Самовызывающаяся функция
(function() < alert('Я буду настойчив и выучу все возможные записи функций!'); >)();
Такая анонимная функция выполнится сразу же, как интерпретатор до неё дойдет. В такой записи, функция заключается в круглые скобки () , а после нее добавляется вызов () .
Также запись может быть сделана в стиле стрелочных функций.
Анонимные функции в качестве параметров
Зачем присваивать функции имя, если ее вызов происходит здесь, сейчас и больше нигде.
setTimeout(function() < alert('Время заняться практикой JavaScript!'); >, 5000);
В данном примере анонимная функция выступает в качестве аргумента функции setTimeout() , и выведет сообщение через пять секунд после загрузки страницы.
Еще один пример, но уже не с кастомной функцией.
function importantQuestion(question, yes, no) < if (confirm(question)) yes() else no(); >importantQuestion( "Вы хотите изучать JavaScript?", function() < alert("Не опускайте руки и у вас все получиться!"); >, function() < alert("Отличная новость! Чем меньше у меня конкурентов, тем выше моя зарплата."); >);
Итого
1. Анонимные функции становятся доступны, только после того, как интерпретатор дойдет до них, таким образом их вызов возможен только после записи функции в коде.
2. Анонимные функции короче и отлично подходят в тех случаях, когда на них не нужно ссылаться в коде.
3. Анонимные функции могут вызывать сами себя.
4. Анонимные функции могут выступать в качестве параметров в других функциях.
Skypro — научим с нуля
Функциональное выражение
Ключевое слово function может использоваться для определения функции внутри выражения.
Вы можете также определять функции используя конструктор Function и объявление функции .
Синтаксис
var myFunction = function [name]([param1[, param2[, . paramN]]]) < statements >;
С версии ES2015 можно также использовать стрелочные функции.
Параметры
Имя функции. Может быть опущено, в таком случае функция является анонимной. Имя функции является локальным для её тела.
Имя аргумента, передаваемого в функцию.
Инструкции, составляющие тело функции.
Описание
Функциональное выражение и объявление функции очень похожи и имеют почти одинаковый синтаксис. Главным отличием между ними является имя функции, которое в случае функциональных выражений может быть опущено для создания анонимных функций. Функциональное выражение может быть использовано для создания самовызывающейся функции IIFE (Immediately Invoked Function Expression), которая исполняется сразу же после того, как она была определена. Более подробная информация изложена в разделе о функциях.
Поднятие функциональных выражений
Функциональные выражения в JavaScript не поднимаются (hoisting), в отличие от объявленных функций . Вы не можете использовать функциональные выражения прежде, чем вы их определили.
.log(notHoisted); // undefined //Хотя объявленная переменная и поднимается, определение переменной происходит позже notHoisted(); // TypeError: notHoisted is not a function var notHoisted = function () console.log("bar"); >;
Именованное функциональное выражение
Если вы хотите сослаться на текущую функцию внутри тела этой функции, вам необходимо создать именованное функциональное выражение. Данное имя будет локальным только для тела функции (её области видимости). Кроме того, это позволяет избежать использования нестандартного свойства arguments.callee .
var math = factit: function factorial(n) console.log(n); if (n 1) return 1; > return n * factorial(n - 1); >, >; math.factit(3); //3;2;1;
Переменная, которой присвоено функциональное выражение, будет иметь свойство name , содержащее имя функции. Оно не изменится при переприсваивании другой переменной. Для анонимной функции, значением свойства name будет имя переменной (неявное имя). Если же имя задано, то будет использовано имя функции (явное имя). Это же касается стрелочных функций (в их случае там будет записано имя переменной, т.к. они всегда анонимные).
var foo = function () >; foo.name; // "foo" var foo2 = foo; foo2.name; // "foo" var bar = function baz() >; bar.name; // "baz" console.log(foo === foo2); // true console.log(typeof baz); // undefined console.log(bar === baz); // false (errors because baz == undefined)
Примеры
Следующий пример демонстрирует создание безымянной (анонимной) функции и присвоение её переменной x . Функция возвращает квадрат переданного значения:
var x = function (y) return y * y; >;
Преимущественно анонимные функции используются как колбэк-функции.
.addEventListener("click", function (event) console.log("button is clicked!"); >);
Спецификации
| Specification |
|---|
| ECMAScript Language Specification # sec-function-definitions |
Совместимость с браузерами
BCD tables only load in the browser
Смотрите также
- Functions and function scope (en-US)
- Function
- function statement
- function* statement
- function* expression
- GeneratorFunction
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 7 авг. 2023 г. by MDN contributors.
Your blueprint for a better internet.
MDN
Support
- Product help
- Report an issue
Our communities
Developers
- Web Technologies
- Learn Web Development
- MDN Plus
- Hacks Blog
- Website Privacy Notice
- Cookies
- Legal
- Community Participation Guidelines
Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.
Что такое анонимная функция в JavaScript?
Два наиболее распространенных способа создания функции в Javascript — это использование объявления функции или оператора функции. Анонимные функции создаются с помощью оператора функции. Анонимные функции сильно используются в JavaScript для многих вещей, в частности многих обратных вызовов, используемых многими фреймворками языка. Спецификация ECMAScript не упоминает термин анонимный.
Анонимная функция позволяет программисту создать функцию, которая не имеет имени. Другими словами, анонимные функции могут использоваться для хранения некоторой функциональности в переменной и передавать эту функциональность вокруг нее и создаваться во время выполнения. Анонимные функции объявляются с помощью оператора функции вместо объявления функции.
Определение нормальной функции:
function callMe() < alert('Hello, I am normal function !!'); >callMe();
В приведенном выше скрипте вы видите, что он создает функцию с именем «callMe».
Определение анонимной функции:
var callMe = function() < alert('Hello, I am Anonymous !!'); >callMe();
В приведенном выше скрипте вы можете видеть, что он объявляет неназванную функцию и присваивает ее новой переменной с именем «callMe».
Здесь мы видим, что эти два способа определения функции по существу одинаковы; оба приводят к создаваемой функции и новую переменную с именем «callMe», назначенную для текущей области. Однако вторая функция анонимна. Функциональный оператор можно использовать где угодно, чтобы использовать выражение. Например, вы можете использовать оператор функции, когда назначается переменная, когда параметр передается функции или в операторе return.
Функциональные выражения
Материал на этой странице устарел, поэтому скрыт из оглавления сайта.
Более новая информация по этой теме находится на странице https://learn.javascript.ru/function-expressions.
В JavaScript функция является значением, таким же как строка или число.
Как и любое значение, объявленную функцию можно вывести, вот так:
function sayHi() < alert( "Привет" ); >alert( sayHi ); // выведет код функцииОбратим внимание на то, что в последней строке после sayHi нет скобок. То есть, функция не вызывается, а просто выводится на экран.
Функцию можно скопировать в другую переменную:
function sayHi() < // (1) alert( "Привет" ); >var func = sayHi; // (2) func(); // Привет // (3) sayHi = null; sayHi(); // ошибка (4)- Объявление (1) как бы говорит интерпретатору «создай функцию и помести её в переменную sayHi
- В строке (2) мы копируем функцию в новую переменную func . Ещё раз обратите внимание: после sayHi нет скобок. Если бы они были, то вызов var func = sayHi() записал бы в func результат работы sayHi() (кстати, чему он равен? правильно, undefined , ведь внутри sayHi нет return ).
- На момент (3) функцию можно вызывать и как sayHi() и как func()
- …Однако, в любой момент значение переменной можно поменять. При этом, если оно не функция, то вызов (4) выдаст ошибку.
Обычные значения, такие как числа или строки, представляют собой данные. А функцию можно воспринимать как действие.
Это действие можно запустить через скобки () , а можно и скопировать в другую переменную, как было продемонстрировано выше.
Объявление Function Expression
Существует альтернативный синтаксис для объявления функции, который ещё более наглядно показывает, что функция – это всего лишь разновидность значения переменной.
Он называется «Function Expression» (функциональное выражение) и выглядит так:
var f = function(параметры) < // тело функции >;var sayHi = function(person) < alert( "Привет, " + person ); >; sayHi('Вася');Сравнение с Function Declaration
«Классическое» объявление функции, о котором мы говорили до этого, вида function имя(параметры) <. >, называется в спецификации языка «Function Declaration».
- Function Declaration – функция, объявленная в основном потоке кода.
- Function Expression – объявление функции в контексте какого-либо выражения, например присваивания.
Несмотря на немного разный вид, по сути две эти записи делают одно и то же:
// Function Declaration function sum(a, b) < return a + b; >// Function Expression var sum = function(a, b)
Оба этих объявления говорят интерпретатору: «объяви переменную sum , создай функцию с указанными параметрами и кодом и сохрани её в sum «.
Основное отличие между ними: функции, объявленные как Function Declaration, создаются интерпретатором до выполнения кода.
Поэтому их можно вызвать до объявления, например:
sayHi("Вася"); // Привет, Вася function sayHi(name)
А если бы это было объявление Function Expression, то такой вызов бы не сработал:
sayHi("Вася"); // ошибка! var sayHi = function(name)
Это из-за того, что JavaScript перед запуском кода ищет в нём Function Declaration (их легко найти: они не являются частью выражений и начинаются со слова function ) и обрабатывает их.
А Function Expression создаются в процессе выполнения выражения, в котором созданы, в данном случае – функция будет создана при операции присваивания sayHi = function.
Как правило, возможность Function Declaration вызвать функцию до объявления – это удобно, так как даёт больше свободы в том, как организовать свой код.
Можно расположить функции внизу, а их вызов – сверху или наоборот.
Условное объявление функции
В некоторых случаях «дополнительное удобство» Function Declaration может сослужить плохую службу.
Например, попробуем, в зависимости от условия, объявить функцию sayHi по-разному:
var age = +prompt("Сколько вам лет?", 20); if (age >= 18) < function sayHi() < alert( 'Прошу вас!' ); >> else < function sayHi() < alert( 'До 18 нельзя' ); >> sayHi();Function Declaration при use strict видны только внутри блока, в котором объявлены. Так как код в учебнике выполняется в режиме use strict , то будет ошибка.
А что, если использовать Function Expression?
var age = prompt('Сколько вам лет?'); var sayHi; if (age >= 18) < sayHi = function() < alert( 'Прошу Вас!' ); >> else < sayHi = function() < alert( 'До 18 нельзя' ); >> sayHi();var age = prompt('Сколько вам лет?'); var sayHi = (age >= 18) ? function() < alert('Прошу Вас!'); >: function() < alert('До 18 нельзя'); >; sayHi();Оба этих варианта работают правильно, поскольку, в зависимости от условия, создаётся именно та функция, которая нужна.
Анонимные функции
Взглянем ещё на один пример – функцию ask(question, yes, no) с тремя параметрами:
question Строка-вопрос yes Функция no Функция
Она выводит вопрос на подтверждение question и, в зависимости от согласия пользователя, вызывает функцию yes() или no() :
function ask(question, yes, no) < if (confirm(question)) yes() else no(); >function showOk() < alert( "Вы согласились." ); >function showCancel() < alert( "Вы отменили выполнение." ); >// использование ask("Вы согласны?", showOk, showCancel);Какой-то очень простой код, не правда ли? Зачем, вообще, может понадобиться такая ask ?
…Оказывается, при работе со страницей такие функции как раз очень востребованы, только вот спрашивают они не простым confirm , а выводят более красивое окно с вопросом и могут интеллектуально обработать ввод посетителя. Но это всё потом, когда перейдём к работе с интерфейсом.
Здесь же обратим внимание на то, что то же самое можно написать более коротко:
function ask(question, yes, no) < if (confirm(question)) yes() else no(); >ask( "Вы согласны?", function() < alert("Вы согласились."); >, function() < alert("Вы отменили выполнение."); >);Здесь функции объявлены прямо внутри вызова ask(. ) , даже без присвоения им имени.
Функциональное выражение, которое не записывается в переменную, называют анонимной функцией.
Действительно, зачем нам записывать функцию в переменную, если мы не собираемся вызывать её ещё раз? Можно просто объявить непосредственно там, где функция нужна.
Такого рода код возникает естественно, он соответствует «духу» JavaScript.
new Function
Существует ещё один способ создания функции, который используется очень редко, но упомянем и его для полноты картины.
Он позволяет создавать функцию полностью «на лету» из строки, вот так:
var sum = new Function('a,b', ' return a+b; '); var result = sum(1, 2); alert( result ); // 3То есть, функция создаётся вызовом new Function(params, code) :
params Параметры функции через запятую в виде строки. code Код функции в виде строки.
Таким образом можно конструировать функцию, код которой неизвестен на момент написания программы, но строка с ним генерируется или подгружается динамически во время её выполнения.
Пример использования – динамическая компиляция шаблонов на JavaScript, мы встретимся с ней позже, при работе с интерфейсами.
Итого
Функции в JavaScript являются значениями. Их можно присваивать, передавать, создавать в любом месте кода.
- Если функция объявлена в основном потоке кода, то это Function Declaration.
- Если функция создана как часть выражения, то это Function Expression.
Между этими двумя основными способами создания функций есть следующие различия:
| Function Declaration | Function Expression | |
|---|---|---|
| Время создания | До выполнения первой строчки кода. | Когда управление достигает строки с функцией. |
| Можно вызвать до объявления | Да (т.к. создаётся заранее) | Нет |
| Условное объявление в if | Не работает | Работает |
Иногда в коде начинающих разработчиков можно увидеть много Function Expression. Почему-то, видимо, не очень понимая происходящее, функции решают создавать как var func = function() , но в большинстве случаев обычное объявление функции – лучше.
Если нет явной причины использовать Function Expression – предпочитайте Function Declaration.
Сравните по читаемости:
// Function Expression var f = function() < . >// Function Declaration function f()
Function Declaration короче и лучше читается. Дополнительный бонус – такие функции можно вызывать до того, как они объявлены.
Используйте Function Expression только там, где это действительно нужно и удобно.