วิธีการใช้งานฟังก์ชั่น JavaScript เมื่อฉันมีชื่อเป็นสตริง

ฉันมีชื่อฟังก์ชั่นใน JavaScript เป็นสตริง ฉันจะแปลงให้เป็นตัวชี้ฟังก์ชั่นเพื่อให้ฉันสามารถเรียกมันได้ในภายหลัง?

ขึ้นอยู่กับสถานการณ์ฉันอาจต้องผ่านการขัดแย้งต่าง ๆ ลงในวิธีการด้วย

namespace.namespace.function(args[...])บางส่วนของฟังก์ชั่นอาจใช้รูปแบบของ

อย่าใช้evalเว้นเสียแต่ว่าคุณจะบวกไม่มีทางเลือกอื่น

ตามที่ได้กล่าวไว้การใช้บางอย่างเช่นนี้จะเป็นวิธีที่ดีที่สุดในการทำสิ่งนี้:

window["functionName"](arguments);

อย่างไรก็ตามจะไม่ทำงานกับฟังก์ชันเนมสเปซ:

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

นี่คือวิธีที่คุณจะทำ:

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

เพื่อให้ง่ายขึ้นและให้ความยืดหยุ่นนี่คือฟังก์ชั่นความสะดวกสบาย:

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);
}

คุณจะเรียกมันว่า:

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

หมายเหตุคุณสามารถผ่านในบริบทใดก็ได้ที่คุณต้องการดังนั้นสิ่งนี้จะทำเช่นเดียวกับข้างบน:

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

แค่คิดว่าฉันโพสต์ฟังก์ชั่นที่มีประโยชน์มากของJason Buntingรุ่นที่เปลี่ยนแปลงเล็กน้อยฟังก์ชั่นที่เป็นประโยชน์มากเจสันตอม่อ

ครั้งแรกฉันได้ลดความซับซ้อนของคำสั่งแรกโดยการส่งพารามิเตอร์ที่สองเพื่อชิ้น ()() รุ่นเดิมทำงานได้ดีในเบราว์เซอร์ทั้งหมดยกเว้น IE

ประการที่สองฉันได้แทนที่สิ่งนี้ด้วยบริบทในคำสั่ง return; มิฉะนั้นสิ่งนี้จะชี้ไปที่หน้าต่างเสมอเมื่อมีการเรียกใช้ฟังก์ชันเป้าหมาย

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);
}

คำตอบสำหรับคำถามอื่นแสดงให้คุณเห็นว่าต้องทำอย่างไร: Javascript เทียบเท่ากับ Python locals ()?

โดยทั่วไปคุณสามารถพูดได้

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

หรืออย่างที่คนอื่น ๆ ได้แนะนำคุณสามารถใช้ eval:

eval(fname)(arg1, arg2);

แม้ว่าจะไม่ปลอดภัยอย่างมากเว้นแต่คุณจะแน่ใจอย่างแน่นอนเกี่ยวกับสิ่งที่คุณกำลังประเมิน

คุณไม่สามารถทำสิ่งนี้ได้:

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

คุณยังสามารถเรียกใช้ JavaScript อื่น ๆ โดยใช้วิธีนี้

ฉันคิดว่าวิธีที่ยอดเยี่ยมในการทำเช่นนี้คือการกำหนดฟังก์ชั่นของคุณในวัตถุแฮช จากนั้นคุณสามารถอ้างอิงถึงฟังก์ชันเหล่านั้นได้จากแฮชโดยใช้สตริง เช่น

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

จากนั้นคุณสามารถโทร:

customObject['customFunction'](param);

โดยที่ customFunction จะเป็นสตริงที่ตรงกับฟังก์ชั่นที่กำหนดไว้ในวัตถุของคุณ

ด้วย ES6 คุณสามารถเข้าถึงวิธีการเรียนโดยใช้ชื่อ:

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

ผลลัพธ์จะเป็น:

1
2

สองสิ่ง:

• หลีกเลี่ยงการ eval มันอันตรายมากและช้า

• ประการที่สองมันไม่สำคัญว่าจะมีฟังก์ชั่นของคุณอยู่ที่ใด x.y.foo()สามารถเปิดใช้งานผ่านx.y['foo']()หรือหรือแม้กระทั่งx['y']['foo']() window['x']['y']['foo']()คุณสามารถโยงเรื่องนี้ไปเรื่อย ๆ

