Dize olarak adını aldığımda bir JavaScript işlevini yürütme

Ben bir dize olarak JavaScript bir fonksiyonun adı var. Daha sonra arayabilmek için bunu bir işlev işaretçisine nasıl dönüştürebilirim?

Koşullara bağlı olarak, yönteme çeşitli argümanlar da iletmem gerekebilir.

Bazı fonksiyonlar şeklinde olabilir namespace.namespace.function(args[...]).

Sen evalsürece kullanmaKesinlikle, başka seçeneğiniz olmadığı .

Daha önce de belirtildiği gibi, böyle bir şey kullanmak bunu yapmanın en iyi yolu olacaktır:

window["functionName"](arguments);

Ancak bu, bir isim-alanı işlevi ile çalışmaz:

window["My.Namespace.functionName"](arguments); // fail

Bunu şu şekilde yaparsınız:

window["My"]["Namespace"]["functionName"](arguments); // succeeds

Bunu kolaylaştırmak ve biraz esneklik sağlamak için, bir kullanışlılık işlevi:

function executeFunctionByName(functionName, context /*, args */) {
  var args = Array.prototype.slice.call(arguments, 2);
  var namespaces = functionName.split(".");
  var func = namespaces.pop();
  for(var i = 0; i < namespaces.length; i++) {
    context = context[namespaces[i]];
  }
  return context[func].apply(context, args);
}

Buna şöyle derdiniz:

executeFunctionByName("My.Namespace.functionName", window, arguments);

Unutmayın, istediğiniz bağlamda geçebilirsiniz, böylece bu yukarıdakiyle aynı olacaktır:

executeFunctionByName("Namespace.functionName", My, arguments);

Jason Bunting'in çok faydalı fonksiyonunun biraz değiştirilmiş bir versiyonunu yayınlayacağımı düşündüm .

İlk olarak, slice () için ikinci bir parametre sağlayarak ilk ifadeyi sadeleştirdim . Orijinal sürüm IE hariç tüm tarayıcılarda iyi çalışıyordu.

İkinci olarak, yerini bu ile bağlamda dönüş açıklamada; aksi halde, bu işaret her zaman penceresinden hedef işlemiştik zaman.

function executeFunctionByName(functionName, context /*, args */) {
    var args = Array.prototype.slice.call(arguments, 2);
    var namespaces = functionName.split(".");
    var func = namespaces.pop();
    for (var i = 0; i < namespaces.length; i++) {
        context = context[namespaces[i]];
    }
    return context[func].apply(context, args);
}

Bu diğer sorunun cevabı, bunu nasıl yapacağınızı gösterir: Python'un yerlilerinin () Javascript eşdeğeri?

Temel olarak,

window["foo"](arg1, arg2);

veya diğerlerinin önerdiği gibi, sadece eval kullanabilirsiniz:

eval(fname)(arg1, arg2);

ne değerlendirdiğinizden kesinlikle emin olmadığınız sürece bu son derece güvenli değildir.

Sadece bunu yapmakla kalmaz mısın?

var codeToExecute = "My.Namespace.functionName()";
var tmpFunc = new Function(codeToExecute);
tmpFunc();

Bu yöntemi kullanarak başka herhangi bir JavaScript'i de yürütebilirsiniz.

Bunu yapmanın zarif bir yolu, işlevlerinizi karma bir nesnede tanımlamaktır. Sonra dizeyi kullanarak karma bu işlevlere bir başvuru olabilir. Örneğin

var customObject = {
  customFunction: function(param){...}
};

Ardından şunları arayabilirsiniz:

customObject['customFunction'](param);

CustomFunction işlevi, nesnenizde tanımlanan bir işlevle eşleşen bir dize olacaktır.

ES6 ile sınıf yöntemlerine ada göre erişebilirsiniz:

class X {
  method1(){
    console.log("1");
  }
  method2(){
    this['method1']();
    console.log("2");
  }
}
let x  = new X();
x['method2']();

çıktı:

1
2

İki şey:

• eval önlemek, çok tehlikeli ve yavaş

