使用变量作为函数名称可能会涉及多个层次

Question

I have had a look around the site and seem to have come across some solutions, but none seem to work. So here's the problem.

I have the following Javascript:

 THEOBJECT = { init: function() { this.tools.init(); } }; THEOBJECT.tools = { active: false, init: function() { // active variable updated elsewhere/loading if (!this.active) { THEOBJECT.utils.timeout('tools.init', 100); } // is active so continue } }; THEOBJECT.utils = { timeout: function(functionName, time) { setTimeout(function() { THEOBJECT[functionName](); }, time); } }; THEOBJECT.init(); 

I am getting an error when running the THEOBJECT.utils.timeout saying:

THEOBJECT[functionName] is not a function

I'm trying to run THEOBJECT.tools.init()

I'm assuming this is because it's not a direct function of the THEOBJECT object is there a way around this or is a split() the best way to go?

Answer 1

There is other option to do it using lodash.js . Please see the updated snippet.

Or go with conventional approch mentioned below

You are trying to access a property in wrong way

you are doing THEOBJECT[tools.init] which incorrect. It should be like THEOBEJECT[tools][init]

 THEOBJECT = { init: function() { this.tools.init(); } }; THEOBJECT.tools = { active: false, init: function() { // active variable updated elsewhere/loading if (!this.active) { THEOBJECT.utils.timeout('tools.init', 100); } console.log("active") // is active so continue } }; THEOBJECT.utils = { timeout: function(functionName, time) { setTimeout(function() { _.get(THEOBJECT,functionName); }, time); } }; THEOBJECT.init(); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.js"></script> 

Answer 2

you can also go with a simple reduce and make it a one-liner:

functionName.split('.').reduce((acc,curr) => return acc[curr], THEOBJECT)();

---

within your code:

 THEOBJECT = { init: function() { this.tools.init(); } }; THEOBJECT.tools = { active: false, init: function() { // active variable updated elsewhere/loading if (!this.active) { THEOBJECT.utils.timeout('tools.init', 100); } // is active so continue } }; THEOBJECT.utils = { timeout: function(functionName, time) { setTimeout(function() { functionName.split('.').reduce((acc,curr) => acc[curr],THEOBJECT)(); }, time); } }; THEOBJECT.init();