Как вызвать функцию в javascript

JS Helper

И так, у нас есть функция под именем myFunc и переменная name которая содержит в себе имя функции.

Как можно вызвать функцию, используя переменную ?
Есть 3 варианта решения этой задачи:

• Использовать объект window
• Использовать функцию eval()
• Создать свой объект, в котором описать функцию.

1) Использовать объект window
На мой взгляд самый подходящий вариант.
Делается следующим образом:

 window[funcName](params); 

funcName — имя вызываемой функции
params — параметры передаваемые функции.

Нашу задачу можно решить следующим образом:

 var name = 'myFunc'; function myFunc(text) < alert(text); >window[name]('bla bla bla'); //Вызываем функцию myFunc и передаем в качестве параметра текст "bla bla bla" 

Вот еще примеры:

 window['alert']('bla bla bla'); // Выведется Alert с текстом "bla bla bla" var myFunc = 'myAlert'; function myAlert(text) < alert(text); >window[myFunc]('bla bla bla'); // Выведется Alert с текстом "bla bla bla" 

2) Использовать функцию eval()


С помощью функции eval() можно выполнить какую ту часть кода, в том числе и вызвать функцию.
Пример:

 function myAlert(text) < alert(text); >eval('myAlert("bla bla bla");'); 

Нашу задачу можно решить так:

 var name = 'myFunc'; function myFunc(text) < alert(text); >eval(name+'("bla bla bla");'); //Вызываем функцию myFunc и передаем в качестве параметра текст "bla bla bla" 

Но не злоупотребляйте данной функции так как неправильное использование eval():

• Открывает ваш код для Инъекций
• Отладка может быть более сложная (без номера строк)
• Код выполняется медленее

3) Создать свой объект, в котором описать функцию

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

 var obj = < firstFunc: function(text) < alert('first func: '+text); >, secondFunc: function(text) < alert('second func: '+text); >> obj['firstFunc']("bla bla bla"); //Вызываем функцию firstFunc obj['secondFunc']("bla bla bla"); //Вызываем функцию secondFunc var name = 'first'; obj[name+'Func']("bla bla bla"); //Вызываем функцию firstFunc 

Нашу задачу можно решить следующим образом:

 var name = 'myFunc'; obj = < // Описываем наш объект myFunc: function(text) < //Описываем нашу функцию в объекте alert(text); >> obj[name]("bla bla bla"); //Вызываем функцию myFunc из объекта obj и передаем в качестве параметра текст "bla bla bla" 

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

Scope переменных

Scope или область видимости относится к доступности переменных и функций в определенных частях кода.

В JavaScript переменная имеет два типа области видимости:

Глобальный Scope

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

Рассмотрим пример переменной глобальной области видимости:

// программа для вывода текста let a = 'привет'; function greet() < console.log(a); >greet(); // привет

В приведенной выше программе переменная a объявлена в верхней части программы и является глобальной переменной. Это означает, что переменная a может быть использована в любом месте программы.

Значение глобальной переменной может быть изменено внутри функции. Например,

// программа, чтобы показать изменение глобальной переменной let a = 'привет'; function greet() < a = 3; >// до вызова функции console.log(a); // после вызова функции greet(); console.log(a); // 3

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

Следовательно, значение a меняется после его изменения внутри функции.

Примечание: Следует избегать использования глобальных переменных, поскольку значение глобальной переменной может изменяться в различных областях программы. Это может привести к неожиданным результатам в программе.

В JavaScript переменную можно использовать и без ее объявления. Если переменная используется без объявления, она автоматически становится глобальной переменной.

function greet() < a = 'привет'; >greet(); console.log(a); // привет

В приведенной выше программе переменная a является глобальной переменной.

Если бы переменная была объявлена с помощью let a = «hello» , программа выдала бы ошибку.

Примечание: В JavaScript существует «strict mode»; , в котором переменная не может быть использована без ее объявления.

локальный Scope