• ikincisi, fonksiyonunuzun nerede olduğu önemli değildir, "küresel" -lık önemsizdir. x.y.foo()ile etkin olabilir x.y['foo']()veya x['y']['foo']()hatta window['x']['y']['foo'](). Süresiz olarak bu şekilde zincirleyebilirsiniz.

Tüm cevaplar, işlevlere global kapsam (pencere) üzerinden erişilebileceğini varsayar. Ancak, OP bu varsayımı yapmamıştır.

İşlevler yerel bir kapsamda yaşıyorsa (diğer adıyla kapatma) ve başka bir yerel nesne tarafından referans eval()alınmıyorsa, kötü şans: AFAIK kullanmanız gerekir , bkz . Javascript'te yerel işlevi dinamik olarak arama

Dizenizi bir işaretçiye dönüştürmeniz yeterlidir window[<method name>]. misal:

var function_name = "string";
function_name = window[function_name];

ve şimdi bir işaretçi gibi kullanabilirsiniz.

İşte Jason Bunting'in / Alex Nazarov'un mükemmel cevaplarına katkım, burada Crashalot tarafından talep edilen hata kontrolünü ekliyorum.

Bu (çelişkili) önsöz göz önüne alındığında:

a = function( args ) {
    console.log( 'global func passed:' );
    for( var i = 0; i < arguments.length; i++ ) {
        console.log( '-> ' + arguments[ i ] );
    }
};
ns = {};
ns.a = function( args ) {
    console.log( 'namespace func passed:' );
    for( var i = 0; i < arguments.length; i++ ) {
        console.log( '-> ' + arguments[ i ] ); 
    }
};
name = 'nsa';
n_s_a = [ 'Snowden' ];
noSuchAgency = function(){};

sonra aşağıdaki fonksiyon:

function executeFunctionByName( functionName, context /*, args */ ) {
    var args, namespaces, func;

    if( typeof functionName === 'undefined' ) { throw 'function name not specified'; }

    if( typeof eval( functionName ) !== 'function' ) { throw functionName + ' is not a function'; }

    if( typeof context !== 'undefined' ) { 
        if( typeof context === 'object' && context instanceof Array === false ) { 
            if( typeof context[ functionName ] !== 'function' ) {
                throw context + '.' + functionName + ' is not a function';
            }
            args = Array.prototype.slice.call( arguments, 2 );

        } else {
            args = Array.prototype.slice.call( arguments, 1 );
            context = window;
        }

    } else {
        context = window;
    }

    namespaces = functionName.split( "." );
    func = namespaces.pop();

    for( var i = 0; i < namespaces.length; i++ ) {
        context = context[ namespaces[ i ] ];
    }

    return context[ func ].apply( context, args );
}

bir javascript işlevini, argümanlarla veya bağımsız olarak (Dizi nesneleri dahil) bir dizede saklanan ada göre (Dizgi nesneleri dahil) ada göre çağırmanıza olanak tanır ve karşılaşılan hatalar hakkında geri bildirim sağlar (umarım onları yakalarsınız).

Örnek çıktı nasıl çalıştığını gösterir:

// calling a global function without parms
executeFunctionByName( 'a' );
  /* OUTPUT:
  global func passed:
  */

// calling a global function passing a number (with implicit window context)
executeFunctionByName( 'a', 123 );
  /* OUTPUT:
  global func passed:
  -> 123
  */

// calling a namespaced function without parms
executeFunctionByName( 'ns.a' );
  /* OUTPUT:
  namespace func passed:
  */

// calling a namespaced function passing a string literal
executeFunctionByName( 'ns.a', 'No Such Agency!' );
  /* OUTPUT:
  namespace func passed:
  -> No Such Agency!
  */

// calling a namespaced function, with explicit context as separate arg, passing a string literal and array 
executeFunctionByName( 'a', ns, 'No Such Agency!', [ 007, 'is the man' ] );
  /* OUTPUT:
  namespace func passed:
  -> No Such Agency!
  -> 7,is the man
  */

// calling a global function passing a string variable (with implicit window context)
executeFunctionByName( 'a', name );
  /* OUTPUT:
  global func passed:
  -> nsa
  */

