I am working on a JavaScript framework that needs to get list of local function variables and set values of some of them. Unlike Java, JavaScript does not have runtime introspection
\nsupport. In Java you can do this using Java Reflection APIs, but I couldn’t think of any way to do this in JavaScript. So I searched on the web and came across two threads of discussions on StackOverflow –<\/p>\n
There are some interesting solutions discussed in the above threads. The first one discusses solutions for setting local variable values. The second one interested me because I found the technique useful for injecting code (that will set local variable value) in a function.<\/p>\n
<\/p>\n
However they do not directly provide solution for getting local variables in a JS function from outside it. But I was able to come up with a solution for this. The scenario for which I have posted the code below is this – a function, let’s call it ‘test’, declares a few local variables, prints value of a variable before it calls a framework function (which gets local variables declared in the ‘test’ function and changes value of a variable) and then prints the value of the same variable (after it has been changed by the framework function). Here is the complete solution\/code –<\/p>\n
<script language=\"<\/span>JavaScript<\/span>\"<\/span>>\n\/\/Instrument local functions for the framework<\/span>\ninstrumentFunctions();\n\n\/**<\/span>\n\u00a0* Test function.<\/span>\n\u00a0* We will get all local variables in this function and set value of a local variable<\/span>\n\u00a0*\/<\/span>\nfunction<\/span> test<\/span>()\n{\n \/\/Declare some local variables<\/span>\n var<\/span> i = 100;\n var<\/span> j = 10, k = 20;\n\n \/\/Print value of i before it is changed by our framework<\/span>\n console.log<\/span>(\"<\/span> i = <\/span>\"<\/span> + i);\n document.writeln(\"<\/span>Before framework call, i = <\/span>\"<\/span> + i + \"<\/span><br><\/span>\"<\/span>);\n\n \/\/Call a framework specific function. <\/span>\n \/\/For this example, we will change value of i in the framework function<\/span>\n if<\/span> (typeof<\/span> __ctx != 'undefined'<\/span>)\n someFrameworkFunction(__ctx);\n\n \/\/Print value of i after calling framework function <\/span>\n console.log<\/span>(\"<\/span> i = <\/span>\"<\/span> + i);\n document.writeln(\"<\/span>After framework call, i = <\/span>\"<\/span> + i + \"<\/span><br><\/span>\"<\/span>);\n}\n\n\/**<\/span>\n\u00a0* Some framework function that is expected to work with local variables declared in the <\/span>\n\u00a0* function from which it is called.<\/span>\n\u00a0* <\/span>\n\u00a0* @param {Object} ctx - context object that has reference to caller and code injected by instrumentFunc function<\/span>\n\u00a0*\/<\/span>\nfunction<\/span> someFrameworkFunction(ctx)\n{\n \/\/Assume this is some framework function that needs to access<\/span>\n \/\/and set local variables of calling function.<\/span>\n\n \/\/Get list of local variables in a function from which this function is called<\/span>\n var<\/span> localVars = ctx.getLocalVars();\n \/\/Print local variables<\/span>\n document.writeln(\"<\/span>Local variables in <\/span>\"<\/span> + ctx.caller.name + \"<\/span> : <\/span>\"<\/span> + localVars.toString<\/span>() + \"<\/span><br><\/span>\"<\/span>);\n\n \/\/Change value of local variable i <\/span>\n ctx.set(\"<\/span>i<\/span>\"<\/span>, 300);\n}\n\n\/**<\/span>\n\u00a0* Calls instrumentFunction method for functions that need to be instrumented<\/span>\n\u00a0*\/<\/span>\nfunction<\/span> instrumentFunctions()\n{\n \/\/Instrument all functions that you want to be accessed by the framework<\/span>\n instrumentFunc(test<\/span>);\n}\n\n\/**<\/span>\n\u00a0* Inserts code in the given function to set local variable and get list of local variables<\/span>\n\u00a0* <\/span>\n\u00a0* @param {Function} func - Function in which to insert framework specific code <\/span>\n\u00a0*\/<\/span>\nfunction<\/span> instrumentFunc(func)\n{\n if<\/span> (typeof<\/span> func != 'function'<\/span>)\n return<\/span>;\n\n var<\/span> oldCode = func.toString<\/span>();\n\n \/\/We want to insert code in the function just after opening '{'<\/span>\n var<\/span> index = oldCode.indexOf<\/span>(\"<\/span>{<\/span>\"<\/span>);\n\n \/\/Split code, part before and after opening '{'<\/span>\n var<\/span> oldCodePart1 = oldCode.slice<\/span>(0,index+1);\n var<\/span> oldCodePart2 = oldCode.slice<\/span>(index+1);\n\n \/\/We will create a context object and create keys to set and get local variables.<\/span>\n var<\/span> codeToInsert = \"<\/span>var __ctx = {}; __ctx.caller=arguments.callee;__ctx.variables={};__ctx.set = __setVar;<\/span>\"<\/span>;\n\n \/\/setVar function declaration<\/span>\n codeToInsert += \"<\/span>function __setVar(name, value){try{eval(name);} catch (err){return false;}eval(name + <\/span>\\\"<\/span> = <\/span>\\\"<\/span> + value);return true;};<\/span>\"<\/span>;\n codeToInsert += \"<\/span>__ctx.getLocalVars = __getLocalVars;<\/span>\"<\/span>\n\n \/\/setLocalVars function declaration<\/span>\n codeToInsert += \"<\/span>function __getLocalVars(){return getLocalVarNames(__ctx.caller.toString());};<\/span>\"<\/span>\n\n \/\/New function code<\/span>\n var<\/span> newCode = oldCodePart1 + codeToInsert + oldCodePart2;\n\n \/\/Create new function<\/span>\n var<\/span> newFunc = eval<\/span>(\"<\/span>newCode<\/span>\"<\/span>);\n\n \/\/Replace old function<\/span>\n eval<\/span> (\"<\/span>window.<\/span>\"<\/span> + func.name + \"<\/span> = <\/span>\"<\/span> + newFunc);\n}\n\n\/**<\/span>\n\u00a0* Gets local variables, declared with var keyword in the given code<\/span>\n\u00a0* <\/span>\n\u00a0* @param {String} code - JS code<\/span>\n\u00a0* <\/span>\n\u00a0* @returns Array of local variable names<\/span>\n\u00a0*\/<\/span>\nfunction<\/span> getLocalVarNames (code)\n{\n \/\/Find variables declared as var, i.e. local variables in the given code<\/span>\n var<\/span> regex =<\/span>\/<\/span>\\b<\/span>var<\/span>\\b<\/span>\\s<\/span>*<\/span>(<\/span>?<\/span>:<\/span>\\s<\/span>*<\/span>(<\/span>\\w<\/span>+<\/span>)<\/span>\\s<\/span>*(?:<\/span>=<\/span>[<\/span>^<\/span>,;<\/span>]<\/span>+)?<\/span>)<\/span>(<\/span>?<\/span>:<\/span>\\s<\/span>*<\/span>,<\/span>\\s<\/span>*<\/span>(<\/span>\\w<\/span>+<\/span>)<\/span>\\s<\/span>*(?:<\/span>=<\/span>[<\/span>^<\/span>,;<\/span>]<\/span>+<\/span>)?)<\/span>*<\/span>\\s<\/span>*<\/span>;<\/span>\/<\/span>g<\/span>;\n var<\/span> matches, result = [];\n while<\/span> (matches = regex.exec<\/span>(code))\n {\n for<\/span> (var<\/span> i = 1; i < matches.length; i++) {\n if<\/span> (matches[i] != undefined) {\n \/\/filter framework specific variables here<\/span>\n if<\/span> (matches[i] != \"<\/span>__ctx<\/span>\"<\/span>)\n result.push(matches[i]);\n }\n }\n }\n return<\/span> result;\n}\n\n\/\/Call test function. This function is already instrumented in instrumentFunctions<\/span>\ntest<\/span>();\n\n<\/script><\/pre>\n-Ram Kulkarni<\/p>\n","protected":false},"excerpt":{"rendered":"
I am working on a JavaScript framework that needs to get list of local function variables and set values of some of them. Unlike Java, JavaScript does not have runtime introspection support. In Java you can do this using Java Reflection APIs, but I couldn’t think of any way to do this in JavaScript. So … <\/p>\n