Анонимные функции в JavaScript

JavaScript
На чтение 10 мин Просмотров 19 Опубликовано

В JavaScript также возможно создание анонимных функций. Анонимная функция в JavaScript — это тип функции, которая не имеет имени после ключевого слова function.

Термин «анонимный» означает что-то неизвестное или не имеющее идентичности. Когда мы создаем анонимную функцию, мы объявляем ее без идентификатора после ключевого слова function.

Анонимные функции также иногда называются лямбда-функциями в JavaScript. Это невероятно мощные программные возможности, и мы можем использовать их множеством способов.

По структуре они похожи на обычные функции, за исключением того, что у них нет имени. Давайте разберемся с полным синтаксисом анонимных функций.

Содержание
  1. Синтаксис анонимных функций JavaScript
  2. Синтаксис объявления анонимной функции с использованием конструктора функций
  3. Анонимные функции при создании объекта
  4. Анонимные функции при создании списка
  5. Передача анонимной функции в качестве параметра другим функциям
  6. Анонимные функции в условной логике
  7. Использование анонимных функций в JavaScript
  8. Выражения немедленного выполнения функции

Синтаксис анонимных функций JavaScript

Общий синтаксис объявления анонимной функции в JavaScript выглядит следующим образом:

var varname = function(parameter-list)
{
  // function body.
};

В приведенном выше синтаксисе мы создали анонимную функцию с ключевым словом function и списком параметров и присвоили ее переменной с именем varname. Также можно написать анонимную функцию в JavaScript следующим образом:

function(parameter-list)
{
  // function body.
};

Приведенный выше код является допустимым. Конечно, мы никогда не сможем вызвать эту функцию, поскольку на нее нет указателя. Не забудьте добавить конечную (;) точку с запятой после анонимных функций в JavaScript.

Основной концентрированный момент заключается в том, что после ключевого слова function нет имени функции. С обычной функцией мы используем имя после ключевого слова function, как показано в следующем примере кода:

function functionName(parameter-list) 
{
   // function body.
}
functionName(); // Calling function.

В этом примере мы определили функцию normal(), которая является нормальной функцией. Это фундаментальное различие между анонимной функцией и нормальной функцией.

Рассмотрим пример, в котором мы объявляем анонимную функцию в программе JavaScript.

Пример 1:

<html>
<head>
  <title>JavaScript Anonymous Functions Example</title>
<script>
var firstName = function(name)
{
   document.write(name);
};
firstName("Tripti"); // calling anonymous function using variable name.
</script>
</head>
<body>
</body>
</html>

Output:
     Tripti

В этом примере мы определили анонимную функцию, которая не имеет имени, и эта функция установлена ​​в переменной с именем firstName. Свойство name переменной firstName будет содержать пустую строку, поскольку у функции нет имени.

Синтаксис объявления анонимной функции с использованием конструктора функций

Мы также можем определить анонимную функцию с помощью конструктора. Общий синтаксис такой:

var varname = new Function("para1", "para2",... "paran", "function body");

В приведенном выше синтаксисе первые параметры являются аргументами функции, а последний параметр — телом функции. Полная функция присваивается переменной.

Рассмотрим следующий пример кода ниже.

Пример 2:

<html>
<head>
   <title>JavaScript Anonymous Functions Example</title>
<script>
// Declare anonymous function using constructor.
   var sum = new Function("x", "y", "return x+y");
   document.write(sum(20, 30));
</script>
</head>
</html>

Output:
      50

Это эквивалентно следующему коду:

function sum(x, y)
{
  return x+y;
}
 document.write(sum(20, 30));

Анонимные функции при создании объекта

Мы также можем назначить анонимную функцию свойству объекта. Когда мы это сделаем, мы можем вызвать эту функцию с помощью оператора точки (.). Давайте рассмотрим очень простой пример программы:

Пример 3:

<html>
<head>
   <title>Anonymous functions while creating object property</title>
<script>
// Creating an object property say m which has an anonymous function.
   var m = {
      msg: function() {
        document.write("Welcome to Scientech Easy");
      }
   }
m.msg();
</script>
</head>
<body>
</body>
</html>

Output:
     Welcome to Scientech Easy

В этом примере программы мы создали объект со свойством m, который является анонимной функцией. Нам не нужно называть эту функцию, поскольку мы вызываем ее как свойство объекта.

Анонимные функции при создании списка

Давайте рассмотрим пример программы, в которой мы создадим две анонимные функции и добавим их в массив. Затем мы пройдемся по массиву и выполним функции в списке массива. Посмотрите на следующий пример кода, чтобы лучше понять.

Пример 4:

<html>
<head>
    <title>Anonymous functions while creating list</title>
<script>
// Creating an array say m which has a list of anonymous functions.
   var m = [
      function() {document.write("One", "<br>")},
      function() {document.write("Two", "<br>")},
      function() {document.write("Three")},
   ];
// Iterating array.
   for(var i = 0; i < m.length; i++)
   {
     m[i](); // Calling functions.
   }
</script>
</head>
<body>
</body>
</html>

Output:
     One
     Two
     Three

Передача анонимной функции в качестве параметра другим функциям

Это одно из самых популярных применений, и вы найдете такой код на самом профессиональном сайте. Давайте рассмотрим пример программы, в которой мы передадим анонимную функцию в качестве параметра другой обычной функции. Давайте напишем для нее код.

Пример 5:

<html>
<head>
   <title>Passing Anonymous functions to other functions as a parameter</title>
<script>
// Creating a normal function with a parameter.
   function display(funct)
   {
     funct(); // Executing function as a parameter.
   }