// calling a non-existing function via string literal
executeFunctionByName( 'n_s_a' );
  /* OUTPUT:
  Uncaught n_s_a is not a function
  */

// calling a non-existing function by string variable
executeFunctionByName( n_s_a );
  /* OUTPUT:
  Uncaught Snowden is not a function
  */

// calling an existing function with the wrong namespace reference
executeFunctionByName( 'a', {} );
  /* OUTPUT:
  Uncaught [object Object].a is not a function
  */

// calling no function
executeFunctionByName();
  /* OUTPUT:
  Uncaught function name not specified
  */

// calling by empty string
executeFunctionByName( '' );
  /* OUTPUT:
  Uncaught  is not a function
  */

// calling an existing global function with a namespace reference
executeFunctionByName( 'noSuchAgency', ns );
  /* OUTPUT:
  Uncaught [object Object].noSuchAgency is not a function
  */

Nerede olduğunuza bağlı olarak şunları da kullanabilirsiniz:

this["funcname"]();
self["funcname"]();
window["funcname"]();
top["funcname"]();
globalThis["funcname"]();

veya nodejs olarak

global["funcname"]()

Genel işlev yerine bir nesnenin işlevini çağırmak istiyorsanız window["functionName"]. Bunu şöyle yapabilirsiniz;

var myObject=new Object();
myObject["functionName"](arguments);

Misal:

var now=new Date();
now["getFullYear"]()

DİKKATLİ OL!!!

İki nedenden dolayı bir işlevi JavaScript'te dizeye göre çağırmaktan kaçınmalısınız:

Neden 1: Bazı kod gizleyiciler, işlev adlarını değiştirecekleri için kodunuzu enkaz haline getirerek dizeyi geçersiz kılar.

Sebep 2: Bu metodolojiyi kullanan kodu korumak, bir dize tarafından çağrılan yöntemlerin kullanımını bulmak çok daha zordur.

Burada, işlevinizi dize veya işlev adı olarak adıyla çağırmanıza ve farklı işlev türlerine farklı sayıda bağımsız değişken aktarmanıza olanak tanıyan Es6 yaklaşımım:

function fnCall(fn, ...args)
{
  let func = (typeof fn =="string")?window[fn]:fn;
  if (typeof func == "function") func(...args);
  else throw new Error(`${fn} is Not a function!`);
}


function example1(arg1){console.log(arg1)}
function example2(arg1, arg2){console.log(arg1 + "  and   " + arg2)}
function example3(){console.log("No arguments!")}

fnCall("example1", "test_1");
fnCall("example2", "test_2", "test3");
fnCall(example3);
fnCall("example4"); // should raise an error in console

SetTimeout'tan bahsetmekten şaşırdım.

Bir işlevi bağımsız değişkenler olmadan çalıştırmak için:

var functionWithoutArguments = function(){
    console.log("Executing functionWithoutArguments");
}
setTimeout("functionWithoutArguments()", 0);

İşlevi bağımsız değişkenlerle çalıştırmak için:

var functionWithArguments = function(arg1, arg2) {
    console.log("Executing functionWithArguments", arg1, arg2);
}
setTimeout("functionWithArguments(10, 20)");

Derin aralıklarla adlandırılmış işlevi çalıştırmak için:

var _very = {
    _deeply: {
        _defined: {
            _function: function(num1, num2) {
                console.log("Execution _very _deeply _defined _function : ", num1, num2);
            }
        }
    }
}
setTimeout("_very._deeply._defined._function(40,50)", 0);

Yani, diğerlerinin söylediği gibi, kesinlikle en iyi seçenek:

window['myfunction'](arguments)

Jason Bunting'in dediği gibi , işlevinizin adı bir nesne içeriyorsa çalışmaz:

window['myobject.myfunction'](arguments); // won't work
window['myobject']['myfunction'](arguments); // will work

İşte burada tüm işlevleri ada göre (nesne dahil veya değil) yürütecek bir işlev sürümü:

my = {
    code : {
        is : {
            nice : function(a, b){ alert(a + "," + b); }
        }
    }
};

guy = function(){ alert('awesome'); }