Переменная также может иметь локальную область видимости, то есть доступ к ней возможен только внутри функции.

Пример 1: Переменная локальной области

// программа, показывающая локальную область видимости переменной let a = 'привет, '; function greet() < let b = 'мир'; console.log(a + b); >greet(); console.log(a + b); // ошибка

Вывод в консоль:

привет, мир Uncaught ReferenceError: b is not defined

В приведенной выше программе переменная a является глобальной переменной, а переменная b — локальной переменной. Доступ к переменной b возможен только внутри функции greet . Поэтому, когда мы пытаемся получить доступ к переменной b вне функции, возникает ошибка.

let имеет блочный scope

Ключевое слово let имеет блочную область видимости. Доступ к переменной возможен только в непосредственном блоке.

Пример 3: Блочная область видимости переменной

// программа, показывающая концепцию блочной области видимости // глобальная переменная let a = 'Привет'; function greet() < // локальная переменная let b = 'Мир'; console.log(a + ' ' + b); if (b == 'Мир') < // переменная блочной видимости let c = 'привет'; console.log(a + ' ' + b + ' ' + c); >// переменная c здесь недоступна console.log(a + ' ' + b + ' ' + c); > greet();

Вывод в консоль:

Привет Мир Привет Мир привет Uncaught ReferenceError: c is not defined

В приведенной выше программе переменная:

