如何按名称执行带参数的函数

Question

I need a way to execute function that has parameters:

func1(param1, param2) 
{...
}

when I get the function name and its parameters as parameters (or string variables) in another function:

parentFunc()
{
  var funcName="func1";
  var params = {'param1': 'A', 'param2': 'B'}
   //Here I want to execute the funcName (func1) with its params.
}

I've tried creating customEvent, but the param didn't pass:

var event = new CustomEvent("func1", { 
  "param1": 'A', "param2": 'B'
});

this.element.dispatchEvent(event);//The element is the "parent" 
                                  //htmlElement that responsible to the 
                                  //event

*The functions are not in the same file and I'm doing in a Single Page Application (SPA), so doing it as shown below is not good enough:

var fn = window[settings.functionName];

Generally - what I'm trying to do is in a custom element - have the option to decide what function is executed (it is in the parent template) when there is event in the custom element

Answer 1

Please consider sending something else to your function than the name of the function to execute. You can try for example a mapping between the condition and the function to execute. But if your heart is set on sending the function name or you have no way of not doing it that way, then your friend is the eval function :

function evaluate(name, params) {
    let toExecute = (name || 'eval') + '(';
    params = (params instanceof Object ? params : {});
    for (let key in params) {
        toExecute += params[key] + ', ';
    }
    if (toExecute[toExecute.length - 2] === ',') {
        toExecute = toExecute.substr(0, toExecute.length - 2);
    }
    toExecute += ');';
    eval(toExecute);
}

function parentFunc() {
    var funcName="func1";
    var params = {'param1': 'A', 'param2': 'B'}

    //Here I want to execute the funcName (func1) with its params.
    evaluate(funcName, params);
}

Please take a moment to read about the dangers of using eval here .

Answer 2

You can passed name function as param to callback:

parentFunc(funcName)
{
        var params = {'param1': 'A', 'param2': 'B'}
        funcName(params);
}

if you want function with params just:

parentFunc(funcName, param)
{            
        funcName(param);
}

parentFunc(func1, 'A' )

Answer 3

I didn't really understand what you're trying to accomplish by this. But I'd do something like this:

var myObject = {
  func1: func1
};

function parentFunc() {
  var funcName="func1";
  var params = {'param1': 'A', 'param2': 'B'};
  myObject[funcName](params.param1,params.param2);     
}

parentFunc();

function func1(param1, param2) {
  console.log(param1);
  console.log(param2);
}

hope it helps.

Answer 4

I managed to do it in Aurelia: This is the custom element with the foucusout.trigger which calls to the focusoutAction in the appropriate timing:

<template>
 <label>
   ${title} - ${fieldName}<input title.bind="title" 
   focusout.trigger="focusoutAction()" focusin.trigger="focusInAction()" 
   class="${cssClass}" />
  </label>
</template>

This is the usage of the custom element in the parent view with the focusout.call attribute:

 <form-input field-name="firstName" title="First Name" 
 place-holder="Enter first name" 
 on-focusout.call="validateInput(nameOfElement)" />

And this is the relevant code in the view model of the custom control:

@bindable onFocusout;

focusoutAction() {

   var args =
   {
      nameOfElement: this.fieldName
   };
   this.onFocusout(args);
}