Cách thực thi hàm JavaScript khi tôi có tên là chuỗi

Tôi có tên của một hàm trong JavaScript dưới dạng một chuỗi. Làm thế nào để tôi chuyển đổi nó thành một con trỏ hàm để tôi có thể gọi nó sau?

Tùy thuộc vào hoàn cảnh, tôi cũng có thể cần chuyển các đối số khác nhau vào phương thức.

Một số chức năng có thể có hình thức namespace.namespace.function(args[...]).

Đừng sử dụng evaltrừ khi bạn hoàn toàn, tích cực không có lựa chọn nào khác.

Như đã đề cập, sử dụng một cái gì đó như thế này sẽ là cách tốt nhất để làm điều đó:

window["functionName"](arguments);

Tuy nhiên, điều đó sẽ không hoạt động với chức năng không gian tên:

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

Đây là cách bạn sẽ làm điều đó:

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

Để làm cho điều đó dễ dàng hơn và cung cấp một số tính linh hoạt, đây là một chức năng tiện lợi:

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

Bạn sẽ gọi nó như vậy:

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

Lưu ý, bạn có thể vượt qua trong bất kỳ bối cảnh nào bạn muốn, vì vậy điều này sẽ làm tương tự như trên:

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

Chỉ cần nghĩ rằng tôi sẽ đăng một phiên bản thay đổi một chút chức năng rất hữu ích của Jason Bunting .

Đầu tiên, tôi đã đơn giản hóa câu lệnh đầu tiên bằng cách cung cấp một tham số thứ hai cho lát () . Phiên bản gốc đã hoạt động tốt trong tất cả các trình duyệt trừ IE.

Thứ hai, tôi đã thay thế điều này bằng bối cảnh trong tuyên bố trở lại; mặt khác, điều này luôn luôn trỏ đến cửa sổ khi chức năng đích đang được thực thi.

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

Câu trả lời cho câu hỏi khác này cho bạn biết cách thực hiện: Javascript tương đương với người địa phương của Python ()?

Về cơ bản, bạn có thể nói

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

hoặc như nhiều người khác đã đề xuất, bạn chỉ có thể sử dụng eval:

eval(fname)(arg1, arg2);

mặc dù điều này cực kỳ không an toàn trừ khi bạn hoàn toàn chắc chắn về những gì bạn đang đánh giá.

Bạn có thể không chỉ làm điều này:

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

Bạn cũng có thể thực thi bất kỳ JavaScript nào khác bằng phương pháp này.

Tôi nghĩ rằng một cách thanh lịch để làm điều này là bằng cách xác định các chức năng của bạn trong một đối tượng băm. Sau đó, bạn có thể có một tham chiếu đến các hàm đó từ hàm băm bằng chuỗi. ví dụ

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

Sau đó, bạn có thể gọi:

customObject['customFunction'](param);

Trong đó customFunction sẽ là một chuỗi khớp với một hàm được xác định trong đối tượng của bạn.

Với ES6, bạn có thể truy cập các phương thức lớp theo tên:

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

đầu ra sẽ là:

1
2

Hai điều:

• tránh eval, nó cực kỳ nguy hiểm và chậm

• thứ hai, không quan trọng chức năng của bạn tồn tại ở đâu, tính "toàn cầu" là không liên quan. x.y.foo()có thể được kích hoạt thông qua x.y['foo']()hoặc x['y']['foo']()hoặc thậm chí window['x']['y']['foo'](). Bạn có thể chuỗi vô tận như thế này.

Tất cả các câu trả lời cho rằng các chức năng có thể được truy cập thông qua phạm vi toàn cầu (cửa sổ). Tuy nhiên, OP đã không đưa ra giả định này.

Nếu các hàm sống trong phạm vi cục bộ (còn gọi là đóng) và không được tham chiếu bởi một số đối tượng cục bộ khác, thật không may: Bạn phải sử dụng eval()AFAIK, hãy xem động gọi hàm cục bộ trong javascript

Bạn chỉ cần chuyển đổi chuỗi của bạn thành một con trỏ bằng cách window[<method name>]. thí dụ:

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

và bây giờ bạn có thể sử dụng nó như một con trỏ.

Đây là đóng góp của tôi cho câu trả lời xuất sắc của Jason Bunting / Alex Nazarov, trong đó tôi bao gồm kiểm tra lỗi do Crashalot yêu cầu.

Đưa ra lời mở đầu (giả định) này:

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

Sau đó, chức năng sau đây:

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

sẽ cho phép bạn gọi một hàm javascript theo tên được lưu trữ trong một chuỗi, được đặt tên hoặc toàn cục, có hoặc không có đối số (bao gồm các đối tượng Array), cung cấp phản hồi về bất kỳ lỗi nào gặp phải (hy vọng bắt được chúng).

Đầu ra mẫu cho thấy cách thức hoạt động:

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

Tùy thuộc vào nơi bạn ở, bạn cũng có thể sử dụng:

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

hoặc, trong nodejs

global["funcname"]()