คำตอบทั้งหมดสมมติว่าฟังก์ชั่นสามารถเข้าถึงได้ผ่านขอบเขตทั่วโลก (หน้าต่าง) อย่างไรก็ตาม OP ไม่ได้ทำสมมติฐานนี้

หากฟังก์ชั่นอาศัยอยู่ในขอบเขตท้องถิ่น (การปิด aka) และไม่ได้อ้างอิงโดยวัตถุในท้องถิ่นอื่น ๆ โชคไม่ดี: คุณต้องใช้eval()AFAIK ดูการ เรียกใช้ฟังก์ชั่นท้องถิ่นในจาวาสคริปต์

window[<method name>]คุณเพียงแค่ต้องแปลงสตริงของคุณเพื่อชี้โดย ตัวอย่าง:

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

และตอนนี้คุณสามารถใช้มันเหมือนเป็นตัวชี้

นี่คือผลงานของฉันต่อคำตอบที่ยอดเยี่ยมของ Jason Bunting / Alex Nazarov ซึ่งฉันรวมการตรวจสอบข้อผิดพลาดที่ร้องขอโดย Crashalot

รับบทนำนี้ (ประดิษฐ์):

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(){};

จากนั้นฟังก์ชั่นต่อไปนี้:

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 );
}

จะช่วยให้คุณสามารถเรียกใช้ฟังก์ชันจาวาสคริปต์โดยใช้ชื่อที่เก็บไว้ในสตริงไม่ว่าจะเป็นเนมสเปซหรือโกลบอลโดยมีหรือไม่มีอาร์กิวเมนต์ (รวมถึงออบเจ็กต์ Array) ซึ่งให้ข้อเสนอแนะเกี่ยวกับข้อผิดพลาดที่พบ

ผลลัพธ์ตัวอย่างแสดงวิธีการทำงาน:

// 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
  */

ขึ้นอยู่กับว่าคุณอยู่ที่ไหนคุณยังสามารถใช้:

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

หรือใน nodejs

global["funcname"]()

window["functionName"]หากคุณต้องการที่จะเรียกฟังก์ชั่นของวัตถุแทนการใช้ฟังก์ชั่นระดับโลกที่มี คุณสามารถทำได้เช่น;

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

ตัวอย่าง:

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

ระวัง!!!

หนึ่งควรพยายามหลีกเลี่ยงการเรียกใช้ฟังก์ชันโดยสายอักขระใน JavaScript ด้วยเหตุผลสองประการ:

เหตุผลที่ 1: รหัส obfuscators จะทำลายรหัสของคุณเนื่องจากพวกเขาจะเปลี่ยนชื่อฟังก์ชั่นทำให้สตริงไม่ถูกต้อง

เหตุผลที่ 2: การบำรุงรักษาโค้ดที่ใช้วิธีการนี้ยากกว่ามากเนื่องจากเป็นการยากที่จะค้นหาวิธีการที่เรียกใช้โดยสตริง

นี่คือวิธี Es6 ของฉันซึ่งช่วยให้คุณสามารถเรียกใช้ฟังก์ชันของคุณโดยใช้ชื่อเป็นสตริงหรือชื่อฟังก์ชันและยังช่วยให้คุณสามารถส่งอาร์กิวเมนต์จำนวนต่างๆไปยังฟังก์ชันประเภทต่างๆ:

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

วิธีเรียกใช้ฟังก์ชันที่ไม่มีอาร์กิวเมนต์:

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

วิธีเรียกใช้ฟังก์ชันด้วยอาร์กิวเมนต์:

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

ในการเรียกใช้ฟังก์ชันเนมสเปซแบบลึก:

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);

ตัวเลือกที่ดีที่สุดคือ:

window['myfunction'](arguments)

และเช่นเดียวกับJason Bunting กล่าวว่าจะไม่ทำงานหากชื่อฟังก์ชันของคุณมีวัตถุ:

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

ดังนั้นนี่คือรุ่นของฟังก์ชันที่จะเรียกใช้ฟังก์ชันทั้งหมดตามชื่อ (รวมถึงวัตถุหรือไม่):

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');

โซลูชัน OOP เพิ่มเติม ...

