如何使用变量名执行函数？

Question

Here is my code:

 $(function(){ function myfunc(){ alert("executed"); } var function_name = "myfunc"; window[function_name](); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

As you can see, that function is not defined. Why? And how can I make it working?

Answer 1

The function is not defined in the global scope so it's not a member of the window object.

You can attach the function to the window object like this.

$(function(){
  window.myfunc = function(){
    alert("executed");
  };

  var function_name = "myfunc";
  window[function_name]();
})

Answer 2

It works only for global functions, because the scope is identically with the window object.

You could assing a function to a wanted property of the window object, just as to any other object.

 function myfunc(){ alert("executed"); } $(function(){ var function_name = "myfunc"; window[function_name](); window.foo = _ => console.log('foo'); window.foo(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

Answer 3

While the direct answer to your question is that your function wasn't defined as a Global and so, attempting to call it as a property of window fails, putting your function into Global scope is not really a good answer.

Instead, make the function a method of a user-defined object (that can be put into any scope you like) and call the function as a property of that object:

 // Immediately-Invoked Function Expression (IIFE) // that keeps all of its contents out of the Global scope (function(){ let functionHolder = { someFunction : function(){ console.log("You did it!"); } }; // Set up a variable that has the same name as the function let funcName = "someFunction"; // Call the function via the object functionHolder[funcName](); })()