Nếu bạn muốn gọi một hàm của một đối tượng thay vì một hàm toàn cục với window["functionName"]. Bạn có thể làm nó như thế nào;

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

Thí dụ:

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

HÃY CẨN THẬN!!!

Mọi người nên cố gắng tránh gọi một hàm theo chuỗi trong JavaScript vì hai lý do:

Lý do 1: Một số obfuscators mã sẽ phá hỏng mã của bạn vì chúng sẽ thay đổi tên hàm, làm cho chuỗi không hợp lệ.

Lý do 2: Việc duy trì mã sử dụng phương pháp này khó hơn nhiều vì việc định vị các cách sử dụng các phương thức được gọi bởi một chuỗi khó hơn nhiều.

Đây là cách tiếp cận Es6 của tôi cho phép bạn gọi hàm của mình bằng tên của nó dưới dạng chuỗi hoặc tên hàm và cũng cho phép bạn chuyển các số lượng đối số khác nhau cho các loại hàm khác nhau:

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

Ngạc nhiên khi thấy không đề cập đến setTimeout.

Để chạy một hàm không có đối số:

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

Để chạy chức năng với các đối số:

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

Để chạy chức năng đặt tên sâu:

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

Vì vậy, như những người khác đã nói, chắc chắn lựa chọn tốt nhất là:

window['myfunction'](arguments)

Và như Jason Bunting đã nói , nó sẽ không hoạt động nếu tên hàm của bạn bao gồm một đối tượng:

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

Vì vậy, đây là phiên bản chức năng của tôi sẽ thực thi tất cả các chức năng theo tên (bao gồm cả một đối tượng hay không):

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

Một giải pháp OOP hơn ...

Thêm một chi tiết về bài viết của Jason và Alex. Tôi thấy hữu ích khi thêm một giá trị mặc định vào ngữ cảnh. Chỉ cần đặt context = context == undefined? window:context;ở đầu chức năng. Bạn có thể thay đổi windowthành bất kỳ bối cảnh ưa thích nào của bạn, và sau đó bạn sẽ không cần phải chuyển cùng một biến mỗi lần bạn gọi nó trong ngữ cảnh mặc định của bạn.

Để thêm vào câu trả lời của Jason Bunting, nếu bạn đang sử dụng nodejs hoặc thứ gì đó (và điều này cũng hoạt động trong dom js), bạn có thể sử dụng thisthay vì window(và hãy nhớ: eval là ác :

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

Có một điều rất giống trong mã của tôi. Tôi có một chuỗi do máy chủ tạo ra chứa tên hàm mà tôi cần chuyển qua làm cuộc gọi lại cho thư viện bên thứ 3. Vì vậy, tôi có một mã lấy chuỗi và trả về một "con trỏ" cho hàm hoặc null nếu nó không được tìm thấy.

Giải pháp của tôi rất giống với " Chức năng rất hữu ích của Jason Bunting " * , mặc dù nó không tự động thực hiện và bối cảnh luôn ở trên cửa sổ. Nhưng điều này có thể dễ dàng sửa đổi.

Hy vọng điều này sẽ hữu ích cho ai đó.

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

Có quá nhiều cách rất hữu ích.

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

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

Tôi không thể cưỡng lại việc đề cập đến một thủ thuật khác, nó giúp nếu bạn có một số lượng đối số không xác định cũng được truyền vào như một phần của chuỗi chứa tên hàm. Ví dụ:

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

Nếu Javascript của bạn đang chạy trên trang HTML, tất cả những gì bạn cần là một liên kết vô hình; bạn có thể truyền một chuỗi vào onclickthuộc tính và gọi clickphương thức.

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

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

Hoặc tạo <a>phần tử khi chạy.

Cách dễ nhất là truy cập nó như có yếu tố

window.ClientSideValidations.forms.location_form

giống như

window.ClientSideValidations.forms['location_form']

Bạn có thể gọi chức năng javascript trong một eval("functionname as string")trong hai. Giống như dưới đây: (eval là chức năng javascript thuần túy)

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

$( document ).ready(function() {

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

Ví dụ hoạt động: https://jsfiddle.net/suatatan/24ms0fna/4/

Điều này làm việc cho tôi:

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

Tôi mong cái này sẽ thành công.

Tôi không nghĩ rằng bạn cần các chức năng trung gian phức tạp hoặc eval hoặc phụ thuộc vào các biến toàn cục như cửa sổ:

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

Nó cũng sẽ hoạt động với các chức năng được nhập:

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

Không sử dụng eval('function()')bạn có thể tạo một chức năng mới bằng cách sử dụng new Function(strName). Mã dưới đây đã được kiểm tra bằng 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);
    }

Nhìn cơ bản:

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

Hàm loại khác tồn tại là lớp và xem ví dụ nils petersohn

Cảm ơn câu trả lời rất hữu ích. Tôi đang sử dụng chức năng của Jason Bunting trong các dự án của mình.

Tôi đã mở rộng nó để sử dụng nó với thời gian chờ tùy chọn, vì cách thông thường để đặt thời gian chờ sẽ không hoạt động. Xem câu hỏi của 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 );