รายละเอียดเพิ่มเติมเกี่ยวกับการโพสต์ของ Jason และ Alex ฉันพบว่ามีประโยชน์ในการเพิ่มค่าเริ่มต้นให้กับบริบท เพียงใส่context = context == undefined? window:context;ที่จุดเริ่มต้นของฟังก์ชั่น คุณสามารถเปลี่ยนwindowเป็นบริบทที่คุณต้องการจากนั้นคุณไม่จำเป็นต้องผ่านตัวแปรเดียวกันทุกครั้งที่คุณเรียกสิ่งนี้ในบริบทเริ่มต้นของคุณ

เพื่อเพิ่มคำตอบของ Jason Bunting หากคุณใช้ nodejs หรืออะไรบางอย่าง (และสิ่งนี้ทำงานใน dom js ด้วย) คุณสามารถใช้thisแทนwindow(และจำไว้ว่า: eval เป็นสิ่งชั่วร้าย :

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

ในรหัสของฉันมีสิ่งที่คล้ายกันมาก ฉันมีสตริงที่เซิร์ฟเวอร์สร้างขึ้นซึ่งมีชื่อฟังก์ชั่นที่ฉันต้องผ่านเป็น callback สำหรับห้องสมุดบุคคลที่สาม ดังนั้นฉันมีรหัสที่ใช้สตริงและส่งกลับ "ตัวชี้" เพื่อฟังก์ชั่นหรือ null ถ้าไม่พบ

โซลูชันของฉันคล้ายกับ " ฟังก์ชั่นที่มีประโยชน์มากของ Jason Bunting " *ถึงแม้ว่ามันจะไม่ทำงานอัตโนมัติ แต่สิ่งนี้สามารถแก้ไขได้ง่าย

หวังว่านี่จะเป็นประโยชน์กับใครบางคน

/**
 * 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;
}

มีวิธีที่เป็นประโยชน์ด้วย

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
};

ฉันไม่สามารถต้านทานพูดถึงเคล็ดลับอื่นซึ่งช่วยถ้าคุณมีจำนวนอาร์กิวเมนต์ที่ไม่รู้จักที่ยังถูกส่งผ่านเป็นส่วนหนึ่งของสตริงที่มีชื่อฟังก์ชั่น ตัวอย่างเช่น:

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

หาก Javascript ของคุณทำงานบนหน้า HTML สิ่งที่คุณต้องมีก็คือลิงค์ที่มองไม่เห็น คุณสามารถส่งผ่านสตริงไปยังonclickแอ็ตทริบิวต์และเรียกใช้clickเมธอด

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

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

หรือสร้าง<a>องค์ประกอบที่รันไทม์

วิธีที่ง่ายที่สุดคือเข้าถึงได้เหมือนมีองค์ประกอบ

window.ClientSideValidations.forms.location_form

เป็นเช่นเดียวกับ

window.ClientSideValidations.forms['location_form']

คุณสามารถเรียกฟังก์ชั่นจาวาสคริปต์ภายในeval("functionname as string")อย่างใดอย่างหนึ่ง ชอบด้านล่าง: (eval เป็นฟังก์ชั่นจาวาสคริปต์ที่บริสุทธิ์)

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

$( document ).ready(function() {

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

ตัวอย่างการทำงาน: https://jsfiddle.net/suatatan/24ms0fna/4/

นี่ใช้งานได้สำหรับฉัน:

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

ฉันหวังว่างานนี้

ฉันไม่คิดว่าคุณต้องการฟังก์ชั่นกลางที่ซับซ้อนหรือประเมินหรือขึ้นอยู่กับตัวแปรทั่วโลกเช่นหน้าต่าง:

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);
}

มันจะทำงานกับฟังก์ชั่นที่นำเข้า:

// 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);
}

โดยไม่ต้องใช้ที่คุณสามารถทำได้เพื่อสร้างฟังก์ชั่นใหม่โดยใช้eval('function()') new Function(strName)รหัสด้านล่างได้รับการทดสอบโดยใช้ FF, Chrome, IE

<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);
    }

ดูพื้นฐาน:

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

มีฟังก์ชั่นประเภทอื่น ๆ อยู่ระดับและดูตัวอย่างnils petersohn

ขอบคุณสำหรับคำตอบที่เป็นประโยชน์มาก ฉันใช้ฟังก์ชันของ Jason Buntingในโครงการของฉัน

ฉันขยายมันเพื่อใช้กับการหมดเวลาเสริมเพราะวิธีปกติในการตั้งค่าการหมดเวลาจะไม่ทำงาน ดูคำถามของ abhishekisnot

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 );