function executeFunctionByName(str, args)
{
    var arr = str.split('.');
    var fn = window[ arr[0] ];
    
    for (var i = 1; i < arr.length; i++)
    { fn = fn[ arr[i] ]; }
    fn.apply(window, args);
}

executeFunctionByName('my.code.is.nice', ['arg1', 'arg2']);
executeFunctionByName('guy');

  let t0 = () => { alert('red0') }
  var t1 = () =>{ alert('red1') }
  var t2 = () =>{ alert('red2') }
  var t3 = () =>{ alert('red3') }
  var t4 = () =>{ alert('red4') }
  var t5 = () =>{ alert('red5') }
  var t6 = () =>{ alert('red6') }

  function getSelection(type) {
    var evalSelection = {
      'title0': t0,
      'title1': t1,
      'title2': t2,
      'title3': t3,
      'title4': t4,
      'title5': t5,
      'title6': t6,
      'default': function() {
        return 'Default';
      }
    };
    return (evalSelection[type] || evalSelection['default'])();
  }
  getSelection('title1');

Daha fazla OOP çözümü ...

Jason ve Alex'in gönderileri hakkında bir ayrıntı daha. Bağlama varsayılan bir değer eklemeyi yararlı buldum. Sadece context = context == undefined? window:context;fonksiyonun başına koy . windowTercih ettiğiniz içerik ne olursa olsun değiştirebilirsiniz ve ardından bunu varsayılan içeriğinizde her çağırdığınızda aynı değişkeni iletmeniz gerekmez.