// Calling the normal function by passing an anonymous function as a parameter.
   display(function() {
        document.write("Passing anonymous function as a parameter to normal function");
    });
</script>
</head>
<body>
</body>
</html>

Output:
     Passing anonymous function as a parameter to normal function

В этом примере программы мы передаем анонимную функцию другой обычной функции с именем display. В принимающей функции мы выполняем анонимную функцию, переданную в качестве параметра.

Этот метод может быть очень удобен, если мы определяем одноразовые функции, такие как обработчики событий или методы объектов. Давайте рассмотрим еще один пример, в котором мы передадим небольшую анонимную функцию в качестве аргумента функции setTimeout().

Пример 6:

<html>
<head>
    <title>Passing an anonymous function as argument to setTimeout function</title>
<script>
  setTimeout(function() { document.write("Greetings"); },2000);
</script>
</head>
</html>

При запуске этого кода с задержкой в ​​2 секунды будет сгенерирован следующий вывод.

Output:
      Greetings

Анонимные функции в условной логике

В JavaScript мы можем использовать анонимные функциональные выражения в операторе if else. Рассмотрим следующий пример программы.

Пример 7:

<html>
<head>
   <title>Using anonymous functions in conditionally change behavior</title>
<script>
var shape;
if(shape === "Circle")
{
   shape = function() {
       return "Drawing circle";
   }
}
else {
   shape = function() {
      return "Drawing rectangle";
   }
}
document.write(shape());
</script>
</head>
<body>
</body>
</html>

Output:
     Drawing rectangle

В этом примере мы назначаем другую реализацию переменной shape на основе условия. Этот шаблон может быть полезен, если вы используете его с осторожностью. При чрезмерном использовании результат может быть нечитаемым и код будет трудно отладить.

Использование анонимных функций в JavaScript

Существует несколько вариантов использования анонимных функций в объектно-ориентированном программировании JavaScript. Они следующие:

1. Анонимная функция помогает нам избегать конфликтов имен и позволяет скрыть код, применяемый к объекту, внутри объекта.

2. Мы не можем вызывать анонимные функции, потому что у них нет имени. Но когда мы присваиваем их переменной, мы можем вызывать их, используя имя переменной.

3. Мы также можем передать анонимную функцию любым другим функциям в качестве аргумента в JavaScript.

4. Другой важный сценарий определения анонимной функции — обратные вызовы. Давайте создадим программу JavaScript, в которой мы будем использовать анонимную функцию как обратный вызов внутри другой анонимной функции.

Пример 8:

<html>
<head>
   <title>Passing an anonymous function as callback to function</title>
<script>
// Declaring the first anonymous function that uses another function reference inside.
   let funcWithCallback = function(func) {
       document.write(func());
    }
// Invoking previous declared anonymous function with an anonymous function.
   funcWithCallback(function() {
       return "Hello JavaScript";
   });
</script>
</head>
</html>

При запуске этого кода в браузере будет сгенерирован следующий вывод.

Output:
      Hello JavaScript

5. Анонимная функция в JavaScript весьма полезна, когда вы имеете дело с событиями JavaScript. Например, когда пользователь нажимает кнопку мыши на веб-странице, будет вызвана анонимная функция и отображено сообщение в веб-браузере.

Пример 9:

<html>
<head>
   <title>Using anonymous function when dealing with JavaScript events</title>
<script>
document.onclick = function() {
   window.alert("Hello JavaScript");
};
</script>
</head>
</html>

Когда вы запустите этот код и кликните на веб-странице, в веб-браузере с помощью всплывающего окна будет выведен следующий вывод.

Output:
     Hello JavaScript

Приведенный выше код аналогичен приведенному ниже коду.

<script>
function msg() {
   window.alert("Hello JavaScript");
}
document.onclick = msg;
</script>

Как вы можете видеть в обоих кодах скриптов, анонимная функция — это удобный способ обработки события без необходимости определять функцию в другом месте и затем вызывать ее.

Выражения немедленного выполнения функции

JavaScript также позволяет нам объявлять функцию и выполнять ее сразу после того, как мы закончили ее объявлять. Этот метод называется выражением немедленного выполнения функции (IFEE).

В некоторых книгах или на сайтах ее также называют самоисполняющейся или самовызывающейся функцией. Давайте рассмотрим пример программы, основанной на ней.

Пример 10:

<html>
<head>
   <title>Immediate function execution expressions</title>
<script>
(function() {
   document.write("IFEE", "<br>");
}());
// Another declaration.
(function() {
    document.write("IFEE");
})();
</script>
</head>
</html> 

Output:
      IFEE
      IFEE

Мы можем использовать IFEE для создания области действия функции вокруг инициализации кода или для выполнения некоторой функциональности один раз. Здесь объявление именованной функции — пустая трата памяти.

Непосредственные функции могут получать параметры, а также возвращать значения. Давайте создадим программу JavaScript, в которой мы будем использовать IFEE с параметрами и возвращать значение из IFEE.

Пример 11:

<html>
<head>
   <title>IFEE with parameter and returned value</title>
<script>
let returnedValue = (function(msg) {
   return msg;
}("I love JavaScript programming"));
document.write(returnedValue); // calling function.
</script>
</head>
</html>

Output:
      I love JavaScript programming!

В этом примере программы IFEE принимает аргумент msg, который только что возвращается из выражения, выполняющего непосредственную функцию.

В этом уроке вы изучили анонимные функции в JavaScript с помощью различных примеров программ. Надеюсь, вы поняли основную концепцию анонимной функции и то, как использовать ее в программе JavaScript.

Оцените статью
© 2025 Блог о разработке сайтов на HTML, CSS и Javascript
Adblock
detector