• a
  • это глобальная переменная. К ней можно обратиться в любом месте программы.
  • это локальная переменная. Доступ к ней возможен только внутри функции greet .
  • это переменная блочной scope. Доступ к ней возможен только внутри блока оператора if .

  Поэтому в приведенной выше программе первые два console.log() работают без проблем.

  Однако, когда мы пытаемся получить доступ к переменной c , с блочной scope, вне блока в третьей строке console.log() . Это приводит к ошибке.

  Примечание: В JavaScript переменная var относится к функциональной scope, а let — к блочной scope. Если попытаться использовать var c = ‘hello’; внутри оператора if в приведенной выше программе, вся программа будет работать, так как c будет рассматриваться как локальная переменная.

  Функция

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

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

  Для использования функции, сначала, нужно её объявить. Существует несколько способов, но пока мы сосредоточимся на одном простом варианте.

  function sayHello(name)  alert("Здравствуйте, " + name); > 

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

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

  sayHello("Иван"); // "Здравствуйте, Иван" sayHello("Светлана"); // "Здравствуйте, Светлана" 

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

  Также в JavaScript есть анонимные (или безымянные) функции. Такие функции не имеют своего имени.

  function()  alert('привет'); // встроенная функция, показывающая диалоговое окно с сообщением > 

  Само по себе такое объявление не имеет смысла, из-за того, что у такой функции нет идентификатора, то есть имени, по которому мы сможем к ней обратиться и вызвать. Но, например, если такую функцию передать как значение переменной, то мы сможем её вызвать по имени самой переменной:

  let myFunc = function()  alert("привет"); >; myFunc(); 

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

  setTimeout(func, delay); 

  Допустим, мы хотим показать приветствие пользователю через 5 секунд после захода на сайт. Тогда, во втором аргументе нужно указать 5000 (5 секунд), а в первом — передать функцию, которая будет непосредственно выполнять необходимую задачу по отображению приветствия. Для этой цели лучше всего подойдет анонимная функция потому, что здесь основное значение имеет само тело функции, а не её название.

  setTimeout(function()  alert("привет"); >, 5000); 

  Такая функция, которая передается в качестве аргумента другой функции, еще называется функцией обратного вызова (callback function). Функция обратного вызова даёт возможность функциям выполнять код, который был передан им в аргументах при их вызове. Например:

  function sayHello(name)  alert("Здравствуйте, " + name); > function processUserInput(callback)  var name = prompt("Введите своё имя."); callback(name); > processUserInput(sayHello); 

  В этом примере, при вызове функции processUserInput , ей передаётся в качестве аргумента функция sayHello . После того, как пользователь введёт своё имя name , эта функция обратного вызова будет вызвана с именем пользователя в качестве аргумента.

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

  Функции в JavaScript на самом деле являются объектами. Данная тема будет детально рассматриваться в следующих частях курса, но для базового понимания этой концепции достаточно знать, что JavaScript преобразует созданные нами функции в объект, который, на примере представленной ранее функции sayHello , схематично можно представить как

   name: sayHello, length: 1, // другие свойства. > 

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

  function sayHello(name)  alert("Здравствуйте, " + name); > sayHello.newProperty = "Новое свойство"; sayHello.newProperty; 

  Или же можно наоборот, добавить функцию в свойство другого объекта:

  let car =  color: "red", wheels: 4, engine:  cylinders: 4, size: 2.2 >, drive: function()  alert("Внимание, я еду!"); > >; 

  Здесь drive — это свойство объекта car , значением которого является анонимная функция. Такая функция, присвоенная свойству объекта, называется методом.

  В JavaScript есть набор уже встроенных функций, например:

  let myNumber = Math.random(); 

  Здесь Math является встроенным объектом, хранящим в своих свойствах и методах различные математические константы и функции. А его метод random() генерирует и возвращает случайное число от 0 до 1. Также, в самом браузере есть встроенные функции, например alert и prompt , которые использовались ранее. Технически эти встроенные функции являются методами внутреннего объекта браузера window и полная запись их вызова выглядит так:

  window.alert(message); let result = window.prompt(message, default); 

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

  Все функции в JavaScript возвращают значение. Им является то, что указано после ключевого слова return

  function square(number)  return number * number; > let result = square(2); // 4 

  Если в функции явно не указано возвращаемое значение, то она вернет undefined

  function sayHello(name)  alert("Здравствуйте, " + name); // нет явно указанного возвращаемого значения через return > let result = sayHello("Мария"); // сначала отобразится сообщение, а затем переменной result присвоится значение undefined 

  Ключевое слово return завершает выполнение функции и возвращает то, что указано после него, или undefined , если после него нет никакого значения. Поэтому код, написанный ниже команды return , выполнятся не будет

  function sayHello(name)  alert("Здравствуйте, " + name); return; alert("До свидания, " + name); // не выполнится, т. к. команда return завершит выполнение функции раньше, чем выполнится эта строка > let result = sayHello("Мария"); // сначала отобразится сообщение "Здравствуйте, Мария", а затем переменной result присвоится значение undefined, второе сообщение не отобразится 

  Так как сейчас уже пройдены основные концепции JavaScript, такие, как переменные, объекты и функции, то теперь можно остановится на таком понятии, как Идентификатор, которое будет часто использоваться в дальнейшем. Идентификаторы — это имена переменных, функций или свойств объекта.

  Дата изменения: February 26, 2023

  Поделиться

  Обнаружили ошибку или хотите добавить что-то своё в документацию? Отредактируйте эту страницу на GitHub!

  Функции в JavaScript

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

  Чтобы не повторять тот же код множество раз, используют функции (functions). По сути, функции — это основные «строительные кирпичики» программы на JavaScript.

  Примеры встроенных функций: • prompt(message, default); • alert(message); • confirm(question).

  Однако в JavaScript можно создавать и свои функции.

  Объявление функций в JS

  Рассмотрим пример создания function для показа сообщений showMessage() :

  function showMessage()

  В вышеприведённом примере ключевое слово — function, которое идёт в самом начале. Потом прописывается имя функции, затем параметры (в скобках), далее — тело функции (код, выполняемый при вызове).

  Объявленная таким образом функция будет доступна по имени:

   
  function showMessage() < alert( 'Приветствуем вас на сайте!' ); >showMessage(); showMessage();
  Отображённый код выведет сообщение 2 раза, так как, грубо говоря, выше мы уже сформировали своеобразную ссылку на текст сообщения, в результате чего происходит передача данных. Это демонстрирует нам главную цель создания функций: решение проблемы излишнего дублирования кода в JavaScript. Если же вам понадобится поменять текст либо метод его вызова, это можно сделать лишь в одном месте — в функции, отвечающей за его вызов.
  Локальные переменные функции
  В функцию могут входить и локальные переменные (объявляются через var). Они видны только внутри функции:
   
  function showMessage() < var message = 'Привет, моё имя — Петя!'; // это локальная переменная alert( message ); >showMessage(); // 'Привет, моё имя — Петя!' alert( message ); // 
  Помните, что блоки while, switch, for, if/else, do..while никак не влияют на зону видимости переменных, то есть при объявлении переменных в данных блоках они будут видны во всей функции. Пример:
   
  function count() < // переменные i и j не будут удалены по окончании цикла for (var i = 0; i < 3; i++) < var j = i * 2; >alert( i ); // i=3, последнее значение i, цикл при нём перестал работать alert( j ); // j=4, последнее значение j, которое цикл вычислил >
  При этом неважно, где конкретно в function вы объявляете переменную. Вне зависимости от метода ваших действий объявление сработает одни раз и распространится на всю функцию:
   
  function count() < var i, j; // здесь мы передвинули объявление var в начало for (i = 0; i < 3; i++) < j = i * 2; >alert( i ); // i=3 alert( j ); // j=4 >
  Внешние переменные функции
  Функция позволяет вызвать и внешнюю переменную, например:
   
  var userName = 'Петя'; function showMessage() < var message = 'Привет, моё имя' + userName; alert(message); >showMessage(); // Привет, моё имя Петя
  Доступ возможен на чтение и запись. Но раз переменная внешняя, изменения видны и снаружи функции:
   
  var userName = 'Петя'; function showMessage() < userName = 'Коля'; // (1) передача во внешнюю переменную, присвоение других данных var message = 'Привет, я ' + userName; alert( message ); >showMessage(); alert( userName ); // Коля, т. к. значение внешней переменной у функции изменилось
  Однако если бы мы внутри функции в строке (1) объявили свою локальную переменную var userName , все обращения задействовали бы её, то есть внешняя переменная не изменилась бы.
  Параметры, которые можно вызвать функцией
  При вызове function ей можно отправить данные для обработки. Например, нижеследующий код выведет 2 сообщения:
   
  function showMessage(from, text) < // параметры from, text from = "** " + from + " **"; // здесь вставляем сложный код оформления alert(from + ': ' + text); >showMessage('Петя', 'Привет!'); showMessage('Петя', 'Как дела?');
  Помните, что когда код будет передан, параметры скопируются в локальные переменные. Также функцию можно вызвать практически с любым количеством аргументов, а если при вызове параметр не будет передан, он считается равным undefined. К примеру, функцию отображения сообщений showMessage(from, text) можно без проблем вызвать, используя один аргумент:
   
  showMessage("Петя");
  Выбор имени function
  При выборе имён в function применяют те же правила, что и когда выбирают имена переменной. Однако следует помнить, что именем должен быть глагол, ведь функция — это действие. Как правило, в качестве имени используют глагольные префиксы, плюс уточнения.
  Функцию, которая что-то показывает, называют show (это лучший вариант для имени):
   
  showMessage(..) // "показать" сообщение
  Запуск function, которая что-то получает, называют get, вычисляет — calc и т. д.
  Примеры, каким именем можно назвать функцию:
   
  getAge(..) // get, "получает" возраст calcD(..) // calc, "вычисляет" дискриминант createForm(..) // create, "создаёт" форму checkPermission(..) // check, "проверяет" разрешение, возвращает true/false
  Использование данного метода названия — удобная штука, ведь, взглянув на функцию, мы примерно поймём, что она делает, какое значение возвращает. И даже если эту функцию написал кто-то другой, вы будете иметь представление о ней.
  Остаётся запомнить, что вне зависимости от метода названия, одна функция — это одно действие. Если функция подразумевает поддействия, желательно выделить их в отдельные функции.
  Функция jQuery() в JavaScript
  Говоря о применении функций в JS, нельзя не упомянуть jQuery — известнейшую библиотеку языка программирования JavaScript, благодаря которой осуществляется взаимодействие HTML и JavaScript. Работа с ней начинается с вызова основной функции jQuery() либо $() . Данная функция (function) может выполнять разные действия, что зависит от того, какое значение передать в качестве параметров аргумента.
  Какие задачи решаются с помощью этой функции?
  В зависимости от параметров возможно выполнение следующих действий: - поиск на основе селектора элементов в DOM-дереве и их возвращение в виде объекта; - оборачивание DOM-элементов, указанных в качестве параметров аргумента, в объект jQuery; - создание DOM-элементов в памяти с помощью HTML-строки, переданной в качестве аргумента функции; - выполнение указанной функции после того, как DOM-дерево окончательно загрузится браузером; - оборачивание простого JavaScript-объекта, содержащего ноль либо больше пар «ключ-значение» в объект jQuery; - клонирование объекта (актуально, если его нужно передать в качестве параметров функции).
  Если параметры не указывать, то function возвращает пустой jQuery-объект.
  Для примера рассмотрим функцию jQuery(html,attributes) и функцию jQuery(html[,ownerDocument]) .
  Функция jQuery(html,attributes)
  Function служит для создания DOM-элемента с параметрами. Необходимый элемент указывается в первом аргументе с помощью HTML-строки. Атрибуты к нему указываются во втором аргументе с помощью объекта JavaScript (PlainObject).
  Данный способ вызова функции имеет два параметра: • html — обязательный параметр типа htmlString, содержит DOM-элемент; • attributes — необязательный параметр типа PlainObject. Это объект, содержащий атрибуты, методы и события, которые нужно передать создаваемому элементу.
  Функция jQuery(html[,ownerDocument])
  Эта function позволяет создавать DOM-узлы в памяти, что называется «на лету», используя HTML-строку, которую можно передать в качестве аргумента. Способ (метод) вызова функции даёт возможность запустить её с помощью двух параметров: - html — относится к обязательному параметру типа htmlString. По сути, это строка, содержащая HTML-код; - ownerDocument — относится к необязательным параметрам типа document.
  Принцип работы функции: - анализируется значение параметров; - если он выглядит, как HTML-код, функция обрабатывает его с помощью метода $.parseHTML() ; - после обработки запускается процесс создания DOM-узлов (применяется браузерный механизм .innerHTML ); - в конечном итоге функция возвращает объект jQuery, включающий созданные DOM-узлы.
  Если пользоваться только одним параметром, элементы создаются для текущего документа. Если хотите создать элементы для другого документа, нужно передавать и 1-й, и 2-й параметры.
  Ссылки в JS
  В заключении поговорим о ссылке в JavaScript. Под ссылкой будем понимать видимую часть текста или кода, нажатие на которую приведёт к переходу по ней. Рассмотрим три основных метода, в результате применения которых образуется кликабельная ссылка.
  
  Самый простой метод, позволяющий осуществлять вызов — вывод alert в ссылке. Пример такой ссылки (ссылку можно запустить без проблем из любого браузера):
  
  
  Второй метод вызова ссылки имеет более сложную конструкцию. В этом случае ссылку можно сделать с помощью функции document.write(). А оформить такую ссылку можно следующим образом:
  
  
  В качестве третьего метода продемонстрируем ещё более усложнённый вариант. Ссылка и её вызов осуществляются с помощью переменных, т. к. сама ссылка и её текст выведены в отдельные переменные:
  
  Кроме того, можно вызывать ссылку через таблицу, div, ячейку таблицы и путём использования другого метода. Собственно говоря, использование этих методов для передачи ссылок — довольно странное занятие, если вспомнить, что у нас есть простые, эффективные и всем понятные решения с html и php.
  Читать:
  Как выйти из аккаунта telegram