Jason Bunting'in cevabına eklemek için, nodejs veya başka bir şey kullanıyorsanız (ve bu dom js'de de çalışırsa) thisyerine kullanabilirsiniz window(ve unutmayın: eval is evil :

this['fun'+'ctionName']();

Kodumda çok benzer bir şey var. Ben bir üçüncü taraf kitaplığı için bir geri arama olarak geçmesi gereken bir işlev adı içeren bir sunucu tarafından oluşturulan dize var. Bu nedenle, dizeyi alan ve işleve bir "işaretçi" döndüren bir kod var veya bulunmazsa null.

Benim çözümüm " Jason Bunting'in çok yardımcı işlevi " ile çok benzerdi * , ancak otomatik olarak yürütülmüyor ve bağlam her zaman pencerede. Ancak bu kolayca değiştirilebilir.

Umarım bu birisine yardımcı olacaktır.

/**
 * Converts a string containing a function or object method name to a function pointer.
 * @param  string   func
 * @return function
 */
function getFuncFromString(func) {
    // if already a function, return
    if (typeof func === 'function') return func;

    // if string, try to find function or method of object (of "obj.func" format)
    if (typeof func === 'string') {
        if (!func.length) return null;
        var target = window;
        var func = func.split('.');
        while (func.length) {
            var ns = func.shift();
            if (typeof target[ns] === 'undefined') return null;
            target = target[ns];
        }
        if (typeof target === 'function') return target;
    }

    // return null if could not parse
    return null;
}

Orada da çok yararlı bir yol.

http://devlicio.us/blogs/sergio_pereira/archive/2009/02/09/javascript-5-ways-to-call-a-function.aspx

var arrayMaker = {  
    someProperty: 'some value here',  
    make: function (arg1, arg2) {  
        return [ this, arg1, arg2 ];  
    },
    execute: function_name
};

İşlev adını içeren dizenin bir parçası olarak geçirilen argümanların bilinmeyen bir numarası varsa yardımcı olan başka bir hile söz direnemiyorum . Örneğin:

var annoyingstring = 'call_my_func(123, true, "blah")';

Javascript'iniz bir HTML sayfasında çalışıyorsa, tek ihtiyacınız olan görünmez bir bağlantıdır; onclicközniteliğe bir dize geçirebilir ve clickyöntemi çağırabilirsiniz .

<a href="#" id="link_secret"><!-- invisible --></a>

$('#link_secret').attr('onclick', annoyingstring);
$('#link_secret').click();

Veya <a>öğeyi çalışma zamanında oluşturun.

En kolay yol, öğeye sahip gibi erişmektir

window.ClientSideValidations.forms.location_form

ile aynı

window.ClientSideValidations.forms['location_form']

Her eval("functionname as string")ikisinde de javascript işlevini çağırabilirsiniz . Aşağıdaki gibi: (eval saf javascript işlevidir)

function testfunc(){
    return "hello world";
}

$( document ).ready(function() {

     $("div").html(eval("testfunc"));
});

Çalışma örneği: https://jsfiddle.net/suatatan/24ms0fna/4/

Bu benim için çalışıyor:

var command = "Add";
var tempFunction = new Function("Arg1","Arg2", "window." + command + "(Arg1,Arg2)");
tempFunction(x,y);

Umarım bu işe yarar.

Karmaşık ara işlevlere veya değerlendirmeye ihtiyacınız olduğunu veya pencere gibi global değişkenlere bağımlı olduğunuzu düşünmüyorum:

function fun1(arg) {
  console.log(arg);
}

function fun2(arg) {
  console.log(arg);
}

const operations = {
  fun1,
  fun2
};

let temp = "fun1";

try {
  // You have to use square brackets property access
  operations["fun1"]("Hello World");
  operations["fun2"]("Hello World");
  // You can use variables
  operations[temp]("Hello World");
} catch (error) {
  console.error(error);
}

Ayrıca içe aktarılan işlevlerle de çalışır:

// mode.js
export function fun1(arg) {
  console.log(arg);
}

export function fun2(arg) {
  console.log(arg);
}

// index.js
import { fun1, fun2 } from "./mod";

const operations = {
  fun1,
  fun2
};

try {
  operations["fun1"]("Hello World");
  operations["fun2"]("Hello World");
} catch (error) {
  console.error(error);
}

Kullanmadan kullanarak eval('function()')yeni bir işlev oluşturabilirsiniz new Function(strName). Aşağıdaki kod FF, Chrome, IE kullanılarak test edilmiştir.

<html>
<body>
<button onclick="test()">Try it</button>
</body>
</html>
<script type="text/javascript">

  function test() {
    try {    
        var fnName = "myFunction()";
        var fn = new Function(fnName);
        fn();
      } catch (err) {
        console.log("error:"+err.message);
      }
  }

  function myFunction() {
    console.log('Executing myFunction()');
  }

</script>

use this

function executeFunctionByName(functionName, context /*, args */) {
      var args = [].slice.call(arguments).splice(2);
      var namespaces = functionName.split(".");
      var func = namespaces.pop();
      for(var i = 0; i < namespaces.length; i++) {
        context = context[namespaces[i]];
      }
      return context[func].apply(context, args);
    }

Temel görünüyorsun:

var namefunction = 'jspure'; // String

function jspure(msg1 = '', msg2 = '') { 
  console.log(msg1+(msg2!=''?'/'+msg2:''));
} // multiple argument

// Results ur test
window[namefunction]('hello','hello again'); // something...
eval[namefunction] = 'hello'; // use string or something, but its eval just one argument and not exist multiple

Varolan diğer tip fonksiyonu sınıf ve örnek nils petersohn bakmak

Çok yardımcı cevap için teşekkürler. Projelerimde Jason Bunting'in işlevini kullanıyorum .

Ben bir zaman aşımı alışkanlık ayarlamak için normal yolu işe çünkü, isteğe bağlı bir zaman aşımı ile kullanmak için genişletti. Abhishekisnot'un sorusuna bakın

function executeFunctionByName(functionName, context, timeout /*, args */ ) {
	var args = Array.prototype.slice.call(arguments, 3);
	var namespaces = functionName.split(".");
	var func = namespaces.pop();
	for (var i = 0; i < namespaces.length; i++) {
		context = context[namespaces[i]];
	}
	var timeoutID = setTimeout(
		function(){ context[func].apply(context, args)},
		timeout
	);
    return timeoutID;
}

var _very = {
    _deeply: {
        _defined: {
            _function: function(num1, num2) {
                console.log("Execution _very _deeply _defined _function : ", num1, num2);
            }
        }
    }
}

console.log('now wait')
executeFunctionByName("_very._deeply._defined._function", window, 2000, 40, 50 );