понедельник, 21 февраля 2011 г.

Как вызвать функцию по имени или вызов функции используя объект window

Многие новички задаются вопросом типа:

  • "Как вызвать функцию по ее имени"
  • "Как вызвать функцию если ее имя хранится в переменной"
  • Ну, и тому подобные вопросы :)
Возьмем пример задачи:


var name = 'myFunc';

function myFunc(text) {
    alert(text);
}
И так, у нас есть функция под именем 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 хотя редко бывают ситуации когда имя функции берется из переменной, по сути вам даже стоит избегать таких ситуации и искать другие решения.

5 комментариев:

  1. Спасибо за статью.
    Все очень понятно и по делу написано.
    Очень часто бывает сложно найти по js нормальную документацию или описание на по сути элементарные вещи.

    ОтветитьУдалить
  2. Этот комментарий был удален автором.

    ОтветитьУдалить
  3. Подскажите пожалуйста, если имеется:
    function myFunc(name){
    this.name = name;
    }
    myFunc.prototype.getval = function(){
    this.val = true;
    }
    Как в таком варианте вызвать функцию без использования window?

    ОтветитьУдалить
  4. keith titanium - www.titanium-arts.com
    keith titanium. titanium grades This game is played with a deck of cards from titanium apple watch band ancient Chinese art. It is 2019 ford edge titanium for sale a good game for titanium bracelet the players titanium oxide to learn and enjoy. Rating: 3.7 · ‎1 review

    ОтветитьУдалить